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 npm package is part of the monaco-languageclient monorepo.

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.

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 these days provides 100+ packages with additional services, default extensions and language packs allowing you to create VSCode Web compatible applications.

Since monaco-languageclient version 10, all building blocks for complete web applications have been 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 and must be done only once within an application's lifecycle. Everything else can 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: {
        family: 'WebSocket'
        realization: () => new LcWebSocket(),
        // at this url the language server for myLang must be reachable
        url: 'ws://localhost:30000/myLangLS'
      }
    },
    clientOptions: {
      documentSelector: [languageId],
      workspaceFolder: {
        index: 0,
        name: 'workspace',
        uri: vscode.Uri.file('/workspace')
      }
    }
  };

  // editor app / monaco-editor configuration
  const editorAppConfig: EditorAppConfig = {
    codeResources: {
      modified: {
        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);

License

MIT