• Stars
    star
    1,056
  • Rank 43,682 (Top 0.9 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated 24 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Repo hosts npm packages for monaco-languageclient, vscode-ws-jsonrpc, monaco-editor-wrapper, @typefox/monaco-editor-react and monaco-languageclient-examples

Monaco Language Client, VSCode WebSocket Json RPC, Monaco-Editor-Wrapper, Monaco-Editor-React and examples

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

This repository now host multiple npm packages under one roof:

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

Changelogs, project history and compatibility

CHANGELOGs for each project are available from the linked location:

  • CHANGELOG for monaco-languageclient is found here
  • CHANGELOG for vscode-ws-jsonrpc is found here
  • CHANGELOG for monaco-editor-wrapper is found here
  • CHANGELOG for @typefox/monaco-editor-react is found here
  • CHANGELOG for monaco-languageclient-examples is found here

Important Project changes and notes about the project's history are found here.

You find the monaco-editor, vscode, @codingame/monaco-vscode-api and @codingame/monaco-vscode-editor-api compatibility table here.

Getting started

On your local machine you can prepare your dev environment as follows. At first it is advised to build everything. Or, use a fresh dev environment in Gitpod by pressing the code now badge above. Locally, from a terminal do:

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

Vite dev server

Start the Vite dev server. It 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:

npm run dev
# OR: this clears the cache and has debug output
npm run dev:debug

As this is a npm workspace the main package.json contains script entries applicable to the whole workspace like watch, build and lint, but it also contains shortcuts for launching scripts from the childe packages like npm run build:examples.

If you want to change the libries and see this reflected directly, then you need to run the watch command that compiles all TypeScript files form both libraries and the examples:

npm run watch

Usage

Please look at the respective section in the packages:

  • Usage for monaco-languageclient is found here
  • Usage for vscode-ws-jsonrpc is found here
  • Usage for monaco-editor-wrapper is found here
  • Usage for @typefox/monaco-editor-react is found here

Examples Overview

The examples demonstrate mutliple things:

  • How monaco-languageclient is use by monaco-edtior-wrapper or @typefox/monaco-editor-react to have an editor that is connected to a language server either running in the browser in a web worker or vscode-ws-jsonrpc. is used to an external process via web-socket.
  • How different language servers can be intergrated in a common way, so they can communicate via web-socket to the front-end running in the browser.

Main Examples

Example usage

Server processes

JSON Language Server

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

# start the express server with the language server running in the same process.
npm run start:example:server:json
Pyright Language Server

For the python-client example you need to ensure the python-server example is running:

# start the express server with the language server running as external node process.
npm run start:example:server:python
Groovy Language Server

For the groovy-client example you need to ensure the groovy-server example is running. There are two options available:

  • Preferred option: Use docker-compose which does not require any manual setup (Java/Gradle). From the project root run docker-compose -f ./packages/examples/resources/groovy/docker-compose.yml up -d. First start up will take longer as the container is built. Use docker-compose -f ./packages/examples/resources/groovy/docker-compose.yml down to stop it.

  • Secondary option (not recommended): Groovy Language Server self-built instructions

Verification Examples & Usage

None of the verification examples is part of the npm workspace. Some bring substantial amount of npm dependencies that pollute the main node_modules dependencies and therefore these examples need to be build and started independently. All verifaction examples re-uses the code form the json client example and therefore require the json server to be started.

VSCode integration

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

Featured projects

Troubleshooting

General

Whenever you used monaco-editor, vscode, monaco-languageclient, monaco-editor-wrapper or @typefox/monaco-editor-react ensure they are imported before you do any monaco-editor or vscode api related intialization work or start using it. Please check the our python language client example to see how it should be done.

Dependency issues: monaco-editor / @codingame/monaco-vscode-api / @codingame/monaco-vscode-editor-api

If you have mutiple, possibly hundreds of compile errors resulting from missing functions deep in monaco-editor or vscode then it is very likely your package-lock.json or node_modules are dirty. Remove both and do a fresh npm install. Always npm list monaco-editor is very useful. If you see different or errornous versions, then this is an indicator something is wrong.

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.

Vite dev server troubleshooting

When you are using vite for development please be aware of this recommendation.

If you see the problem Assertion failed (There is already an extension with this id) you likely have mismatching dependencies defined for vscode / @codingame/monaco-vscode-api. You should fix this or add the following entry to your vite config:

resolve: {
  dedupe: ['vscode']
}

Serve all files required

@codingame/monaco-vscode-api requires json and other files to be served. In your project's web-server configuration you have to ensure you don't prevent this.

Bad Polyfills

buffer

If you see an error similar to the one below:

Uncaught Error: Unexpected non—whitespace character after JSON at position 2

SyntaxError: Unexpected non—whitespace character after JSON at position 2
    at JSON. parse («anonymous>)

It is very likely you have an old version of buffer interfering (see #538 and #546). You can enforce a current version by adding a resolution as shown below to your projects' package.json.

"resolutions": {
  "buffer": "~6.0.3",
}

monaco-editor and react

We recommend you now use typefox/monaco-editor-react.

But if you need to use @monaco-editor/react, then 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 });

pnpm

If you use pnpm, you have to add vscode / @codingame/monaco-vscode-api as direct dependency (you find the compatibility table here, otherwise the installation will fail.

"vscode": "npm:@codingame/monaco-vscode-api@~4.3.2"

Licenses

  • monaco-languageclient: MIT
  • vscode-ws-jsonrpc: MIT
  • monaco-editor-wrapper: MIT
  • @typefox/monaco-editor-react: MIT
  • monaco-languageclient-examples: MIT

More Repositories

1

open-collaboration-tools

Open Collaboration Tools: live-sharing solution for Eclipse Theia, VS Code and other editors and IDEs
TypeScript
98
star
2

theia-xtext-sprotty-example

An example Xtext DSL in Theia with Sprotty visualisation
TypeScript
71
star
3

npm-dependency-graph

Visualization of npm package dependencies based on Sprotty
TypeScript
58
star
4

vscode-ws-jsonrpc

NPM module to implement communication between a jsonrpc client and server over WebSocket
TypeScript
55
star
5

yang-lsp

A Language Server for YANG
Xtend
52
star
6

monaco-components

Monaco Editor and Language Client Wrapper, plus Monaco Editor React Component
TypeScript
43
star
7

theia-workshop

Theia Workshop - Building Cloud and Desktop IDEs
Dockerfile
41
star
8

R-Examples

40
star
9

vscode-messenger

RPC messaging library for the VS Code extension platform
TypeScript
33
star
10

yang-vscode

A VS Code Extension for YANG
TypeScript
26
star
11

djinject

Dependency injection done right.
TypeScript
25
star
12

langium-lox

Implementation of the Lox language in Langium
TypeScript
24
star
13

langium-sql

Language server for SQL in Langium
TypeScript
23
star
14

ls-api

MOVED TO
20
star
15

langium-minilogo

An example of the MiniLogo DSL using Langium
TypeScript
19
star
16

langium-ui-framework

A DSL for generating user interfaces, built with Langium
TypeScript
16
star
17

vscode-xtext-sprotty-example

A VS Code extension for a DSL implemented in Xtext with Sprotty diagrams
Xtend
13
star
18

chevrotain-allstar

Plugin module for the ALL(*) lookahead algorithm in Chevrotain
TypeScript
10
star
19

typir

Typir is a library for building type systems
TypeScript
9
star
20

Xtext-XMI

Demonstrates how to link Xtext-based and XMI based models
Java
8
star
21

languageserver-example

A VS Code language server extension using an Xtext example language
Xtend
7
star
22

xtext2langium

A tool for migrating an Xtext language to Langium
Xtend
7
star
23

langium-in-browser-codegen-example

Demonstrator of a fully-in-browser language implementation including code generation based on the arithmetics example language
TypeScript
7
star
24

lsp4j-chat-app

The simple chat app built with Eclipse LSP4J
Java
6
star
25

yang-sprotty

Diagrams for the YANG language
TypeScript
6
star
26

libavoid-server

Wrapper around the libavoid library to communicate with host processes
C++
5
star
27

langium-llvm

TypeScript
5
star
28

monaco-editor-workers

Bundles the editor and language workers of monaco-editor as module and classic worker.
TypeScript
4
star
29

xtext-vscode

Visual Studio Code integration for Xtext
Xtend
4
star
30

antlr4-grammar

This project is currently not maintained.
TypeScript
3
star
31

sprotty-vscode

Sprotty diagrams in VS Code extensions
TypeScript
3
star
32

publishing

Scripts for publishing open-source projects
Xtend
3
star
33

language-engineering-visualization

Experiments for Visualization in the context of LE (chiefly Langium)
TypeScript
2
star
34

elk-libavoid

Integration of the libavoid edge router in ELK (Eclipse Layout Kernel)
Java
2
star
35

sprotty-view-filtering

High-performance graphical view filtering with Sprotty
TypeScript
2
star
36

xtext-jflex

A JFlex fragment for Xtext. To be used when the standard antlr3 lexer doesn't cut it.
Xtend
2
star
37

elk-server

Layout engine running in a separate process
Java
2
star
38

find-git-exec

A lightweight library for locating the Git executable on the host system
TypeScript
2
star
39

datatype-definition

A data type definition language for generating implementations in various target languages (TypeScript, Java, etc.)
TypeScript
2
star
40

gradle-plugins

Gradle plugin for generating a Tycho build that assembles a p2 repository
Xtend
1
star
41

sprotty-nested-demo

TypeScript
1
star
42

monaco-languageclient-ng-example

monaco-languageclient angular example
JavaScript
1
star