typefox / monaco-languageclient

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

This repository now host multiple npm packages under one roof:

• monaco-languageclient to connect Monaco editor with language servers.
• vscode-ws-jsonrpc which implements communication between a jsonrpc client and server over WebSocket.
• monaco-editor-wrapper for building monaco editor application driven by configuration
• monaco-editor-react puts a react cloack over monaco-editor-wrapper
• monaco-languageclient-examples provides the examples which allows to use them externally.

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

• Monaco Language Client, VSCode WebSocket Json RPC, Monaco-Editor-Wrapper, Monaco-Editor-React and examples
  • Changelogs, project history and compatibility
  • Getting started
    • Vite dev server
  • Usage
  • Examples Overview
    • Main Examples
      • JSON Language client and language server example (Location)
      • Python Language client and pyright language server example (Location)
      • Groovy Language client and language server example (Location)
      • Java Language client and language server example (Location)
      • Langium grammar DSL (Location)
      • Statemachine DSL (created with Langium) (Location)
      • bare monaco-languageclient (Location)
      • Browser example (Location)
      • Purely monaco-editor related examples
      • Server processes
        • JSON Language Server
        • Pyright Language Server
        • Groovy Language Server
        • Java Language Server
    • Verification Examples & Usage
    • VSCode integration
  • Featured projects
  • Troubleshooting
    • General
    • Dependency issues: monaco-editor / @codingame/monaco-vscode-api / @codingame/monaco-vscode-editor-api
    • Volta
    • Vite dev server troubleshooting
    • Serve all files required
    • Bad Polyfills
      • buffer
    • monaco-editor and react
    • pnpm
  • Licenses

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

JSON Language client and language server example (Location)

The json-server runs an external Node.js Express app where web sockets are used to enable communication between the language server process and the client web application (see JSON Language Server). The json-client contains the monaco-editor-wrapper app which connects to the language server and therefore requires the node server app to be run in parallel.

Python Language client and pyright language server example (Location)

The python-server runs an external Node.js Express app where web sockets are used to enable communication between the language server process and the client web application (see Pyright Language Server). The python-client contains the monaco-editor-wrapper app which connects to the language server and therefore requires the node server app to be run in parallel. It is also possible to use a @typefox/monaco-editor-react app to connect to the server.

Groovy Language client and language server example (Location)

The groovy-server runs an external Java app where web sockets are used to enable communication between the language server process and the client web application (Groovy Language Server). The groovy-client contains the monaco-editor-wrapper app which connects to the language server and therefore requires the node server app to be run in parallel.

Java Language client and language server example (Location)

The java-server runs an external Java app where web sockets are used to enable communication between the language server process and the client web application (Java Language Server). The java-client contains the monaco-editor-wrapper app which connects to the language server and therefore requires the node server app to be run in parallel.

Langium examples (here client and server communicate via vscode-languageserver-protocol/browser instead of a web socket used in the three examples above

Langium grammar DSL (Location)

It contains both the language client and the langauge server (web worker). Here you can chose beforehand if the wrapper should be started in classic or extended mode.

Statemachine DSL (created with Langium) (Location)

It contains both the language client and the langauge server (web worker). It is also possible to use a @typefox/monaco-editor-react app to connect to the server.

bare monaco-languageclient (Location)

It demostrate how the JSON Language client and language server example can be realised without monaco-editor-wrapper. You find the implementation here.

Browser example (Location)

It demonstrates how a monaco-editor-wrapper can be combined with a language service written in JavaScript. This example can now be considered legacy as the web worker option eases client side language server implementation and separation, but it still shows a valid way to achieve the desired outcome.

Purely monaco-editor related examples

See Typescript Language support.

See Multi-editor 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. You require docker-compose which does not require any manual setup (OpenJDK / 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.

Java Language Server

For the java-client example you need to ensure the java-server example is running. You require docker-compose which does not require any manual setup (OpenJDK / Eclipse JDT LS). From the project root run docker-compose -f ./packages/examples/resources/eclipse.jdt.ls/docker-compose.yml up -d. First start up will take longer as the container is built. Use docker-compose -f ./packages/examples/resources/eclipse.jdt.ls/docker-compose.yml down to stop it.

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.

• angular verification example: Before March 2024 this was located in a separate repository. If you want to test it, Please do: cd verify/angular && npm run verify. It serves the client here: http://localhost:4200.

• webpack verification example demonstrates how bundling can be achieved with webpack. You find the configuration here: webpack.config.js. Please do: cd verify/webpack && npm run verify. It serves the client here: http://localhost:8081.

• vite verification example demonstrates how bundling can be achieved with vite. There is no configuration required Please do: cd verify/vite && npm run verify. It serves the client here: http://localhost:8082.

• pnpm verification example demonstrates that the project can be build with vite, but pnpm is used instead of npm. Please do: cd verify/pnpm && pnpm run verify. It serves the client here: http://localhost:8083.

• yarn verification exampledemonstrates that the project can be build with vite, but yarn is used instead of npm. Please do: cd verify/yarn && yarn run verify. It serves the client here: http://localhost:8083.

VSCode integration

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

Featured projects

• JSONA Editor: Showcase (GitHub)
• Clangd in Browser: Showcase (GitHub)
• Langium minilogo using monaco-editor-wrapper: Showcase (GitHub)

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@~8.0.0"

Licenses

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

monaco-languageclient's Issues

Connecting monaco with Xtext language server

Hi,

First of all: Thank you for providing us with an extension for monaco to use the lsp. However, I am having trouble to use this (unfortunately, I have to say also due to the lack of good documentation) in my context. I am trying to implement a (web socket based) language server. I used more or less the example from here. So it is basically just a server which would listen to a port and delegate to the Xtext language server.

Your example always tries to connect to the same adress that provided the index.html file, so I tried to change this by editing the js file:

function createUrl(path) {
  // var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
  // return normalizeUrl(protocol + "://" + location.host + location.pathname + path);
  return normalizeUrl('ws://localhost:4389');
}

Now the languageclient seems to try to connect to by language server. However, the language server simply blocks in the org.eclipse.lsp4j.jsonrpc.json.StreamMessageProducer.listen method, as it seems to expect more data, which the language client does not provide.

Can you help me find the reason for this or do you perhaps even know it? Your description here is currently not enough to implement a runnable example on my own.. A lot of details are missing. Furthermore, the examples are unfortunately now very helpful in my opinion.

Thank you and best regards

Nils

Update to Monaco 0.11.x

A new version of Monaco has been published. We should update monaco-languageclient to the new version. This will allow us to close #39.

I would consider microsoft/monaco-editor#756 a blocker at the moment though... :(

Fix triggering code action from the horizontal ruler

Am I correct that textDocument/codeActions requests aren't happening? I'm guessing this is a Monaco problem or...?

Services (Commands, Workspace) implementations for the standalone editor

Ignoring the fact that textDocument/codeActions doesn't seem to be working for me (#11), I can't find any references to the workspace/executeCommand request in the code. Is this supported?

server configuration for new language

In example server was used vscode-json-languageservice as LanguageService. But if I want use language that doesn't has existed languageservice packages (javascript).
On client side everything clear (register language, set configuration)

monaco.languages.register({
            id: JAVASCRIPT_LANGUAGE_ID,
            extensions: ['.js', '.jsx'],
            aliases: [JAVASCRIPT_LANGUAGE_NAME, 'js', 'javascript'],
            mimetypes: ['text/javascript'],
 });
monaco.languages.onLanguage(JAVASCRIPT_LANGUAGE_ID, () => {
            monaco.languages.setLanguageConfiguration(JAVASCRIPT_LANGUAGE_ID, genericEditConfiguration);
            monaco.languages.setTokensProvider(JAVASCRIPT_LANGUAGE_ID, createTokenizationSupport(Language.EcmaScript5));
});

but on the server side I can't find what I should return on connection events (for example for connection.onCompletion)

Electron support

I have a working example that runs in the browser, but when I try to run it in electron, I get the error:

Loading "vs/editor/editor.main" failed

which appears to come from main.ts file. I also tried to run it in electron based on this example:

https://github.com/Microsoft/monaco-editor-samples/blob/master/sample-electron/index.html

but somehow cannot get it working with webpack packaging and the resulting bundle.js.

Any ideas how to get it working on Electron?

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Hi,

I'm using create-react-app and when I import the package I get:

./~/vscode-languageserver-types/lib/main.js
3:20-27 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

And the trace is:

webpackMissingModule
src/code.uber.internal/infra/goplayspace/client/node_modules/vscode-languageserver-types/lib/main.js:3
(anonymous function)
src/code.uber.internal/infra/goplayspace/client/node_modules/vscode-languageserver-types/lib/main.js:3
./node_modules/vscode-languageserver-types/lib/main.js
src/code.uber.internal/infra/goplayspace/client/node_modules/vscode-languageserver-types/lib/main.js:8

Any ideas how to solve this?
Thanks

Connect my project with language server

Hi,

I'm trying to connect my own project with language server which in example. I use angular-cli create the project and use ngx-monaco-editor. I copy the example code into my project and it can connect to language server but when I edit source code in monaco, it didn't send/receive message from language server which unlike the example provided in this library.

I almost copy/paste the code from example folder and only change some variable names. Anyone know why no web socket connection while I'm editing in Monaco?

Below is screen shot I took from Chrome, only one message return by server and no further response/request while update code in Monaco.

Here is the code (re-edit for better understanding):
monaco-editor.html

<ngx-monaco-editor class="monaco-code-editor" [options]="options" [(ngModel)]="code" (onInit)="onMonacoInit($event)"></ngx-monaco-editor>

monaco-editor.ts

public options = {
    glyphMargin: true,
    lightbulb: {
      enabled: true
    }
  };

  public code = `{
    "$schema": "http://json.schemastore.org/coffeelint",
    "line_endings": "unix"
  }`;

  public model: NgxEditorModel = {
    value: this.code,
    language: 'json',
    // uri: 'inmemory://model.json',
  };

monaco configuration:

export let MonacoConfig: NgxMonacoEditorConfig = {
    baseUrl: './assets', // configure base path for monaco editor
    defaultOptions: { scrollBeyondLastLine: false }, // pass default options to be used
    onMonacoLoad: () => {
        // here monaco object will be available as window.monaco use this function to extend monaco editor functionalities.
        console.log((<any>window).monaco);

        monaco.languages.register({
          id: 'json',
          extensions: ['.json', '.bowerrc', '.jshintrc', '.jscsrc', '.eslintrc', '.babelrc'],
          aliases: ['JSON', 'json'],
          mimetypes: ['application/json'],
      });
    }
};

monaco onInit handler:

onMonacoInit(editor) {
    // create the web socket
    const url = createUrl('/sampleServer');
    const webSocket = createWebSocket(url);
    // listen when the web socket is opened
    listen({
      webSocket,
      onConnection: connection => {
        // create and start the language client
        const languageClient = createLanguageClient(connection);
        const disposable = languageClient.start();
        connection.onClose(() => disposable.dispose());
      }
    });

    const services = createMonacoServices(editor);
    function createLanguageClient(connection: MessageConnection): BaseLanguageClient {
      return new BaseLanguageClient({
        name: 'Sample Language Client',
        clientOptions: {
          // use a language id as a document selector
          documentSelector: ['json'],
          // disable the default error handler
          errorHandler: {
            error: () => ErrorAction.Continue,
            closed: () => CloseAction.DoNotRestart
          }
        },
        services,
        // create a language client connection from the JSON RPC connection on demand
        connectionProvider: {
          get: (errorHandler, closeHandler) => {
            return Promise.resolve(createConnection(connection, errorHandler, closeHandler));
          }
        }
      });
    }

    function createUrl(path: string): string {
      // const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
      // return normalizeUrl(`${protocol}://${location.host}${location.pathname}${path}`);
      return 'ws://localhost:3000/sampleServer';
    }

    function createWebSocket(wsUrl: string): WebSocket {
      const socketOptions = {
        maxReconnectionDelay: 10000,
        minReconnectionDelay: 1000,
        reconnectionDelayGrowFactor: 1.3,
        connectionTimeout: 10000,
        maxRetries: Infinity,
        debug: false
      };
      return new ReconnectingWebSocket(wsUrl, undefined, socketOptions);
    }
  }

Example build fails with Node.js 8

I cannot build the example on my machine with:

$ node --version
v8.2.0
$ npm --version
5.3.0

That seems to be a problem when using a newer Node.js / NPM version as you can see on Travis:
https://travis-ci.org/franzbecker/monaco-languageclient/jobs/255741802

The error occurs while compiling TypeScript:

> tsc

src/client.ts(60,57): error TS2345: Argument of type 'MessageConnection' is not assignable to parameter of type 'MessageConnection'.
  Types of property 'sendRequest' are incompatible.
    Type '{ <R, E, RO>(type: RequestType0<R, E, RO>, token?: CancellationToken | undefined): Thenable<R>; <...' is not assignable to type '{ <R, E, RO>(type: RequestType0<R, E, RO>, token?: CancellationToken | undefined): Thenable<R>; <...'. Two different types with this name exist, but they are unrelated.
      Types of parameters 'type' and 'type' are incompatible.
        Type 'RequestType0<any, any, any>' is not assignable to type 'RequestType0<any, any, any>'. Two different types with this name exist, but they are unrelated.
          Types have separate declarations of a private property '_'.

Sending configuration options

Is there an example of sending configuration options to the language server? For example, I'd like to be able to send a list of plugin options to the python language server. In vscode, it uses the synchronize option to send vscode config values. How would I go about manually sending config values from the monaco-language client?

These are the options I want to be able to send: https://github.com/palantir/python-language-server/blob/develop/vscode-client/package.json#L19

Question:How can i spawn language server remotely?

I am trying to keep my monaco language client and my language server on different machines. As I can see in the example folder we can start the language server externally from here --> const extJsonServerPath = path.resolve(__dirname, 'file to start the server..'); but my confusion is when my language server will be on a different machine, how it will have the access of file system of remote machine.
Thanks in advance.

Improve the example to demonstrate usage of react-monaco-editor

Hello, I am following your tutorial to setup monaco editor + language client/server in react based app.

I use react monaco editor package + typescript + webpack and it works great.

When import language client, it fails due to multiple reasons during import.

import {
BaseLanguageClient, CloseAction, ErrorAction,
createMonacoServices, createConnection
} from 'monaco-languageclient';

1. Cannot find module vscode-languageserver-types:

services.js - __export(require("vscode-languageserver-types"));

2. Uncaught ReferenceError: monaco is not defined:

diagnostic-collection.js - var Uri = monaco.Uri;

In your example, I see that you used webpack and marked main.js loader as entry:

entry: path.resolve(buildRoot, "main.js"),

main.js:

window.onload = () => {
    const w = <any>window;
    // load Monaco code
    w.require(['vs/editor/editor.main'], () => {
        // load client code
        require('./client');
    });
};

Can it be that main.js and way you initialize monaco editor is the reason why it works? Is it possible to pass monaco editor as dependency to language client instead of using globally defined "monaco" variable?

Allow defining a language client supplier that is called on activation event

Register a language client supplier that is run when the given activation event is triggered.

https://code.visualstudio.com/docs/extensionAPI/activation-events

Don't send didChange notification for every single keystroke

Currently the client sends didChange for every editor keystroke. This leads to bad performance in some scenarios. The client should gather multiple keystrokes and send a bulk notification after a customizable timeout. The default timeout could be something like 200 ms.

[security] Update example dependencies

The build is failing because http-proxy-agent and https-proxy-agent, required by request-light, are identified as highly vulnerable.

cd examples && npm install && npm audit shows this:

┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ high          │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ http-proxy-agent                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ request-light                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ request-light > http-proxy-agent                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/607                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ high          │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ https-proxy-agent                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ request-light                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ request-light > https-proxy-agent                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/593                       │
└───────────────┴──────────────────────────────────────────────────────────────┘

Go to definition for java *.class file (textDocument/definition)

Hi all,
How could I go to definition for some apis like System.out.println which is defined in jdt://xxxx/rt.jar/java.io/PrintStream.class within monaco-languageclient?

Migrate to vscode-languageclient instead of vscode-base-languageclient

As per microsoft/vscode-languageserver-node#88, an abstract BaseLanguageClient has now been exposed in the library.

It looks like a pretty significant change to monaco-languageclient to implement this, however it does unfork the library so probably worth taking on.

Build does not work

You README is not up to date. I can't get this project up and running with the instruction from the README.

npm run build is not present. If I use the commands from an earlies (closed) ticket it does not work either.

Monaco Editor with Python Language Server

Summary

I've tried to use PYLS on Monaco Editor using Monaco Language Client with the following configuration

this.editor.setModel(monaco.editor.createModel(exampleCode, 'python', monaco.Uri.parse('inmemory://dummy.py')););
    const services = createMonacoServices(this.editor);

And everything that this blog explained.

Everything works as expected but the auto complete. When I do ctrl + space on the editor, there's only "No Suggestions." and I saw the PYLS logs error as follows

PYLS Server: 2017-12-08 09:56:21,029 UTC - ERROR - jsonrpc.manager - API Exception: {'message': "'Folder' object has no attribute 'read'", 'args': ("'Folder' object has no attribute 'read'",), 'type': 'AttributeError'}
Traceback (most recent call last):
  File "myVirtualEnv/lib/python2.7/site-packages/jsonrpc/manager.py", line 112, in _get_responses
    result = method(*request.args, **request.kwargs)
  File "myVirtualEnv/lib/python2.7/site-packages/pyls/language_server.py", line 64, in wrapped
    return func(*args, **kwargs)
  File "myVirtualEnv/lib/python2.7/site-packages/pyls/python_ls.py", line 140, in m_text_document__completion
    return self.completions(textDocument['uri'], position)
  File "myVirtualEnv/lib/python2.7/site-packages/pyls/python_ls.py", line 70, in completions
    position=position
  File "myVirtualEnv/lib/python2.7/site-packages/pyls/_utils.py", line 113, in race_hooks
    for impl, result in pool.imap_unordered(_apply, impls, chunksize=1):
  File "/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/multiprocessing/pool.py", line 668, in next
    raise value
AttributeError: 'Folder' object has no attribute 'read'

Could you help me? is it about the monaco URI that I pass ? inmemory://dummy.py

note: I've also asked this on Python Language Server repo since I don't know on which side is the issue happened...

Question: compatibility with OmniSharp C# language server

I recently discovered Monaco and the language client project - I reviewed the example included in this project and am now interested to modify it to work with the OmniSharp Language Server (https://github.com/OmniSharp/csharp-language-server-protocol). Before I spend too much time on this, I wanted to know if this had been attempted or if I should already expect some incompatibilities between both. Thanks! Starred the repository as well 👍

Click lightbulb context menu && How to register a command with the specified id?

hi，@akosyakov could you give me some idea?

Click lightbulb context menu && How to register a command with the specified id?

Problem in connecting to an external Java language server

I'm trying to use your library to connect monaco to an external Java Language Server.

I tried both https://github.com/eclipse/eclipse.jdt.ls and https://github.com/georgewfraser/vscode-javac.
It looks like that I can connect to the server, and the 'initialize' message is sent, but
after that there is no communication between the client and server.

In order to connect to the external Java server, I modified the file 'json-server-launcher.ts'
and add this line:

const serverConnection = server.createServerProcess('Java', "java", args);`

where args are the arguments to run the Java language server. For example, for the
'vscode-javac' server, I use

let fatJar = "fat-jar.jar";
         
const args = [
    '-cp', fatJar, 
    '-Djavacs.port=' + 3000,
    '-Xverify:none', // helps VisualVM avoid 'error 62'
    'org.javacs.Main'
];

I also registered the Java language to monaco languages, and use documentSelector: ['java'].

Is this the way I am supposed to connect to a non-node language server?

`textDocument/didChange` Did not follow the LSP protocol

hi all, I just want to try lsp in monaco, and I was very excited to find this project.
However, When I tried to analyze the websocket data package, I found a bug.

then, I tried to analyze theia-ide, It works fine.

what should I do to solve this problem?

Get-rid of monaco-editor-core dependency

Using monaco-editor should be enough.

Migrate to monaco 0.10.0

How do I get proper highlighting (e.g. for python)?

I see that highlighting works if I replace

// replace this line 
require('monaco-editor-core');
// with this line
import * as monaco from 'monaco-editor';

(and add monaco-editor as a dependency). But this breaks the client due to difference in interfaces.
This fails even if I use monaco 0.12.0, same as used by monaco-languageclient.

add electron example

Upgrade to Monaco 0.13.x

Looks like Monaco 0.13.0 has been released.

Support CompletionItem.additionalTextEdits

CompletionItem#additionalTextEdits from the langauge server are currently not converted.

I'd need that for the new Go language server to automatically add a missing import, when a function from a not yet imported package is chosen as a completion.

Lots of codeAction requests on initialize

When starting a language client that supports code actions, for some reason 17 identical codeAction requests are sent to the server.

Will dig deeper into this, but wanted to file an issue in case others stumble across it.

How to change uri in jsonrpc protocol

I am trying to using monaco-languageclient to connect to my external language server. However, it seems that the server could not recognize the uri sent by the client side:
2017-08-02 01:55:18,887 UTC - ERROR - pyls.language_server - CAUGHT Traceback (most recent call last): File "/home/phantomape/Tools/anaconda2/lib/python2.7/site-packages/pyls/language_server.py", line 67, in wrapped return func(*args, **kwargs) File "/home/phantomape/Tools/anaconda2/lib/python2.7/site-packages/pyls/python_ls.py", line 108, in m_text_document__did_open self.workspace.put_document(textDocument['uri'], textDocument['text'], version=textDocument.get('version')) File "/home/phantomape/Tools/anaconda2/lib/python2.7/site-packages/pyls/workspace.py", line 41, in put_document doc_uri, content, sys_path=self.syspath_for_path(path), version=version File "/home/phantomape/Tools/anaconda2/lib/python2.7/site-packages/pyls/workspace.py", line 69, in syspath_for_path files = config.find_parents(self.root, path, ['setup.py']) or [] File "/home/phantomape/Tools/anaconda2/lib/python2.7/site-packages/pyls/config.py", line 74, in find_parents raise ValueError("Path %s not in %s" % (path, root)) ValueError: Path /1 not in
Any idea how to fix it ?

Support of code completions based on workspace

Suppose I have two different files in the same workspace, how to do code completions based on them, say one file is imported in another file. Right now I can only provide code completions for only one file.

CompletionItem with period in label

I'm having issues getting completion to work with special characters.
For the simple completion provider below:

this.connection.onCompletion(params => {
    return [{
        label: 'test.one'
    }];
});

If we type te and press enter, we correctly get test.one.
If we type on and press enter, we correctly get test.one.
But if we type test.on and press enter, we get test.test.one.
This seems like an issue with tokenization, which is not handled by the LSP.
Is there a simple workaround here, or would I have to write a custom grammar for Monaco so that the completions work as intended?

Setup an additional build against the latest Monaco version

Question: Best practice for Browser-Side LS integration

I've got a language serivce written in TypeScript. It uses the types from vscode-languageserver-types to define a service, so that I can just delegate the actual LSP calls to the TS implementation. This is in a base library, which I want to use in the browser aswell.

I want this to be completely client-side and currently, I've provoded most features with some glue code similar to the code in this sample. IMHO this is fine as it has an acceptable overhead.

However, I now want to provide CodeActions and I realized that I have to provide a Command or a CodeAction. The latter also includes the actual edits. As the edits get computed in a different LSP method (executeCommand), the only way to get them is to compute all edits for all code actions, even if they are not executed by the user.

I don't want to do this. Sadly, monaco has no executeCommand equivalent in its CodeActionProvider interface. I've seen some references to applyEdit and a whole workspace implementation. However, it seemed to me that it's not that straigt-forward to implement CodeAction with the simple glue-code I am using right now. Or is it? Whats the status on that? Is there a best-practice?

I came across class MonacoCommands implements Commands which provides a method called registerCommand. Is this somehow relevant for me in this case? It seems that I have to register the command on an editor-level. I'd like to do it on a language-level (or something similar).

README build instructions out of date

The README says to use npm run build, but the build script doesn't exist.

[examples] Clean up npm scripts

On Windows it doesn't seem to like the ./node_modules/.bin/webpack bit in the build script of the package.json file.

If I remove all that and just leave webpack then it will build. Note that webpack isn't on my %PATH% so I imagine it's correctly running the binary in node_modules/ and not some global npm cache/config of mine.

"build": "npm run compile && webpack && npm run copy",

$ npm run build

> @monaco-languageclient/[email protected] build C:\Users\Remy\code\github\monaco-languageclient\example
> npm run compile && ./node_modules/.bin/webpack && npm run copy


> @monaco-languageclient/[email protected] compile C:\Users\Remy\code\github\monaco-languageclient\example
> tsc

'.' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Remy\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.7
npm ERR! code ELIFECYCLE
npm ERR! @monaco-languageclient/[email protected] build: `npm run compile && ./node_modules/.bin/webpack && npm run copy`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @monaco-languageclient/[email protected] build script 'npm run compile && ./node_modules/.bin/webpack && npm run copy'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the @monaco-languageclient/example package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run compile && ./node_modules/.bin/webpack && npm run copy
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs @monaco-languageclient/example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls @monaco-languageclient/example
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Remy\code\github\monaco-languageclient\example\npm-debug.log

Question: multiple editors per language client now createMonacoServices takes an editor instance

Hi,

I have been using the monaco-languageclient library for a while, with my implementation based on the example in this project. Previously createMonacoServices did not take any arguments, but now it takes a single editor parameter. My (probably incorrect!) understanding of this call was to bind the language server protocols onto the monaco event handlers and vice-versa, and this was for the monaco instance as a whole, rather than to a specific editor.

Does this change mean that I would need to make a BaseLanguageClient for every editor instance I have open? (I have a multi editor interface, not dissimilar - but substantially more basic - than that of the theia-ide.) It seems odd that that would be the case - but then, I could easily have misunderstood something.

Many thanks in advance

Tag v0.2.0 on GitHub

Assuming the 0.2.0 release to npm has been successful, a v0.2.0 should be created and pushed to GitHub.

Catch up with the LSP changes

Monaco 0.11.6 supports new language features like implementation, type definition and color providers. Which as well supported by the latest LSP: https://github.com/Microsoft/vscode-languageserver-node/blob/master/protocol/src/protocol.ts.

It would be nice to sync them.

The easiest solution will be to change vscode-base-languageclient to support new providers.

The more sustainable solution is to fix #24.

Update to Monaco 0.9.x

Prepare a new Release

It would be super cool to have the latest changes released. thanks

Allow a rootUri to be provided to MonacoWorkspace

Pass options with rootUri to createMonacoServices

createMonacoServices should accept options as the second optional argument to pass rootUri to the workspace service now and additional options in the future

monaco-languageclient/src/services.ts

Line 12 in b901301

export function createMonacoServices(editor: monaco.editor.IStandaloneCodeEditor): BaseLanguageClient.IServices {

Add ESM examples

Current example uses AMD to load Monaco. It would be nice to have an example demonstrating ESM integration as well: https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md

Depends on #63

Add pure browser example

Would it be possible to create an example that doesn't depend on using Node.js to serve the content?

What I'm imagining is some pure JavaScript code that converts between Monaco and LSP types and then delegates to the language service (very much like what's done in json-server.ts at the moment). This would make it easy for language servers to demonstrate their power by hosting an editor using purely HTML and JavaScript right on GitHub Pages. Of course, this means that only language servers written in JavaScript would be supported but that is to be expected if you want to demo your language server in the browser without any other dependencies.

Add the npm version and download badges

See https://shields.io/

Avoid reexporting node dependencies from vscode-jsonrpc

It seems like services.ts brings in a dependency on vscode-base-languageclient/lib/base which in turn tries to require('net').

Given Monaco (vs VSCode) is designed to be web-based i think it makes sense for a languageclient to exist to power non-electron apps.

Support textDocument/documentLink and documentLink/resolve

Link providers are mentioned in the Languages interface but there is no implementation for it in MonacoLanguages.

Can not require monaco-languageclient due to monaco is not defined

I was trying to use this client in another project based on the react-monaco-editor. Sadly, I can't even import the language client.
Uncaught ReferenceError: monaco is not defined at Object.<anonymous> (diagnostic-collection.js:4) at __webpack_require__ (bootstrap 5001b61…:555) at fn (bootstrap 5001b61…:86) at Object.<anonymous> (languages.js:9) at __webpack_require__ (bootstrap 5001b61…:555) at fn (bootstrap 5001b61…:86) at Object.<anonymous> (index.js:12) at __webpack_require__ (bootstrap 5001b61…:555) at fn (bootstrap 5001b61…:86) at Object.<anonymous> (Monaco.js:1)
It appears that the error happened in line4 in diagnostic-collection.js when the program tried to use monaco.Uri. I am guessing there must be some place that import the monaco module, but I can not find it.