Skip to content

NightMingGit/monaco-languageclient

 
 

Repository files navigation

Monaco Language Client & VSCode WebSocket Json RPC

Gitpod - Code Now PRs Welcome monaco-languageclient NPM Version NPM Download

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.

Latest Important Project Changes

March 2023

Both libraries no longer export code from other libraries (vscode-jsonrpc, vscode-languageclient and vscode-languageserver-protocol).

September 2022

All code has been transformed to esm and npm packages are now of type module. cjs bundles are no longer available. The monaco-converter has been removed.

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.

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 verification example for the web client example using webpack.

The default and protected branch is now main.

Getting started

Dev environment: Local machine

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, compiles and builds everything
npm run build

Dev environment: Gitpod

Use a fresh dev environment in Gitpod by pressing the code now badge above.

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 monaco-languageclient or vscode-ws-jsonrpc library you can do it in different ways. From CLI run one of:

# from the root
npm run build:client
# it performs the following what you could execute manually as well
npm --workspace packages/client run build
# instruct npm to execute in different directory
npm --prefix packages/client run build
# or manually got to packages/client and run th build there
cd packages/client && npm run build

Hint: Use vscode-ws-jsonrpc instead of client for the other lib.

Examples

There are a couple of different examples that demonstrate how the monaco-languageclient can be used:

Verification

  • The webpack verification example located in ./packages/verify/webpack demonstrates how bundling can be achieved with webpack. You find the configuration here: webpack.config.js.

  • The vite verification example located in ./packages/verify/vite demonstrates how bundling can be achieved with vite. There is no configuration required.

Example usage

Start the Vite dev server. It is assumed you ran the build as described in Getting Started:

npm run dev

Vite serves all client code at 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.

For the client or the client-webpack examples you need to ensure the server example is running:

# start the express server with the language server running in the same process.
npm run start:example:server
# alternative: start the express server with language server running in the external process.
npm run start:example:server:ext

For everything else Vite is sufficient. If you want to reach the verification examples from the vite dev server index page you need to run the following additional http-servers beforehand (this is also indicated on the page itself):

# Serve the webpack verification example on http://localhost:8081
npm run start:verify:webpack
# Serve the vite verification example on http://localhost:8082
npm run start:verify:vite

VSCode integration

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

Monaco-editor compatibility table

The following table describes which version of monaco-languageclient and monaco-vscode-api are compatible with a specific version of monaco-editor. The listing starts with version 2.0.0 because monaco-vscode-api was introduced for the first time.

monaco-languageclient monaco-vscode-api monaco-editor comment
5.0.0 1.69.24 0.34.1 Planned
4.0.3 1.69.13 0.34.1
4.0.1 1.69.12 0.34.1
4.0.0 1.69.10 0.34.0
3.0.1 1.69.9 0.34.0
3.0.0 1.69.0 0.34.0
2.1.0 1.67.20 0.33.0 monaco-editor and vscode compatible again
2.0.0 - 2.0.2 1.68.4 0.33.0 monaco-editor and vscode incompatible

Troubleshooting

General

If you use monaco-languageclient make sure you have a version of monaco-editor installed in your project that is compliant with monaco-languageclient and its peer dependency monaco-vscode-api.

Ensure monaco-editor and monaco-languageclient are imported before you do any monaco-editor intialization. This ensures monaco and vscode (from monaco-vscode-api) are imported beforehand. This is for example done like this in all examples contained in this repository.

Volta

There are Volta instructions in the package.json files. When you have Volta available it will ensure the exactly specified node and npm versions are used.

monaco-editor-core

Originally monaco-languageclient was dependent on monaco-editor-core, but we changed this with version 1.0.0. If your project requires to use monaco-editor-core and you want to stay compatible with 1.0.0 of monaco-languageclient you can install monaco-editor-core as monaco-editor:

npm install monaco-editor@npm:monaco-editor-core

Or if you are using Webpack you can alternatively add this alias to its config:

resolve: {
  alias: {
    // This doesn't pull any languages into bundles and works as monaco-editor-core was installed
    'monaco-editor$': 'monaco-editor-core$',
    'monaco-editor/': 'monaco-editor-core/',
  }
}

If you use monaco-editor as dependency, but only want to have the content of monaco-editor-core than just only import:

import * as monaco from 'monaco-editor/esm/vs/editor/edcore.main.js';

@monaco-editor/react

Add the monaco-editor import at the top of your editor component file source:

import * as monaco from "monaco-editor";
import { loader } from "@monaco-editor/react";

loader.config({ monaco });

Licenses

  • monaco-languageclient: MIT
  • vscode-ws-jsonrpc: MIT

About

NPM module to connect Monaco editor with language servers

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 90.2%
  • JavaScript 5.3%
  • HTML 4.3%
  • Other 0.2%