Vite Plugin Monaco Editor
A plugin to simplify loading the Monaco Editor with vite.
- It uses Vite specific plugin hooks: configResolved, configureServer, transformIndexHtml.
- It uses esbuild to bundle worker in the
node_modules/.monaco
directory, via theserver.middlewares
proxy http server for the bundle worker.
Installing
// make sure you have it installed monaco-editor.
yarn add vite-plugin-monaco-editor -D
// or
npm install --save-dev vite-plugin-monaco-editor
Using
-
vite.config.ts
:
import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';
export default defineConfig({
plugins: [monacoEditorPlugin()],
});
Import all monaco functions
-
index.ts
:
import * as monaco from 'monaco-editor';
monaco.editor.create(document.getElementById('container'), {
value: 'console.log("Hello, world")',
language: 'javascript',
});
Import part of monaco functions
The import * as monaco from 'monaco-editor'
is import all features and languages of the Monaco Editor. Assume you only need part of the features and languages:
customMonaco.ts
import 'monaco-editor/esm/vs/editor/editor.all.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
export { monaco };
The Complete list of imports: customMonaco.ts
index.ts
import { monaco } from './customMonaco.ts';
monaco.editor.create(document.getElementById('container'), {
value: 'console.log("Hello, world")',
language: 'javascript',
});
Options
-
languageWorkers
(string[]
) - include only a subset of the languageWorkers supported.- default value: ['editorWorkerService', 'css', 'html', 'json', 'typescript'].
- Assuming only use css worker(editorWorkerService is must include base worker), you can set ['editorWorkerService', 'css']
-
customWorkers
(IWorkerDefinition[]
) - include your custom worker.- default value: []
- example value:
[{label: "graphql", entry: "monaco-graphql/esm/graphql.worker"}]
, Theentry
is relative path in the node_modules Or you can set absolute path.
-
publicPath
(string
) - custom public path for worker scripts, overrides the public path from which files generated by this plugin will be served. Or you can set CDN e.ghttps://unpkg.com/vite-plugin-monaco-editor@1.0.5/cdn
- default value:
monacoeditorwork
- default value:
-
globalAPI
(boolean
) - specifies whether the editor API should be exposed through a globalmonaco
object or not. This option is applicable to0.22.0
and newer version ofmonaco-editor
. Since0.22.0
, the ESM version of the monaco editor does no longer define a globalmonaco
object unlessglobal.MonacoEnvironment = { globalAPI: true }
is set (change log).- default value:
false
.
- default value:
-
customDistPath
((root: string, buildOutDir: string, base: string) => string
) - Custom callback returns the worker path -
forceBuildCDN
(boolean
) - If you use CDN, the build is skipped by default. Set to true if you want to generate woker- default value:
false
- default value:
Some languages share the same web worker. If one of the following languages is included, you must also include the language responsible for instantiating their shared worker:
Language | Instantiator |
---|---|
javascript | typescript |
handlebars | html |
scss, less | css |