Contributing / Dev Setup

Source Code Structure

It is important to understand that the Monaco Editor Core is built directly from the VS Code source code. The Monaco Editor then enhances the Monaco Editor Core with some basic language features.

This diagram describes the relationships between the repositories and the npm packages:

By default, monaco-editor-core is installed from npm (through the initial npm install), so you can work on Monaco Editor language features without having to build the core editor / VS Code. The nightly builds build a fresh version of monaco-editor-core from the main branch of VS Code. For a stable release, the commit specified in vscodeRef in package.json specifies the commit of VS Code that is used to build monaco-editor-core.

Contributing a new tokenizer / a new language

Please understand that we only bundle languages with the monaco editor that have a significant relevance (for example, those that have an article in Wikipedia).

create $/src/basic-languages/{myLang}/{myLang}.contribution.ts
create $/src/basic-languages/{myLang}/{myLang}.ts
create $/src/basic-languages/{myLang}/{myLang}.test.ts
edit $/src/basic-languages/monaco.contribution.ts and register your new language
create $/website/index/samples/sample.{myLang}.txt

import './{myLang}/{myLang}.contribution';

Debugging / Developing The Core Editor

To debug core editor issues.

This can be done directly from the VS Code repository and does not involve the monaco editor repository.

Clone the VS Code repository: git clone https://github.com/microsoft/vscode
Open the repository in VS Code: code vscode
Run yarn install
Select and run the launch configuration "Monaco Editor Playground" (this might take a while, as it compiles the sources):
Now you can set breakpoints and change the source code

Optionally, you can build monaco-editor-core and link it to the monaco editor repository:

# builds out-monaco-editor-core
> yarn gulp editor-distro

> cd out-monaco-editor-core
> npm link
> cd ../path/to/monaco-editor

# symlinks the monaco-editor-core package to the out-monaco-editor-core folder we just built
> npm link monaco-editor-core

Debugging / Developing Language Support

To debug bundled languages, such as JSON, HTML or TypeScript/JavaScript.

Clone the monaco editor repository: git clone https://github.com/microsoft/monaco-editor
Open the repository in VS Code: code monaco-editor
Run npm install
Select and run the launch configuration "Monaco Editor Playground" (this might take a while, as it compiles the sources):
Now you can set breakpoints and change the source code

Optionally, you can build monaco-editor and link it if you want to test your changes in a real application:

# builds out/monaco-editor
> npm run build-monaco-editor

> cd out/monaco-editor
> npm link

> cd ../path/to/my-app
> npm link monaco-editor

Running the editor tests

> npm run build-monaco-editor
> npm run test
> npm run compile --prefix webpack-plugin

> npm run package-for-smoketest-webpack
> npm run package-for-smoketest-esbuild
> npm run package-for-smoketest-vite
> npm run package-for-smoketest-parcel --prefix test/smoke/parcel
> npm run smoketest-debug

Running the website locally

> npm install
> npm run build-monaco-editor

> cd website
> yarn install
> yarn typedoc
> yarn dev

Now webpack logs the path to the website.

Out Folders

This diagram describes the output folders of the build process:

Maintaining

Checkout MAINTAINING.md for common maintaining tasks (for maintainers only).

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!