How Does Your IDE IntelliSense Work? ?

Hey everyone, today we are going to discuss a very interesting and important topic of how your editor works with IntelliSense with smartness. We will now jump into how the IntelliSense in VS code or Monaco works. In case you do not have an IDE, check out Codedamn!

IntelliSense of Codedamn playground

Codedamn has a playground where you can edit and play around with your code. It even has a little bit of IntelliSense programmed in it. It is not that evolved at VS code though. When you start writing, the playground suggests many tags. This is due to the emit plugin which provides a good syntax for auto-completing your code. The real benefits only come when you work with a real software programming language. 

What is IntelliSense?

IntelliSense is a way the IDE provides you suggestions on how to complete your code. Basically, you are coding intelligently. VS Code uses the Monaco editor. Hence this editor is built on top of the VS code to provide the user with IntelliSense.

How does IntelliSense work?

Let us consider you have multiple editors like ace editor, Monaco editor code mirror and so on. These editors provide you with smart suggestions by building their own solutions. But each editor uses certain functions for tokenizing for coloring or highlighting certain syntax for shortcuts. This changes from editor to editor as well. Each editor had to provide a custom setting. People then realized this was a tedious task to do as it was an extremely hard and non-portable solution.

Establishment of Language server protocol

Due to the above state problem, people created a new protocol known as the Language server protocol. This protocol was a standardized way of an editor communicating to the backend server. Here we are considering the editor as the front end of your web page and the actual suggestions of auto-completion are given by the backend server.

This is what the Language server protocol aimed to do. It mainly tried to take the IntelliSense ability of the editor and provide them with a protocol. Hence all you needed to do is implement this protocol once for every single editor. 

Conclusion

Hope to understand the importance of IntelliSense and Language server protocol. Hence to quickly summerise, the editor is the front end and the editor language server is the backend. While the language server protocol is an HTTP. This HTTP is used for front-end and backend communication.