Teaching the Language Server Protocol to CodeMirror
March 23, 2019
In my ongoing work to improve the Popcode code editing environment, I came across the Language Server Protocol, which is widely integrated into desktop coding tools for features like autocompletion. The idea of connecting a language server to a browser has been tried before, specifically by TypeFox teaching the language server protocol to Microsoft’s Monaco editor, but I could not find any efforts to apply that to the CodeMirror editor.
This leads me to today, where I have created a library that connects a CodeMirror editor in a web browser to a language server, and automatically configures autocompletion, syntax checking, and go to definition support while being fully customizable. I spent a month creating a hosted demo environment to explain this functionality- when you connect to that environment, you will get assigned a new container to run your own language server.
The library code is on Github under the ISC license. I welcome you to use the library in your own projects and to submit issues and pull requests you may have! As a solo developer on this, I’m also very excited to see if this code is useful before investing more in maintaining it.
The frontend of the demo environment is also available on Github here.
This version of the library requires a Web Socket connection to a language server, which is most similar to the inter-process communication of a language server running on your desktop. If your specific language server supports these features, they will be available in the browser as well:
- 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
There is an example project provided within the library to show how you might configure the library, but a simple configuration might look like this: