mirror of
https://github.com/danbulant/monaco-yaml
synced 2026-05-26 13:21:53 +00:00
100 lines
2.4 KiB
Markdown
100 lines
2.4 KiB
Markdown
# 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](https://github.com/Microsoft/monaco-json/blob/master/src/monaco.d.ts) for the API that the
|
|
JSON plugin offers to configure the JSON language support.
|
|
|
|
## Installation
|
|
|
|
```sh
|
|
npm install monaco-yaml
|
|
```
|
|
|
|
## Usage
|
|
|
|
Import `monaco-yaml` and configure it before an editor instance is created.
|
|
|
|
```ts
|
|
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: [
|
|
{
|
|
// Id of the first schema
|
|
uri: 'http://myserver/foo-schema.json',
|
|
// Associate with our model
|
|
fileMatch: [String(modelUri)],
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
p1: {
|
|
enum: ['v1', 'v2'],
|
|
},
|
|
p2: {
|
|
// Reference the second schema
|
|
$ref: 'http://myserver/bar-schema.json',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
// Id of the first schema
|
|
uri: 'http://myserver/bar-schema.json',
|
|
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](https://github.com/pengx17/monaco-yaml/tree/master/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](https://github.com/pengx17/monaco-yaml/blob/master/LICENSE.md)
|