JSONA language plugin for the Monaco Editor. It provides the following features when editing JSONA files:
- Code completion, based on JSONA schemas or by looking at similar objects in the same file
- Hovers, based on JSON schemas
- Validation: Syntax errors and schema validation
- Formatting using Prettier
- Document Symbols
npm i monaco-jsona
yarn add monaco-jsona
Import monaco-jsona and configure it before an editor instance is created.
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import { jsonaDefaults } from 'monaco-jsona';
jsonaDefaults.setOptions({
schema: {
enabled: true,
associations: {},
storeUrl: "https://cdn.jsdelivr.net/npm/@jsona/schemastore@latest/index.json",
cache: false
},
formatter: {
indentString: " ",
trailingNewline: false,
trailingComma: false,
formatKey: false
}
});
monaco.editor.create(document.getElementById('container'), {
model: monaco.editor.createModel(
`{ @jsonaschema("schema")
value: { @pattern(".*")
}
}`,
'jsona',
monaco.Uri.parse("inmemory:https:///demo.jsona")
),
});
Also make sure to register the web worker. When using Webpack 5, this looks like the code below. Other bundlers may use a different syntax, but the idea is the same. Languages you don’t used can be omitted.
window.MonacoEnvironment = {
getWorker(moduleId, label) {
switch (label) {
case 'editorWorkerService':
return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url));
case 'css':
case 'less':
case 'scss':
return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url));
case 'handlebars':
case 'html':
case 'razor':
return new Worker(
new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url),
);
case 'json':
return new Worker(
new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url),
);
case 'javascript':
case 'typescript':
return new Worker(
new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url),
);
case 'yaml':
return new Worker(new URL('monaco-jsona/jsona.worker', import.meta.url));
default:
throw new Error(`Unknown label ${label}`);
}
},
};