Monaco Language Client & VSCode WebSocket Json RPC

Repository for NPM module to connect Monaco editor with language servers and NPM module which implements communication between a jsonrpc client and server over WebSocket.

Click here for a detail explanation how to connect the Monaco editor to your language server.

• Introduction
  • Project Modernization
• Getting started
  • Development environments
  • Scripts Overview
• Examples
  • Node.js Language Server + web client example
  • Browser-LSP
  • Browser
  • VSCode integration
• History
• License

Introduction & Project History

May 2022

From release 1.0.0 onward the project switched to npm workspaces. We no longer require yarn, lerna and webpack. Mostly therefore the list of devDependencies is substantially shorter. All code has been moved to ./packages directory.

As before the library code is just compiled with the TypeScript compiler and the library is now packaged with npm. The need for bundling does no longer exist for the example. The compiled code is either executed by node or the web/client related code/pages are served with vite.js. We added a second build option for the web client example using webpack.

The default and protected branch is now main.

June 2022

monaco-vscode-api was created by CGNonofr and this library is now based on it and the old implementation was removed.

We added the independent vscode-ws-jsonrpc as sub-package into this repository.

Getting started

Development environments

On your local machine you can prepare your dev environment as follows. From CLI in root of the project run:

git clone https://github.com/TypeFox/monaco-languageclient.git
cd monaco-languageclient
npm i
# Cleans-up and compiles everything
npm run build

Or you use a fresh dev environment in Gitpod which is a one-click online IDE for GitHub.

Scripts Overview

The main package.json contains script entries applicable to the whole workspace like clean and compile, but it also has entries for launching script from the packages (lib and examples).

For example if you want to rebuild the library you can do it in different ways. From CLI run one of:

# from the root
npm run build:client
npm --prefix packages/client run build
npm --workspace packages/client run build
# or from packages/client
cd packages/client && npm run build

Examples

There are three examples different examples that demonstrate how the monaco-languageclient can be used:

• The Node.js example uses Express and WebSockets to enable communication between the language server process and the web application.

• The Browser Language Client & Server examples does the same, but the server runs in a web worker and communication is via direct LSP message exchange.

• The browser example shows how a language service written in JavaScript can be used in a Monaco Editor contained in a simple HTML page.

All example packages now are now located under ./packages/examples:

• Node.js Language Server example: ./packages/examples/node: - Look at the example express app to learn how to open a web socket with an express app and launch a language server within the current process or as an external process.
• Web Client for Node.js Language Server: ./packages/examples/client: Look at the example client to learn how to start Monaco language client.
• Browser Language Client and Server: ./packages/examples/browser-lsp: Look at the client and the web worker implementing the language server. They communicate via vscode-languageserver-protocol/browser instead of a web socket used in the first example.
• Browser example: ./packages/examples/browser: Look at the browser example to learn how to use a language service written in JavaScript in a simple HTML page (here you find the old now deprecated implementation using the monaco converters.)

Node.js Language Server plus web client example

From CLI in root of the project run:

# optionally: we assume everything is build as stated above
npm run build
# start the express server with the language server running in the same process.
npm run start-example-node
# alternative: start the express server with language server running in the external process.
npm run start-example-node:ext
# launches vite development server
npm run dev

After launching vite development server go to client example

Hints for all examples: Vite serves all client code from localhost. You can go to the index.html and navigate to all client examples from there. You can edit the client example code directly (TypeScript) and vite ensures it automatically made available.

Browser Language Client and Server

If you have build all packages or the specific package packages/examples/browser-lsp before you just need to run the vite development server:

# Optional: Build all packages
npm run build
# Launch vite development server if not already done
npm run dev

After launching vite development an go to the example

Hint: If you change the worker code, you have to re-create it (use npm run build:worker from the within the example directory!

Browser example

From CLI in root of the project you just need to run. If it is already running there is nothing more to do beforehand:

# launches vite development server
npm run dev

After launching vite development an go to the example

You can also go to for the old implementation using the deprecated monaco converters.

Optional webpack build for client example

The web client example can alternatively build with webpack. We recently switched to vite, but webpack is still the most popular bundler out there.

# optionally: we assume everything is build as stated above
npm run build
# start the express server with the language server running in the same process.
npm run start-example-node
# alternative: start the express server with language server running in the external process.
npm run start-example-node:ext
# build the webpack code
npm run webpack:example-client-build
# start http-server
npm run webpack:example-client-start

VSCode integration

You can as well run vscode tasks to start and debug the server in different modes and the client.

License

MIT