如何正确初始化并使用Monaco Editor分词器？解决空Token数组问题

安全阿岳

2026-8-7

Monaco Editor分词器在React中正确使用的解决方案

问题本质：直接调用monaco.editor.tokenize时，TypeScript语言分词器尚未完成初始化，导致每行返回空Token数组。延迟1秒的临时方案只是靠运气等服务加载完成，并非可靠解法。

可靠解决方案：等待语言服务初始化完成

直接使用monaco-editor包时，利用TypeScript语言服务的创建钩子：

import * as monaco from 'monaco-editor';

// 按需配置TypeScript编译选项
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
  target: monaco.languages.typescript.ScriptTarget.ES2020,
  module: monaco.languages.typescript.ModuleKind.CommonJS
});

// 等待TypeScript语言服务就绪后再调用tokenize
monaco.languages.typescript.typescriptDefaults.onDidCreateLanguageService(() => {
  const tsCode = `const user: {name: string} = {name: 'Alice'};`;
  const tokenResult = monaco.editor.tokenize(tsCode, 'typescript');
  console.log(tokenResult); // 正常返回Token数组
});

使用@monaco-editor/react库时，结合编辑器挂载回调：

import { Editor } from '@monaco-editor/react';

export default function MonacoTokenizerDemo() {
  const handleEditorMount = (editor, monaco) => {
    monaco.languages.typescript.typescriptDefaults.onDidCreateLanguageService(() => {
      const code = editor.getValue();
      const tokens = monaco.editor.tokenize(code, 'typescript');
      console.log('分词结果:', tokens);
    });
  };

  return (
    <Editor
      language="typescript"
      value="const num: number = 123;"
      onMount={handleEditorMount}
    />
  );
}