monaco-yaml

What is monaco-yaml?

The monaco-yaml package is an extension for the Monaco Editor that provides YAML language support. It includes features such as syntax highlighting, validation, and autocompletion for YAML files.

What are monaco-yaml's main functionalities?

Syntax Highlighting

This feature allows the Monaco Editor to highlight YAML syntax, making it easier to read and write YAML files.

const monaco = require('monaco-editor');
require('monaco-yaml');

monaco.editor.create(document.getElementById('container'), {
  value: 'key: value',
  language: 'yaml'
});

Validation

This feature provides validation for YAML files based on JSON schemas, helping to ensure that the YAML content adheres to the expected structure.

const monaco = require('monaco-editor');
const monacoYaml = require('monaco-yaml');

monacoYaml.setDiagnosticsOptions({
  validate: true,
  schemas: [
    {
      uri: 'http://myserver/foo-schema.json',
      fileMatch: ['*'],
      schema: {
        type: 'object',
        properties: {
          key: {
            type: 'string'
          }
        },
        required: ['key']
      }
    }
  ]
});

monaco.editor.create(document.getElementById('container'), {
  value: 'key: value',
  language: 'yaml'
});

Autocompletion

This feature provides autocompletion for YAML files based on JSON schemas, making it easier to write valid YAML content.

const monaco = require('monaco-editor');
const monacoYaml = require('monaco-yaml');

monacoYaml.setDiagnosticsOptions({
  validate: true,
  schemas: [
    {
      uri: 'http://myserver/foo-schema.json',
      fileMatch: ['*'],
      schema: {
        type: 'object',
        properties: {
          key: {
            type: 'string'
          }
        },
        required: ['key']
      }
    }
  ]
});

monaco.editor.create(document.getElementById('container'), {
  value: 'key: ',
  language: 'yaml'
});

Other packages similar to monaco-yaml

yaml-language-server

The yaml-language-server package provides YAML language support for editors that support the Language Server Protocol (LSP). It offers similar features to monaco-yaml, such as syntax highlighting, validation, and autocompletion, but it is designed to work with a wider range of editors through the LSP.

vscode-yaml

The vscode-yaml package is an extension for Visual Studio Code that provides YAML language support. It includes features like syntax highlighting, validation, and autocompletion, similar to monaco-yaml, but it is specifically designed for use with Visual Studio Code.

README

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

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

Installing

TODO: Document exact distribution method

Development

• git clone https://github.com/kpdecker/monaco-yaml
• cd monaco-yaml
• npm install .
• npm run watch
• open $/monaco-yaml/test/index.html in your favorite browser.

License

MIT