CodinGame / monaco-vscode-api

@codingame/monaco-vscode-api This NPM module allows to integrate full VSCode functionality into your . For more information, please checkout the project's wiki. Installation is installed as an alias to to be able to run , similar to what is done inside a VSCode extension is installed as an alias to because it provides the same api as the official Usage If you are just starting with and you may find helpful the Getting Started Guide in the wiki. Monaco service override Most of VSCode functionality implemented as "services", e.g. • theme service, providing support for VSCode themes • languages service, providing support for different language features. By default, Monaco uses a simplified versions of the VSCode services, called services. This package allows to • override them with fully-functional alternatives from VSCode • add new services that were not included in Monaco Here is an example usage that overrides Monaco default configuration with VSCode json-based settings: > [!NOTE] > can only be called once (and it should be called BEFORE creating your first editor). Each contains the service and some glue to make VSCode service work with Monaco. List of service overrides Some basic service overrides are coming with this package as dependencies: • **Base**: • Contains some general-use services that are mandatory to most of the other features • **Host**: • Interaction with the host/browser (shutdown veto, focus/active management, window opening, fullscreen...) • **Extensions**: • Support for VSCode extensions. • A worker configuration can be provided to it: • Then, the webworker extension host will be available, allowing to run extensions in a worker which runs in an iframe • **Files**: • It adds the overlay filesystem for files, but also adds the support for lazy loaded extension files. It adds separate memory user files (e.g. config, keybindings), cache files and log files • It supports adding overlay filesystems for files • **QuickAccess**: • Enables the quickaccess menu in the editor (press F1 or ctrl+shift+p) • **Search**: • Provides workspace search functionality for both Command Palette file search (Ctrl+P) and Search panel (Ctrl+Shift+F) • Enables searching through files and text content within your workspace However, most of the services are separated into different modules, so they can be imported as required. You can find a full list of services in the corresponding wiki page. Default vscode extensions VSCode uses a bunch of default extensions. Most of them are used to load the default languages and grammars (see ). This library bundles and publishes them as separate packages, which allows to use the ones you want. To use an extension, just install the corresponding package and import it in the beginning of the file: Here is an example of usage of default VSCode theme extension with theme service override: See the full list of ported default extensions Loading vsix file VSCode extensions are bundled as vsix files. This library publishes a rollup plugin (vite-compatible) that allows to load a vsix file. • rollup/vite config: • code: Localization This library also offers the possibility to localize vscode and the extensions in the supported languages. To do so, import one of the following packages before anything else: • • • • • • • • • • • • • • ⚠️ The language pack should be imported and loaded BEFORE anything else from this library is loaded. Otherwise, some translations would be missing and an error would be displayed in the console. ⚠️ Model creation The official package provides a function to create models: . This method creates a standalone model that cannot be found or used by any VSCode services. The recommended way is to used the method instead (added on top of the official monaco-editor api) which returns instead a reference to a model. It has some pros: • The model reference can be used by VSCode services, allowing for instance following links between files (ctrl+click) • The returned model is bound to a filesystem file, and you have access to methods allowing to control the file lifecycle (saving the file, accessing the dirty state...) • It is possible to call the method multiple times on the same file to get multiple references. The model is disposed when there is no reference left To work, it needs the file to exist on the virtual filesystem. It can be achieved either by: • using the from the files service override, which can be cleaned when not needed anymore (recommended) • by using the second argument of the function, which writes the file content to the virtual filesystem before creating the model before: after: return a reference to a model. The value is fetched from the memory filesystem. The reference can then be disposed, the model will only be disposed if there is no remaining references. VSCode api usage To be able to use the VSCode api directly from your code, you need to import and wait for the services to be initialized. You will then be able to import it as if you were in a VSCode extension: You can also register a new extension from its manifest: Demo Try it out on There is a demo that showcases the service-override features. It includes: • Languages • VSCode themes • Textmate grammars (requires VSCode themes) • Notifications/Dialogs • Model/Editor services • Configuration service, with user configuration editor • Keybinding service, with user keybindings editor • Debuggers • Remote agent • and much more From CLI run: For the debug feature, also run: ⚠️ Building monaco-vscode-api is only supported on Linux or Mac. It you use Windows, have a look at WSL ⚠️ Remote agent See the VSCode Server wiki page. Shadow dom (⚠️ beta ⚠️) The library supports shadow-dom. ⚠️ VSCode itself doesn't support shadow dom, and there are multiple parts that needed to be patched in order for it to work. There are multiple benefits of using it: • Your custom global style won't impact the VSCode workbench style (for instance…