vite-plugin-monaco-editor

KO | EN

gitlite — search

#javascript #python #typescript #llm #go #machine-learning #rust #deep-learning #linux #docker #windows #awesome #cli #security

vite-plugin-monaco-editor

(★ 235)

A vite plugin for the Monaco Editor

파일 탐색기

최종 버전 다운로드 (.zip)

- settings.json
- updateCDN.js
- index.ts
- lnaguageWork.ts
- workerMiddleware.ts
- - App.vue
  - main.js
  - test.js
- - css.worker.bundle.js
  - editor.worker.bundle.js
  - graphql.worker.bundle.js
  - html.worker.bundle.js
  - json.worker.bundle.js
  - share.worker.bundle.js
  - ts.worker.bundle.js
- index.html
- tsconfig.json
- vite.config.js
.gitignore
.prettierrc.json
LICENSE
package.json
README.md
tsconfig.json
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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/vite-plugin-monaco-editor@1.0.5/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          |

vite-plugin-monaco-editor

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vite-plugin-monaco-editor

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README