我之前也碰到过一模一样的困扰！核心问题在于Monaco的typescript语言模式默认不兼容JSX，直接修改全局编译器选项也不生效——因为模型的语言关联没对应上正确的配置上下文。下面是亲测有效的解决步骤：

1. 手动注册typescriptreact语言（如果编辑器未内置） #

Monaco其实原生支持typescriptreact，只是部分场景下没有自动注册，你可以手动完成语言注册：

// 确保已加载必要的模块
import * as monaco from 'monaco-editor';
import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';

// 注册typescriptreact语言ID
monaco.languages.register({ id: 'typescriptreact' });
// 绑定语法高亮和语言配置
monaco.languages.setMonarchTokensProvider('typescriptreact', monaco.languages.typescript.typescriptMonarchLanguage);
monaco.languages.setLanguageConfiguration('typescriptreact', monaco.languages.typescript.typescriptLanguageConfiguration);

2. 配置React模式的编译器选项并关联模型 #

注册完语言后，需要给typescriptreact单独设置编译器选项，同时把你的编辑器模型关联到这个语言：

// 配置支持JSX的TypeScript编译选项
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
  jsx: 'react',
  jsxFactory: 'React.createElement',
  target: 'ESNext',
  module: 'ESNext',
  strict: true,
  allowJs: false
});

// 创建模型时指定typescriptreact语言，配合.tsx后缀效果更稳妥
const jsxModel = monaco.editor.createModel(
  '<div>Hello JSX in Monaco!</div>',
  'typescriptreact',
  monaco.Uri.parse('file:///demo.tsx')
);

// 将模型绑定到编辑器
editor.setModel(jsxModel);

3. 替代方案：给纯TypeScript模型强制启用JSX支持 #

如果你坚持要用typescript语言ID，可以单独给目标模型覆盖编译选项：

const model = monaco.editor.createModel(
  '<div>Test JSX</div>',
  'typescript',
  monaco.Uri.parse('file:///test.tsx')
);

// 单独为该模型开启JSX支持
model.updateOptions({
  compilerOptions: {
    jsx: 'react'
  }
});

不过这种方式偶尔会有语法高亮的兼容性问题，更推荐用typescriptreact语言ID的方案。

为什么之前的全局配置不生效？ #

Monaco的TypeScript服务会根据模型的语言ID和文件后缀来匹配对应的编译规则，全局的typescriptDefaults是给纯TypeScript文件设计的，JSX内容需要关联到typescriptreact的配置上下文，所以直接修改全局选项不会对JSX代码生效。

内容的提问来源于stack exchange，提问作者Uri Kutner