Language Server Protocol Tutorial (Explained With Javascript Example)
In this tutorial I will explain what is language server protocol and why do you need it in your everyday coding. Normally such things like autocomplete, autoimport or go to definition are implemented inside editor. It's really difficult features and would be nice to reuse them across all editors and not just reinvent the wheel. This is example the job for language server protocol.
So the first question is what is Language Server Protocol and why should we care. This is a special thing to provide such features like autocomplete, go to definition, finding references.
Normally before it was created all this features must be implemented in editor itself. Of course it takes a lot of effort this is why that are not many editors or IDE where you have good autocomplete project analysing and so on. When Microsoft created VsCode editor they opensourced language server protocol. This is exactly the possibility to take all this difficult features out of the editor itself.
Now the question is how does it work? You have whatever editor you want and additional language server. For example for typescript. This language server is running not inside your editor but completely unrelated. Then you editor communicates with this server by sending the changes to the language server. Language server compiles or transpiles the code and if there are any errors sends them back. The only thing that edior needs to do is to render this errors for users. Autocomplete and goto works in exactly the same way.
If you use VsCode editor for example language server is installed there by default. This is why you get all this features out of the box. For other editors you need to install some small package which will simple communicate with our Language Server.
Why it is good? Because we are separating things. It's much easier to build and support let's say typescript language server than implement all this features in whatever editor you are using.
Let's see on the example how it works.
So here is my vim editor. When I open typescript file then typescript language server is automatically started.
The user opens a document. The editor notifies the language server that the user opened a document (didOpen) and that it has the document in memory. The user edit the document. The editor notifies the server about the document changes (didChange). The language server analyses this information and notifies the tool with the errors and warnings (diagnostics) that it has founds. The user request some specific command. The user ask for a definition (definition) of a symbol, completion (completion) of a text from the current cursor position, help with a signature (signatureHelp), etc. The editor sends the proper request to the server which responds accordingly. The editor can then use this information to satisfy the request of the user. The user closes the document. The editor notifies the language server that the user closed a document (didClose) and it hasn’t the document in memory anymore.
Now you know what is Language Server Protocol and how it works. Normally if you are using any popular editor and install some package where you get good autocomplete through the project, go to, references it's 99% that this package is just a wrapper for language server protocol.
I highly recommend to install or configure it for language that you are writing. Because seeing instant response on mistakes of your code in editor really saves you time.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
