Theo's Typesafe Cult•12mo ago

Use @monaco-editor/react as a tsx editor

Has anyone figured out how todo this? I can only get any types for my jsx code and no syntax highlighting, which apparently is a general limitation. Would highly appreciate any working code snippets or hint in the right direction. Current code:

            <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 ?? '')
                }}
            />

Thanks for reading!

5 Replies

Matvey•12mo ago

I think the language for tsx should be set to typescriptreact

NotLuksusOP•12mo ago

Nope that sadly doesn't work

bluem•11mo ago

@NotLuksus did you ever get this working? I'm trying to do the exact same thing.

NotLuksusOP•11mo ago

Yeah I figured it out, basically what you need todo is fetch the react types and add them to your monaco editor by creating a new model in the react folder named index.d.ts and inside there save the @types/react index.d.ts

bluem•11mo ago

Would you be willing to share a sample or sandbox? https://codesandbox.io/p/sandbox/monaco-example-9lc94l Here is my attempt @NotLuksus, but useState does not have any types. I am already fetching the react types, and creating a new model at @@types/react/index.d.ts.

Gaming

Programming

Use @monaco-editor/react as a tsx editor