Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vdesjs/vite-plugin-monaco-editor
A vite plugin for the Monaco Editor
https://github.com/vdesjs/vite-plugin-monaco-editor
Last synced: 3 days ago
JSON representation
A vite plugin for the Monaco Editor
- Host: GitHub
- URL: https://github.com/vdesjs/vite-plugin-monaco-editor
- Owner: vdesjs
- License: mit
- Created: 2021-08-09T12:38:53.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-03-22T14:55:35.000Z (8 months ago)
- Last Synced: 2024-05-18T07:02:45.437Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 3.5 MB
- Stars: 193
- Watchers: 4
- Forks: 34
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vite Plugin Monaco Editor
A plugin to simplify loading the [Monaco Editor](https://github.com/Microsoft/monaco-editor) with [vite](https://vitejs.dev/).
- It uses Vite specific plugin hooks: configResolved, configureServer, transformIndexHtml.
- It uses esbuild to bundle worker in the `node_modules/.monaco` directory, via the `server.middlewares` proxy http server for the bundle worker.
## Installing
```ts
// 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`:
```ts
import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';
export default defineConfig({
plugins: [monacoEditorPlugin()],
});
```
### Import all monaco functions
- `index.ts`:
```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`
```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](test/src/mona/customMonaco.ts)
- `index.ts`
```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"}]`, The `entry` 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.g `https://unpkg.com/[email protected]/cdn`
- default value: `monacoeditorwork`
- `globalAPI` (`boolean`) - specifies whether the editor API should be exposed through a global `monaco` object or not. This option is applicable to `0.22.0` and newer version of `monaco-editor`. Since `0.22.0`, the ESM version of the monaco editor does no longer define a global `monaco` object unless `global.MonacoEnvironment = { globalAPI: true }` is set ([change log](https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md#0220-29012021)).
- default value: `false`.
- `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`
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 |