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
• 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.

Installing

yarn add monaco-yaml See test/index.html as an example. Currently only load with vs loader is supported. (AMD) Load with ESM is added, but not yet tested.

Development

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

A running example:

Credits

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

Maintain

Manually clone dependencies list below and update the project files accordingly:

• src/languageservice: https://github.com/redhat-developer/yaml-language-server
  • cp yaml-language-server/src/languageservice monaco-yaml/src/languageservice
  • Modify the import paths, go to the test page and see if it still works
• src/yaml-ast-parser: https://github.com/mulesoft-labs/yaml-ast-parser/tree/master/src

License

MIT