I. Introduction
VSCode is a very lightweight editor from Microsoft. Although it is lightweight, it has extremely powerful functions. The reason is that many powerful functions of VSCode are implemented based on plug-ins. The IDE only provides the most basic framework and basic functions. We need to use plug-ins to enrich and expand its functions.
Due to the important role of plug-ins, the scale of VSCode's plug-in community is now very impressive. Most of the development tools we commonly use can be found in this application market.
After opening VScode, the left side of the interface is the entrance to the application market, where you can search for the plug-ins we need.
However, our needs are always complex and changeable, and there are always some scenarios that existing plug-ins cannot meet. At this time, we need to use the open interface of VScode to manually implement the functions we need.
Then we can use VSCode to open the project generated by the above steps. You can see the directory structure as follows. The two most important files are package.json and extension.js. After understanding these two files, you can basically get started developing a VSCode. Plug-in.
3. package.json file
The package.json file is the manifest file of the VSCode extension and contains many fields. The official documentation also has special instructions for each field: manifest .
Here we only focus on the files generated after initialization, which mainly include the following key nodes:
1. Main: Specifies the entry file of the project. From here you can see that the entry file is extension.js;
2. Contributions: The contribution points of the plug-in, the most important configuration of the plug-in. Registering contributions through extensions is used to extend various skills in Visual Studio Code. The official documentation points the way: contributes .
Here, a command named sample.helloWorld is registered in commands. This command actually needs to be implemented in ./extension.js (this part is the focus, we will talk about it later);
3. activationEvents: This node tells VScode under what circumstances the plug-in will be activated. The official document has specified the timing of activation: activationEvents . The screenshot above indicates that it will only be activated when we execute the sample.helloWorld command. In addition, There are more scenarios besides:
-
onCommand: activated when the command is called
-
onLanguage: activated when opening a file parsed to a specific language, such as "onLanguage:python"
-
*: As soon as vscode is started, the plug-in will be activated
-
onFileSystem: Whenever a file or folder from a specific scheme is read
-
onView: Whenever the view with the specified id is expanded in the VS Code sidebar...
For more information, if you are interested, please refer to the official documentation.
- extension.js file
The extension.js file is the file corresponding to the main field in package.json mentioned above (the file name can be customized). This file mainly exports two methods: activate and deactivate. The execution timing of the two methods is as follows:
- activate: method executed when the plug-in is activated
- deactivate: method called when the plug-in is destroyed
5. Debugging and actual combat
After introducing the main files of this initialization project, you can debug and run it. F5 enters debugging mode and a new window will open as follows:
This window is marked "Extended Development Host". Ctrl + Shift +P enter the command we defined previously and execute it. Text will pop up in the lower right corner:
The demo project we generated has been successfully run. Next, we make slight changes to the plug-in so that it can display today's date and bind shortcut keys to it. The package.json changes are as follows:
The extensions.js file changes as follows:
Run, click ctrl + f9, it runs normally:
In addition to configuring shortcut keys to run commands, you can also configure the right-click menu. Contributes can configure the menu:
After running, you can see this command by right-clicking on the editor and resource manager panels respectively:
6. Summary
The above is a simple entry-level practical tutorial, which takes you through the basic ideas of developing a VSCode plug-in. If you encounter more complex and customized needs in the future, you can consult the official documentation for in-depth study.
Is it necessary to master plug-in development? Putao feels that if there is no need for this at the moment, there is no need to understand it too deeply, but as a self-disciplined brick-and-mortar coder, you can first have a rough understanding of the basic ideas.
Because in our actual work, sometimes a plug-in can solve many problems for some complex requirements, greatly improving work efficiency.
For example, in this scenario, we use report controls such as ActiveReportsJS in the project. In the process of writing code, we sometimes need to modify the design of some reports. Then every time we use it, we must either start the project and open the report designer, or open the report through the desktop report designer.
But in fact, through the CustomEditor interface provided by the VScode plug-in API, we can implement a highly customized private editor for special report files. Click on the report file and directly use the designer preview file provided by this control, as shown below:
The implementation of this plug-in further improves our work efficiency and avoids a lot of repetitive work. Regarding the CustomEditor interface, VSCode also provides the official sample vscode-extension-samples . If you are interested, you can learn about it.
![](https://img-blog.csdnimg.cn/img_convert/87f2be26ab32f0cd4faa97abc0a0c476.png
This article ends here, thank you everyone for watching~~