Monaco JSON Schema 诊断联动

示例说明

配置编辑器的体验分水岭在于有没有 schema 感知：纯文本编辑用户只能靠事后校验报错排查，绑定 JSON Schema 后，非法键在下划线处即时标红，版本号正则不匹配立刻提示，补全列表只出现合法字段。fileMatch 把特定文件名路由到对应 schema，一个编辑器实例可承载多种配置文件。

技术要点

• fileMatch 按文件名路由 schema
• additionalProperties 让未知键报错
• 诊断标记可通过 API 编程读取

代码解读

setDiagnosticsOptions 注册 schema 列表并开启校验；createModel 用带文件名的 URI 建立模型，使其命中 fileMatch 规则。示例内容里 version 不符合语义化版本正则，getModelMarkers 能读到生成的标记数组；description 字段会出现在悬停卡片中。

使用建议

生产环境用 monaco 的按需打包减小体积。动态 schema 可在用户切换项目时重设配置。编辑器值与后端校验要双保险，前端诊断只是体验层。

代码示例

import * as monaco from 'monaco-editor';

const schema = {
  type: 'object',
  required: ['name', 'version'],
  additionalProperties: false,
  properties: {
    name: { type: 'string', description: 'Package display name' },
    version: { type: 'string', pattern: '^\\d+\\.\\d+\\.\\d+$' },
    private: { type: 'boolean', default: false },
  },
};

monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
  validate: true,
  allowComments: false,
  schemas: [
    {
      uri: 'https://example.com/schemas/package.schema.json',
      fileMatch: ['package.config.json'],
      schema,
    },
  ],
});

const model = monaco.editor.createModel(
  JSON.stringify({ name: 'demo', version: 'not-semver' }, null, 2),
  'json',
  monaco.Uri.parse('inmemory://model/package.config.json'),
);

monaco.editor.create(document.getElementById('editor')!, {
  model,
  automaticLayout: true,
  minimap: { enabled: false },
});

const markers = monaco.editor.getModelMarkers({ resource: model.uri });
console.log('marker count:', markers.length);