mirror of https://github.com/danbulant/monaco-yaml synced 2026-05-26 05:11:59 +00:00

Npm 7 also supports workspaces, but doesn’t require the workspace root to be
private. This means the examples can be workspaces within the project, so the
entire project can be handled as one mono repository with a single lock file and
`node_modules` directory.

Also the readme has been updated with usage instructions.

2021-04-28 17:47:00 +02:00

2.4 KiB

Raw Blame History

Monaco YAML

YAML language plugin for the Monaco Editor. It provides the following features when editing YAML files:

Code completion, based on JSON schemas or by looking at similar objects in the same file
Hovers, based on JSON schemas
Validation: Syntax errors and schema validation
Formatting
Document Symbols
Syntax highlighting
Automatically load remote schema files (by enabling DiagnosticsOptions.enableSchemaRequest)

Schemas can also be provided by configuration. See here for the API that the JSON plugin offers to configure the JSON language support.

Installation

npm install monaco-yaml

Usage

Import monaco-yaml and configure it before an editor instance is created.

import { editor, languages, Uri } from 'monaco-editor';
import 'monaco-yaml';

// The uri is used for the schema file match.
const modelUri = Uri.parse('a://b/foo.yaml');

languages.yaml.yamlDefaults.setDiagnosticsOptions({
  enableSchemaRequest: true,
  hover: true,
  completion: true,
  validate: true,
  format: true,
  schemas: [
    {
      uri: 'http://myserver/foo-schema.json', // id of the first schema
      fileMatch: [modelUri.toString()], // associate with our model
      schema: {
        type: 'object',
        properties: {
          p1: {
            enum: ['v1', 'v2'],
          },
          p2: {
            $ref: 'http://myserver/bar-schema.json', // reference the second schema
          },
        },
      },
    },
    {
      uri: 'http://myserver/bar-schema.json', // id of the first schema
      schema: {
        type: 'object',
        properties: {
          q1: {
            enum: ['x1', 'x2'],
          },
        },
      },
    },
  ],
});

editor.create(document.createElement('editor'), {
  // monaco-yaml features should just work if the editor language is set to 'yaml'.
  language: 'yaml',
  model: editor.createModel('p1: \n', 'yaml', modelUri),
});

Also make sure to register the service worker. See the examples directory for full fledged examples.

Development

git clone https://github.com/pengx17/monaco-yaml
cd monaco-yaml
npm ci

A running example:

Credits

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

License

MIT

2.4 KiB Raw Blame History