如何在monaco-editor中实现React JSX语法高亮？

问题场景 #

在Monaco Editor中编写JSX代码时，已成功实现类型检查功能，但JSX语法无法高亮显示。当前配置代码如下：

TypeScript核心配置 #

monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
  noSemanticValidation: false,
  noSyntaxValidation: false,
})

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",
  jsxFactory: 'React.createElement',
  allowJs: true,
  typeRoots: ["node_modules/@types"],
})

React类型定义配置 #

monaco?.languages.typescript.javascriptDefaults.addExtraLib(
        typings, 
        `file:///node_modules/@types/react.d.ts.d.ts`
)

当前效果：代码提示正常，但JSX语法无高亮

解决方案 #

• 指定正确的编辑器语言模式
  创建编辑器实例时，必须将语言设置为typescriptreact（而非javascript或typescript）：

  monaco.editor.create(document.getElementById('container'), {
    value: '<div>Hello JSX</div>',
    language: 'typescriptreact' // 关键配置
  });
  

  若处理.jsx后缀文件，需手动关联语言规则：

  monaco.languages.register({ id: 'javascriptreact' });
  monaco.languages.setMonarchTokensProvider('javascriptreact', monaco.languages.typescript.typescriptMonarchLanguage);
  monaco.languages.setLanguageConfiguration('javascriptreact', monaco.languages.typescript.typescriptLanguageConfiguration);
  

• 修正类型定义文件路径
  当前配置中类型定义路径存在重复后缀d.ts.d.ts，改为正确路径：

  monaco?.languages.typescript.javascriptDefaults.addExtraLib(
    typings, 
    `file:///node_modules/@types/react/index.d.ts`
  );
  

• 确认语法支持文件加载
  若使用CDN引入Monaco Editor，需确保加载了TypeScript语法贡献文件（如monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js），保证JSX语法解析逻辑正常生效。

验证 #

调整配置后重新初始化编辑器，JSX标签、属性等语法应能正常高亮，同时保留原有的类型检查功能。

内容的提问来源于stack exchange，提问作者徐青山