monaco-volar
Install
Monaco-volar has external dependency Onigasm (to highlight code).
pnpm add monaco-volar monaco-editor-core onigasm
# or
yarn add monaco-volar monaco-editor-core onigasm
Setup
Import
Import monaco-volar when you are using monaco. It will register vue as a language automatic.
import 'monaco-editor-core'
import 'monaco-volar'Setup highlight
Init Onigasm
VSCode are using Onigasm to highlight codes. And we have adapted the Onigasm and monaco. And some pre-defined grammars.
Onigasm needs a wasm module before using. We have to load it first.
import * as onigasm from "onigasm";
import onigasmWasm from "onigasm/lib/onigasm.wasm?url";
function loadOnigasm() {
return onigasm.loadWASM(onigasmWasm);
}
loadOnigasm()Apply grammars
Now we can apply grammars into monaco editor instance.
import { editor } from "monaco-editor-core";
import { loadGrammars, loadTheme } from "monaco-volar";
const theme = loadTheme()
const editorInstance = editor.create(element, {
theme,
/* other options*/
})
loadGrammars(editorInstance);Setup language service
Provide web worker
We need to let monaco know where and how to load out worker when using Vue.
import editorWorker from "monaco-editor-core/esm/vs/editor/editor.worker?worker";
import vueWorker from "monaco-volar/vue.worker?worker";
function loadMonacoEnv() {
(self as any).MonacoEnvironment = {
async getWorker(_: any, label: string) {
if (label === "vue") {
return new vueWorker();
}
return new editorWorker();
},
};
}
loadMonacoEnv()Create vue model
Now we can just create a model using vue language.
const model = editor.createModel(code, 'vue', uri);