lsp-editor-adapter (alpha)
A library that automatically presents IDE-like elements for code editors in the browser using the the Language Server Protocol.
Currently, you can connect a CodeMirror document to a language server over WebSockets. Future work will support language servers running in-browser, such as via Service Worker, and also support the Ace editor.
This library is in development. Opening issues and pull requests is greatly appreciated!
Features
The following features are all automatically configured once connected to a language server:
- Intellisense autocomplete
- Signature completion
- Hover tooltips
- Highlighting matching symbols in document
- Linting or syntax errors
- Within the same file: Go to Definition, Type Definition, and Find References
All other features of the language server are not currently supported, but if you would like to add support, please submit a pull request!
Screenshots
These screenshots show the current state of the library:
Javascript/Typescript:
Swift:
Installation
Current requirements:
- Language server running on a web socket connection, such as jsonrpc-ws-proxy
- CodeMirror editor with the
show-hint
addon included - Ability to import an ES6 module, which the library is packaged as
Example installation and connection:
;// You are required to install the show-hint addon;;// Each adapter can have its own CSS;;let editor =;// Take a look at how the example is configured for ideaslet connectionOptions =// Required: Web socket server for the given language serverserverUri: 'ws://localhost:8080/html'// The following options are how the language server is configured, and are requiredrootUri: 'file:///path/to/a/directory'documentUri: 'file:///path/to/a/directory/file.html'editorlanguageId: 'html';// The WebSocket is passed in to allow testabilitylet lspConnection = editor;// The adapter is what allows the editor to provide UI elementslet adapter = lspConnection// UI-related options go here, allowing you to control the automatic features of the LSP, i.e.suggestOnTriggerCharacters: falseeditor;// You can also provide your own hooks:lspConnection;// You might need to provide your own hooks to handle navigating to another file, for example:lspConnection;// To clean up the adapter and connection:adapter;lspConnection;
Running the example
A fully-functional example project which runs three language servers and allows editing all three files is available at /example
To run the example:
cd example
npm install
npm run start
then visit localhost:4000
Developing
To develop against this library, and see updates in the example, run both of these:
# From parent directory
npx webpack --watch
# From example directory
npm run dev
To run library tests, there are two options:
npm test
npm run test-dev
test-dev will watch the source code and rerun tests in the background