Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsona/monaco-jsona
Jsona plugin for monaco editor
https://github.com/jsona/monaco-jsona
Last synced: about 2 months ago
JSON representation
Jsona plugin for monaco editor
- Host: GitHub
- URL: https://github.com/jsona/monaco-jsona
- Owner: jsona
- Created: 2023-11-23T15:18:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-23T15:19:19.000Z (about 1 year ago)
- Last Synced: 2024-04-19T19:02:34.603Z (9 months ago)
- Language: TypeScript
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# monaco-jsona
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
## Install
```
npm i monaco-jsona
yarn add monaco-jsona
```
## Usage
Import monaco-jsona and configure it before an editor instance is created.
```js
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:///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.
```js
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}`);
}
},
};
```