Monaco Language Client
Module to connect Monaco editor with language servers.
CHANGELOG
All changes are noted in the CHANGELOG.
Official documentation, quick start and examples
This is npm package is part of the monaco-languageclient mono repo.
You find detailed information in the official documentation.
If interested, check quick start for local development.
A detailed list of examples is contained in the GitHub repository, please see this listing.
Version 10: A toolbox for language client applications
Since Version 2 this library relied on @codingame/monaco-vscode-api to supply the VSCode API (see Important Project Changes). monaco-vscode-api has evolved substantially since then and thesedays provides 100+ packages with additional services, default extensions and language packs allowing you to create VSCode Web compatible applications.
Since monaco-langaugeclient version 10 all building blocks for complete web applications are contained in this package. The biggest deviation from the previous major versions is that the handling of monaco-vscode-api, the handling of language clients and the single editor app functionality are now very clearly separated. Instead of supplying an independent npm module (monaco-editor-wrapper), almost all useful pieces of code were moved here and the different functionalities are exposed via domain specific sub-exports:
- vscodeApiWrapper: Contains MonacoVscodeApiWrapper used to handle everything regarding monaco-vscode-api
- lcwrapper: LanguageClientWrapper & LanguageClientsManager help to control one or multiple language clients
- editorApp: EditorApp is used to control a single monaco-editor
Usage
The monaco-vscode-api initialization and start-up can only and must been only done once within an applications' lifecycle. Everything else cab be repeated. If you use TypeScript all configuration is fully typed.
import * as vscode from 'vscode';
// Import Monaco Language Client components
import { EditorApp, type EditorAppConfig } from 'monaco-languageclient/editorApp';
import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
import { LanguageClientWrapper, type LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
async function createEditorAndLanguageClient() {
const languageId = 'mylang';
const code = '// initial editor content';
const codeUri = '/workspace/hello.mylang';
// Monaco VSCode API configuration
const vscodeApiConfig: MonacoVscodeApiConfig = {
$type: 'extended',
viewsConfig: {
$type: 'EditorService'
},
userConfiguration: {
json: JSON.stringify({
'workbench.colorTheme': 'Default Dark Modern',
'editor.wordBasedSuggestions': 'off'
})
},
monacoWorkerFactory: configureDefaultWorkerFactory
};
// Language client configuration
const languageClientConfig: LanguageClientConfig = {
languageId: languageId,
connection: {
options: {
$type: 'WebSocketUrl',
// at this url the language server for myLang must be reachable
url: 'ws://localhost:30000/myLangLS'
}
},
clientOptions: {
documentSelector: [languageId],
orkspaceFolder: {
index: 0,
name: 'workspace',
uri: vscode.Uri.file('/workspace')
}
}
};
// editor app / monaco-editor configuration
const editorAppConfig: EditorAppConfig = {
codeResources: {
main: {
text: code,
uri: codeUri
}
}
};
// Create the monaco-vscode api Wrapper and start it before anything else
const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
await apiWrapper.start();
// Create language client wrapper
const lcWrapper = new LanguageClientWrapper(languageClientConfig);
await lcWrapper.start();
// Create and start the editor app
const editorApp = new EditorApp(editorAppConfig);
const htmlContainer = document.getElementById('monaco-editor-root')!;
await editorApp.start(htmlContainer);
}
createEditorAndLanguageClient().catch(console.error);