Mengxin looks at it, do you still understand the VScode plugin?

I. Preface

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. IDE only provides a basic framework and basic functions. We need to use plug-ins to enrich and extend its functions.

Due to the important role of plug-ins, the size of the plug-in community of VSCode is now very considerable. Most of the development tools we usually use can be found in this application market.

After opening VScode, the left side of the interface is the entrance of the application market, where we can search for the plugins we need.

However, our needs are always complex and changeable. There are always some scenarios that the existing plug-ins cannot meet. At this time, we need to use the open interface of VScode to manually implement the functions we need.

This article mainly takes you to start with a simple plug-in development. More plug-ins with more complex functions need to refer to the official documents according to our specific needs.

2. Project initialization

The first step, we need to install the official scaffolding yo provided by VScode, and use it to generate the project:

// 安装脚手架

npm install -g yo generator-code

The second step is to initialize a sample project with the following command:

yo code

During the initialization process, we need to make some preference settings, which can be selected according to the requirements:

Then we can use VSCode to open the project generated by the above steps. You can see that the directory structure is as follows. The two most important files are package.json and extension.js. After understanding these two files, you can basically start developing a VSCode. plugin too.

three, package.json file

The package.json file is the manifest file of the VSCode extension, which contains many fields. The official documentation also has a special description for each of these fields: manifest .

Here we only focus on the files generated after initialization, which mainly include the following key nodes:

1. main: indicates the entry file of the project, from which you can see that the entry file is extension.js;

2. Contributes: The contribution point of the plug-in, the most important configuration of the plug-in. Registering contributors by extension is used to extend various skills in Visual Studio Code. The official document guides 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 key point, we will talk about it later);

3. activationEvents: This node tells VScode under what circumstances the plugin will be activated. The official document has indicated the timing of activation: activationEvents , the screenshot above indicates that it is activated when we execute the sample.helloWorld command, In addition to this, there are many more scenarios:

• onCommand : is activated when the command is called
• onLanguage: Activated when opening a file parsed for a specific language, e.g. "onLanguage:python"
• * : the plugin will be activated as soon as vscode is started
• 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 other content, you are interested in referring to the official documentation yourself.

1. extension.js file

The extension.js file is the file corresponding to the main field in the package.json mentioned above (the file name can be customized). There are mainly two methods exported in this file: activate and deactivate. The execution timing of the two methods is as follows:

• activate: the method to execute when the plugin is activated
• deactivate: The method called when the plugin is destroyed

5. Debugging and actual combat

After introducing the main files of this initialization project, you can debug and run. F5 enters debug mode, a new window will open as follows:

This window is marked as "Extended Development Host", Ctrl + Shift + P Enter the command we defined earlier, execute, and the text pops up in the lower right corner:

The demo project we generated has run successfully. Next, we make a slight change to the plugin so that it can display today's date and bind a shortcut key to it. The package.json changes are as follows:

The extensions.js file changes as follows:

Run, hit ctrl + f9, it works fine:

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 in the editor and the explorer panel respectively:

6. Summary

The above is a simple entry-level practical tutorial, which takes you to understand the basic ideas of developing a VSCode plug-in. In the future, if you encounter more complex and customized needs, you can official document in-depth study.

Is it necessary to master plug-in development? Grape feels that if there is no such demand at the moment, you don’t need to go too deep into it, but as a self-disciplined brick mover, you can first understand the basic idea.

Because in our actual work, sometimes some complex requirements can often be solved by a plug-in, which greatly improves work efficiency.

For example, in such a scenario, we use a report control such as ActiveReportsJS in the project, and sometimes we need to modify the design of some reports in the process of writing code. Then every time we use it, either start the project to open the report designer, or open the report through the desktop report designer.

But in fact, through the CustomEditor interface provided by the VScode plugin API, we can implement a highly customized private editor for special report files, click the report file, and directly use the designer preview file provided by this control, as shown below:

The implementation of this plugin further improves our work efficiency and avoids doing 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.

This article ends here, thank you for watching~~