多个Monaco Editor实例共享Schema导致错误验证问题

使用@monaco-editor/react组件时遇到如下问题：页面中有两个独立的JSON编辑器实例，其中一个配置了Schema验证规则，但另一个不需要验证的实例也被强制应用了相同的验证规则。

已创建演示项目复现该问题。

相关代码片段 #

// 配置Schema验证的代码
useEffect(() => {
  if (schema) {
    const editorSchema = createEditorSchema(schema);
    monaco?.languages?.json?.jsonDefaults?.setDiagnosticsOptions({
      validate: true,
      schemas: [editorSchema],
    });
  }
}, [schema]);

复现步骤 #

• 查看编辑器1，悬停内容可看到Schema错误提示
• 查看编辑器2，发现它也被应用了编辑器1的Schema规则，对自身内容进行验证

预期行为 #

仅编辑器1需要进行Schema验证，编辑器2仅展示内容，不执行任何验证逻辑。

环境信息 #

• 操作系统：macOS
• 浏览器：任意浏览器

额外背景 #

需求为渲染两个编辑器实例：编辑器1存储JSON数据，编辑器2存储编辑器1对应的JSON Schema内容。

解决方案 #

问题根源在于monaco.languages.json.jsonDefaults.setDiagnosticsOptions是全局配置，会作用于所有JSON编辑器实例，导致验证规则被共享。要实现实例级别的验证隔离，需通过模型URI匹配的方式精准绑定Schema：

1. 给需要验证的编辑器模型分配唯一URI
2. 让Schema仅匹配该URI对应的模型

修改后的代码示例

1. 配置Schema时指定匹配URI

// SchemaField.tsx 中的 useEffect 代码修改
useEffect(() => {
  if (schema && monaco) {
    // 定义唯一的文件URI，用于关联编辑器1的模型
    const dataFileUri = monaco.Uri.parse('file:///editor-data.json');
    const editorSchema = {
      ...createEditorSchema(schema),
      fileMatch: [dataFileUri.toString()] // 仅匹配该URI的模型
    };
    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
      validate: true,
      schemas: [editorSchema],
    });
  }
}, [schema, monaco]);

2. 给编辑器1绑定指定URI

// EditorField.tsx 中初始化编辑器时设置模型URI
<MonacoEditor
  language="json"
  value={value}
  onChange={onChange}
  editorDidMount={(editor, monaco) => {
    const dataFileUri = monaco.Uri.parse('file:///editor-data.json');
    // 将当前编辑器的模型URI设置为指定值，匹配Schema的fileMatch规则
    editor.getModel()?.setUri(dataFileUri);
  }}
/>

3. 编辑器2保持默认配置（无需额外验证）

编辑器2不做任何Schema相关配置，其模型使用默认URI，不会匹配到编辑器1的Schema，自然不会触发验证。

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