如何创建独立的Monaco Editor实例？解决同站实例冲突

核心原因确实是默认情况下多个TS编辑器实例会共享全局语言服务的符号表，导致不同实例中的同名标识符被判定为重复定义。最简便的解决方式是通过模型URI隔离和独立配置语言服务上下文来实现实例间的完全隔离：

1. 为每个编辑器分配唯一的模型URI #

Monaco会根据模型的URI来区分不同的文件，默认的内存URI可能重复，手动指定唯一URI即可让语言服务将它们视为独立文件：

// 创建第一个编辑器的专属模型
const model1 = monaco.editor.createModel(
  'function foo() { console.log("编辑器1"); }',
  'typescript',
  monaco.Uri.parse('inmemory://editor-1/script.ts')
);

// 创建第二个编辑器的专属模型
const model2 = monaco.editor.createModel(
  'function foo() { console.log("编辑器2"); }',
  'typescript',
  monaco.Uri.parse('inmemory://editor-2/script.ts')
);

// 将模型绑定到对应的编辑器实例
const editor1 = monaco.editor.create(document.getElementById('editor1'), {
  model: model1
});

const editor2 = monaco.editor.create(document.getElementById('editor2'), {
  model: model2
});

2. （可选）为每个模型配置独立的TS编译选项 #

如果需要更细致的隔离（比如不同的编译目标、模块类型），可以为每个模型单独设置编译选项：

// 为模型1设置专属编译配置
monaco.languages.typescript.typescriptDefaults.setModelOptions(model1, {
  compilerOptions: {
    target: monaco.languages.typescript.ScriptTarget.ES2020,
    module: monaco.languages.typescript.ModuleKind.ESNext
  }
});

// 为模型2设置不同的编译配置
monaco.languages.typescript.typescriptDefaults.setModelOptions(model2, {
  compilerOptions: {
    target: monaco.languages.typescript.ScriptTarget.ES5,
    module: monaco.languages.typescript.ModuleKind.CommonJS
  }
});

关键说明 #

• 仅通过唯一URI就能解决绝大多数重复定义的问题，因为Monaco的TS语言服务会基于URI维护独立的符号表。
• 如果需要引入外部类型声明，也可以通过setModelOptions为每个模型单独配置extraLibs，避免全局共享的类型干扰。

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