monaco-volar

Try it!

Install

Monaco-volar has external dependency Onigasm (to highlight code).

``console
pnpm add monaco-volar monaco-editor-core onigasm

or

yarn add monaco-volar monaco-editor-core onigasm

`

Setup

$3

Import monaco-volar when you are using monaco. It will register vue as a language automatic.

`ts
import 'monaco-editor-core'
import 'monaco-volar'
`

$3

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

`ts
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.

`ts
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);
`

$3

$3

We need to let monaco know where and how to load out worker when using Vue.

`ts
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()

`

$3

Now we can just create a model using vue language.

`ts
const model = editor.createModel(code, 'vue', uri);
`