中文
devexamples

Monaco JSON Schema Diagnostics

Attach a JSON schema to a Monaco editor model so invalid config keys are flagged inline, with hover docs and completion driven by the schema.

TypescriptData Integrity

Code

snippet
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);

Related Examples