<Editor
height="60vh"
defaultLanguage="typescript"
options={{
minimap: {
enabled: false,
},
}}
theme="vs-dark"
onMount={async (editor, monaco) => {
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.Latest,
allowNonTsExtensions: true,
moduleResolution:
monaco.languages.typescript.ModuleResolutionKind.NodeJs,
module: monaco.languages.typescript.ModuleKind.CommonJS,
noEmit: true,
esModuleInterop: true,
jsx: monaco.languages.typescript.JsxEmit.React,
reactNamespace: 'React',
allowJs: true,
typeRoots: ['node_modules/@types'],
})
monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
noSemanticValidation: false,
noSyntaxValidation: false,
})
const code = await fetch('https://unpkg.com/@react/types').then(res =>
res.text(),
)
monaco.languages.typescript.typescriptDefaults.addExtraLib(
code,
`file:///node_modules/@react/types/index.d.ts`,
)
monaco.editor.createModel(
value,
'typescript',
monaco.Uri.parse('file:///main.tsx'),
)
}}
value={value}
onChange={value => {
setValue(value ?? '')
}}
/>
<Editor
height="60vh"
defaultLanguage="typescript"
options={{
minimap: {
enabled: false,
},
}}
theme="vs-dark"
onMount={async (editor, monaco) => {
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.Latest,
allowNonTsExtensions: true,
moduleResolution:
monaco.languages.typescript.ModuleResolutionKind.NodeJs,
module: monaco.languages.typescript.ModuleKind.CommonJS,
noEmit: true,
esModuleInterop: true,
jsx: monaco.languages.typescript.JsxEmit.React,
reactNamespace: 'React',
allowJs: true,
typeRoots: ['node_modules/@types'],
})
monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
noSemanticValidation: false,
noSyntaxValidation: false,
})
const code = await fetch('https://unpkg.com/@react/types').then(res =>
res.text(),
)
monaco.languages.typescript.typescriptDefaults.addExtraLib(
code,
`file:///node_modules/@react/types/index.d.ts`,
)
monaco.editor.createModel(
value,
'typescript',
monaco.Uri.parse('file:///main.tsx'),
)
}}
value={value}
onChange={value => {
setValue(value ?? '')
}}
/>