I want to enable JSON schema linting and intellisense for the yaml editor. Here's the prompt I got back from chatgpt:

Add JSON schema linting

User: AJ Steers (aaronsteers@gmail.com)
Created: 8/13/2025 23:19
Updated: 8/13/2025 23:21
Exported: 8/13/2025 23:22
Link: https://chatgpt.com/c/689d7fbc-69bc-832b-9e3b-a5d905af190a

Prompt:

How to add json schema linting to yaml editor in monaco

Response:

Thought for 1m 36s

To add JSON Schema linting to a Monaco YAML editor, use the monaco-yaml library, which integrates yaml-language-server. Configure the diagnosticsOptions with the schemas list, including the URI, fileMatch, schema, or schemaValidation. Here’s a TypeScript example using setDiagnosticsOptions for proper linting integration. This should work well!

To fetch remote schemas, you can use $schema: in the YAML. For Monaco, the monaco-yaml package supports this, but the typical setup for schemaStore is more common in VSCode extensions. In Monaco, use yamlDefaults.setDiagnosticsOptions for configuring validation and schema options, like enableSchemaRequest. Let's confirm the exact setup!

To integrate Monaco with YAML, create a worker file for YAML using monaco-yaml and configure it in your bundler with a worker loader. TypeScript types can also be specified. The diagnostics options, including schema validation and autocompletion, can be configured with setDiagnosticsOptions. For YAML, $schema isn't standard but can be supported through a comment directive.

In Monaco, you can declare the schema in a YAML file using a leading comment like # yaml-language-server: $schema=https://example/schema.json. Monaco respects this if enableSchemaRequest is true. Schema associations can be registered per file path with the fileMatch option, specifying specific globs (e.g., /my/abc.yaml). You may need to handle CORS or proxying if schemas are hosted remotely.

Searching for Monaco YAML schema linting setup

[

github.com

](https://github.com/remcohaszing/monaco-yaml)

[

stackoverflow.com

](https://stackoverflow.com/questions/67893397/validating-yaml-file-by-json-scheme-in-monaco-editor-gives-incorrect-error)

[

yaml-monaco-jsonschema.vercel.app

](https://yaml-monaco-jsonschema.vercel.app/)

10 more

We have the necessary resources: the Monaco-yaml GitHub readme, yaml-language-server readme, and the examples. I'll make sure to cite key statements: monaco-yaml enables schema-based validation, and options like setDiagnosticsOptions and enableSchemaRequest are used to load remote schemas. I still need to confirm the source for the pragma directive # yaml-language-server: $schema=.... Let me check.

Searching for pragma directive sources in YAML schema

[

github.com

](https://github.com/redhat-developer/yaml-language-server)

[

developers.redhat.com

](https://developers.redhat.com/blog/2020/11/25/how-to-configure-yaml-schema-to-make-editing-files-easier)

[

classic.yarnpkg.com

](https://classic.yarnpkg.com/en/package/yaml-language-server)

7 more

We've found plenty of relevant sources, but I still need to confirm the specific source for the directive comment # yaml-language-server: $schema=.... It might be in the VS Code extension documentation. I'll try searching that specifically to make sure I've got the right reference.

Searching for "yaml-language-server" comment directive documentation

[

github.com

](https://github.com/redhat-developer/yaml-language-server)

[

stackoverflow.com

](https://stackoverflow.com/questions/71765669/dont-use-json-schema-when-editing-yaml-file-in-visual-studio-code)

[

classic.yarnpkg.com

](https://classic.yarnpkg.com/en/package/yaml-language-server)

10 more

I’ll lay out the response step-by-step. First, I’ll cite Monaco-YAML features from its GitHub README. For the comment directive, I can refer to a Stack Overflow answer linking it to SchemaStore. I'll also mention yaml-language-server supporting JSON Schema 7.

The steps to get started would be:

1. Install

Done

Here’s the clean way to get JSON Schema–based linting/intellisense working for YAML in Monaco.

The short version

• Use the monaco-yaml language plugin (it embeds yaml-language-server). GitHub
• Configure it with your schema URL(s) and enable schema fetching. GitHub
• (Optional) Let files self-declare their schema with the # yaml-language-server: $schema=… comment. Stack OverflowUNPKG
• It supports JSON Schema draft-07 and earlier. Yarn

Install

npm i monaco-editor monaco-yaml

GitHub

Wire up the YAML web worker

You must register Monaco workers, including the YAML worker from monaco-yaml. Example (works with webpack and similar bundlers):

// before creating the editor:
;(window as any).MonacoEnvironment = {
  getWorker(_id: string, label: string) {
    switch (label) {
      case 'editorWorkerService':
        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url))
      case 'yaml':
        return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url))
      // add other languages if you use them...
      default:
        throw new Error(`Unknown label ${label}`)
    }
  }
}

If you use Vite, the repo shows a small wrapper workaround that imports monaco-yaml/yaml.worker.js and returns that from getWorker. GitHub

Configure linting against your JSON Schema

import * as monaco from 'monaco-editor'
import { configureMonacoYaml } from 'monaco-yaml'

// 1) Configure monaco-yaml once (glob/file-based schema association)
const yamlLang = configureMonacoYaml(monaco, {
  enableSchemaRequest: true,         // allow fetching schemas by URL
  validate: true,
  hover: true,
  completion: true,
  // Map schemas to files (globs or specific model URIs)
  schemas: [
    {
      // If you published to schemastore.org, point directly at that URL:
      uri: 'https://json.schemastore.org/your-schema.json',
      // Match however you identify these files. For in-memory models,
      // use the model's exact URI string (see below).
      fileMatch: ['**/*.your-yaml', 'inmemory://model.yaml'],
    },
  ],
})

// 2) Create your YAML model/editor
const model = monaco.editor.createModel(
  'name: Example\n',
  'yaml',
  monaco.Uri.parse('inmemory://model.yaml'),
)

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

GitHub

Declare the schema from inside the YAML (optional)

You can also let a file point at its own schema with a top-of-file comment:

# yaml-language-server: $schema=https://json.schemastore.org/your-schema.json

This directive is understood by yaml-language-server (what monaco-yaml uses under the hood), so linting/completions/hover will follow that schema automatically when enableSchemaRequest is on. Stack Overflow

Gotchas & tips

• Only one configuration at a time. monaco-yaml exposes a single configured instance; call configureMonacoYaml once and update its options if needed. GitHub
• Match the right files. fileMatch must match the model’s URI string (e.g., inmemory://model.yaml) or a path glob you actually use. GitHub
• CORS for remote schemas. If your schema is behind your own domain, ensure it serves Access-Control-Allow-Origin so the worker can fetch it.
• Schema level. The YAML server supports JSON Schema draft-07 and below. If you write newer keywords, they won’t be recognized. Yarn
• Custom YAML tags. If you use tags like !include, pass them via customTags: ['!include scalar'] to the configuration. GitHub

That’s it—once the worker and config are in place, Monaco will live-lint YAML content against your JSON Schema and provide completions/hover docs from the schema. GitHub

Powered by ChatGPT Exporter