How to develop a popular VS Code plugin
What open capabilities does vscode provide?
From the official website of vscode, we can see that vscode mainly provides six types of open capabilities: general capabilities, themes, declarative language features (I call it basic support), program language features (advanced support), and workspace UI Expansion and debugging.
When we develop the vscode plugin, we are actually extending vscode with these capabilities.
The functions and usage scenarios included in these six types of capabilities can be seen in the figure below.
Six basic capabilities provided by vscode
How to write a vscode plugin?
The form of the vscode plugin is very similar to an npm package. You need to add package.json to the root directory of the project, and add some vscode-exclusive settings in it. The main settings are Activation Events (plug-in activation timing) and contribution points (plug-in capability). Next we mainly look at what these two configurations mean.
Declare the activation time of the plugin
I briefly describe the life cycle of vscode as the following figure. This is explained further below.
vscode plugin life cycle (reproduced please specify the author cheeqi)
activate () function & deactivate () function
You can see that the last two nodes in the life cycle are activatefunctions and deactivatefunctions. These two functions need to be exported in the entry file of the plug-in npm module for vscode to actively call.
Among them, it activatewill be called when vscode considers it appropriate, and it will only be called once in the run cycle of the plug-in. Therefore, the logic of starting the plugin in the activate function is a very suitable time.
deactivateThe function will be called before the plugin is uninstalled. If there is an asynchronous operation in your uninstallation logic, you only need deactivateto retuen a promise object in the function, and vscode will officially uninstall the plugin when the promise resolves.
onXxxx Activation Events
You can see that before the activatefunction, there are onLanguagedescriptions of waiting events. In fact, these are the Activation Events declared in the plugin package.json file. After declaring these Activation Events, vscode will at the appropriate time correction plug-in activatefunction. The reason why vscode is designed to save resources is to activate your plugin only when necessary. Of course, if your plug-in is very important, do not want to be activated after a certain event, you can declare as Activation Events *such vscode will start when you start callback activatefunction
The specific logic of the plugin
The specific logic vscode in the plugin does not make any restrictions, you can extend it by calling various APIs provided by vscdoe. However, it should be noted that, for performance and portability reasons, vscode does not allow developers to directly manipulate the dom.
https://code.visualstudio.com/api/references/vscode-api This is a document generated by Microsoft based on the d.ts file of vscode
Next we look at the Activation Events declarations for several plugins
- Beyond Encouragement Division stated two parameters:onCommand: ycy.showReminderView and *, in fact we all know that only the latter one is sufficient
- vuter stated onLanguage: vue so he will be activated when the user opens the vue language file
- vscode-icons is a pure theme plugin that declares *
- GitLens needs to overwrite all files, and it needs to be activated when vscode starts. His statement is *
For a description of Activation Events, please refer to the official documentation:
Another important field that needs to be declared in package.json is contribution points. Contribution points describe which capabilities are supported by the current plug-in and the configuration of corresponding capabilities.
Since vscode prohibits direct manipulation of the dom, the correct way to insert functionality into the UI is to declare contribution points. The following figure lists all the contribution points supported by vscode.
Contribution points currently supported by vscode
Next we look at the contribution points of several plugins
- Beyond Encourager supports the triggering of Yang Beyond’s reminders through commands. At the same time, you can configure when the reminders appear, so commands / configuration is included.
- vuter mainly provides language support for vue files, you can see that he provides a wide range of contribution points, including commands / breakpoints / languages / grammars / configuration
- vscode-icons already supports the theme, he provides iconThemes / commands / configuration
- GitLens is an enhancement to vscode git, so his insertion point focuses on the ability to configure / commands / menu / resourceLabelFormatters / viewsContainers / views
For more explanation about contribution points, please refer to:
Programming language support
So, how do you add a new programming language support to vscode? Declarative language features mainly describe the support of lightweight language features such as code highlighting and code snippets that need to respond in real time; while program language features only provide more advanced real-time performance such as jumping to definitions, finding references, hover prompts It is not demanding and requires a lot of computing language skills. Therefore, the former is more suitable for processing in the main thread of the IDE, while the latter can be split into other threads or even services for calculation.
Declarative language features (basic support)
The following mainly introduces declarative language support with syntax highlighting as an example.
From handwritten paser to TextMate
In the beginning, Microsoft engineers wrote paser for common development languages in web development. This type of paser has high execution efficiency, but also has high requirements on the developer’s ability, which is not suitable for future plug-in extensions. Starting with vscode 1.8, Microsoft introduced the highlight syntax of TextMate and gradually switched the original handwritten paser to this syntax.
TextMate official website
TextMate itself is a text editor for mac, and vscode borrows his definition of language-highlighted text. The essence of TextMate syntax is to use a json file to describe tokens and structures in the language. Of course, for convenience, you can also use YAML and compile to json.
By the way, the TextMate syntax uses the oniguruma library to parse regular expressions. Oniguruma supports some regular features that are currently not supported by the js engine, so a oniguruma c ++ module is used in vscode to speed up the regular expression parsing .
In addition, in order to facilitate developers to write syntax highlighting plug-ins, vscode also provides a yomen template to generate the basic directory structure of the plug-in, and a debugger named inspectTMScopes to view the results of lexical analysis.
vscode yomen templateinspectTMScopes
In addition to syntax highlighting, vscode also supports these features: annotation switching, bracket definition, auto-closing, Auto surrounding, code folding, word pattern, indentation rules, etc. See https://code.visualstudio.com/api/language for details -extensions / language-configuration-guide
Procedural Language Features (Advanced Capabilities)
For advanced language proficiency support, vscode provides two ways:
There is a one-to-one correspondence between the capabilities of the two expansion solutions
The capabilities provided by these two methods are exactly the same, and Microsoft mainly promotes the second option, so the following mainly introduces the second option.
language server protocol (LSP)
First, language server is a cross-editor language support implementation specification. It was proposed by Microsoft. Currently, vscode, vim, and atom all support this specification.
Difference before and after using LSP
In the past, every IDE encountered a brand new language, and often needed to re-implement the basic functions, which is good for popular languages, because IDE vendors have the motivation to provide support. Then for a brand new language, the inventor of the language often needs to implement the language support of various IDEs by himself. Because the interface of each IDE is different, the language support needs to be re-ported in each IDE.
With the LSP specification, language support plug-in developers only need to write once, and they can quickly port code between IDEs.
LSP implementation details
To implement an LSP, you only need to open a server that accepts LSP requests in the background and implement the interface in the LSP specification (often called through JSON RPC).
More detailed information about LSP can be found in these two documents
- LSP’s official website:https://microsoft.github.io/language-server-protocol/
- The documentation about the LSP plugin in vscode:https://code.visualstudio.com/api/language-extensions/language-server-extension-guide
At this point, we have learned the main knowledge points in the vscode plug-in. I believe that the friends here have been harvested ~
Not fun yet?
Go left and turn to the official documentation for the vscode plugin development ~
You see this, don’t you like it before you leave?
Article last posted at: 2019-11-05 19:18:48