What you need to know about vscode plugin development steps

What you need to know about vscode plugin development steps

Introduction

When developing small programs, because of business needs, I came into contact with vscode plug-in development. Because I have no experience in developing plug-ins from scratch, I just stepped on the pit while checking the information. After some toss, I finally completed a simple plug-in. Although the plug-in function is simple, all the steps of developing a plug-in need to be walked through. So it is very helpful to understand the development of plug-ins. Since it is the first time to develop a plug-in, it is inevitable that you will forget the development process later, so here is a note in the form of notes for your reference and self-checking.

What is vscode plugin

Because vscode is a lightweight editor, there are fewer features that are helpful for development when it is developed. If you want more friendly development and code hints, you need plug-ins. The plug-in is an extension of the vscode function to achieve the desired function. For example: code highlighting, code prompting, code debugging and running, etc.

Hello World

Everything starts with hello world.

Install official scaffolding

npm install -g yo generator-code copy the code

Execute command to generate plugin folder

yo code Copy the code

File Directory

among them

extension.ts
Is the main plug-in file, the main entrance of the plug-in

package.json
The key plug-in configuration in the middle, the other configuration is basically the same as the configuration of the general npm package

//The minimum version compatible with vscode "engines" : { "vscode" : "^1.55.0" }, //Plug-in activation event configuration "activationEvents" : [ "onCommand:vscode-plugin-demo.helloWorld" ], //Main entry file "main" : "./out/extension.js" , //Plug-in configuration "contributes" : { "commands" : [ { "command" : "vscode-plugin-demo.helloWorld" , "title" : "Hello World" } ] }, Copy code
  • main
    The entry file of the plug-in is defined in
    extension.ts

  • contributes.commands
    Registered a name called
    vscode-plugin-demo.helloWorld
    Command and in
    src/extension.js
    To achieve it (pop up a
    Hello World
    Prompt);

  • in

    activationEvents
    Add on
    onCommand:vscode-plugin-demo.helloWorld
    When the user executes this command operation to execute the previously defined content

  • apart from

    onCommand
    In addition, there is
    onView
    ,
    onUri
    ,
    onLanguage
    Wait, I'll meet later

src/extension.ts
Entry file file content

Import * AS VSCode from 'VSCode' ; //Trigger export function activate ( context: vscode.ExtensionContext ) { //This line of code is executed only once when the extension is activated console .log( 'Congratulations, your extension "vscode-plugin-demo" is now active!' ); //The command Id parameter must match the command field in package.json let disposable = vscode.commands.registerCommand( 'vscode-plugin-demo.helloWorld' , () => { //Every time you execute a command, you put it here The code will be executed //Show the user a message box vscode.window.showInformationMessage( 'Hello World from vscode-plugin-demo!' ); }); context.subscriptions.push(disposable); } //Trigger export function deactivate () {} Copy code

Run and debug

In fact, the test environment has been configured in the file.

vscode/launch.json
File

{ "version" : "0.2.0" , "configurations" : [ { "name" : "Run Extension" , "type" : "extensionHost" , "request" : "launch" , "args" : [ "--extensionDevelopmentPath=${workspaceFolder}" ], "outFiles" : [ "${workspaceFolder}/out/**/*.js" ], "preLaunchTask" : "${defaultBuildTask}" }, { "name" : "Extension Tests" , "type" : "extensionHost" , "request" : "launch" , "args" : [ "--extensionDevelopmentPath=${workspaceFolder}" , "--extensionTestsPath=${workspaceFolder}/out/test/suite/index" ], "outFiles" : [ "${workspaceFolder}/out/test/**/*.js" ], "preLaunchTask" : "${defaultBuildTask}" } ] } Copy code
  • configurations.name
    Is the name of the debugging environment

Turn on debugging

First click 1 to display debugging, and then click 2 to display a drop-down option, which is to select the configured debugging environment

Run Extension
Click the small green button in front and a debugging window will appear. The shortcut key for debugging is
F5

The debug window will have a

Extension development host
Logo

Debug window press

Ctrl+Shift+P
,enter
HelloWorld
Execute the corresponding command, when you find a pop-up in the lower right corner
HelloWorld
When prompted, congratulations, the plug-in has been developed

Add right-click menu and shortcut keys

The default configuration of the project only adds commands, which is not convenient for debugging. For this reason, menus and shortcut keys are added.

package.json

{ "contributes" : { //Registered commands "commands" : [ { "command" : "vscode-plugin-demo.helloWorld" , "title" : "Hello World" } ], //Shortcut key binding "keybindings" : [ { "command" : "vscode-plugin-demo.helloWorld" , "key" : "ctrl+f12" , "mac" : "cmd+f12" , "when" : "editorTextFocus" } ], //Set menu "menus" : { "editor/context" : [ { "when" : "editorFocus" , "command" : "vscode-plugin-demo.helloWorld" , "group" : "navigation" } ] } } } Copy code

Then right-click on the opened file and there will be a menu

Explanation of common configuration of Package.json file

{ //The name of the plug-in should be all lowercase, no spaces "name" : "wxapp-cli" , //The friendly display name of the plug-in, used to display in the application market, supports Chinese "displayName" : "VSCode plug-in wxapp- cli" , //description "description" : "a tool for creating applet pages and components" , //keywords, used for app market search "keywords" : [ "vscode" , "plugin" , "wxapp" , " cli" ], //Version number "version" : "0.0.1" , //Publisher, if you want to publish to the application market, this name must be consistent with the publisher "publisher" : "water" , //Indicates the minimum version of vscode supported by the plugin "engines" : { "vscode" : "^1.52.0" }, //Plug-in application market category, optional values: [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs] "categories" : [ "Other" ], //The plug-in icon, at least 128x128 pixels, must be placed in the src/images folder "icon" : "images/icon.png" , //The extended activation event array, which events can be used to activate the extension, the following details "activationEvents" " : [ "onCommand:extension.createPage" , "onCommand:extension.createComponent" ], //The main entrance of the plug-in "main" : "./src/extension" , //The most important and most important configuration item "contributes" of the entire plug-in : { //Plug-in configuration item "configuration" : { "type" : "object" , //The title of the configuration item will be displayed on the setting page of vscode "title" : "wxTemp" , "properties" : { //Related configuration "wxTemp.page.js" : { "type" : "string" , "default " : "" , "description" : "Small program page template js" }, "wxTemp.page.wxss" : { "type" : "string" , "description" : "Mini program page template wxss" }, } }, //Command "commands" : [ { "command" : "extension.createPage" , "title" : "Create Mini Program Page" }, { "command" : "extension.createComponent" , "title" : "Create Mini Program Component" } ], //Shortcut key binding "keybindings" : [ { "command" : "extension.createPage" , "key" : "ctrl+f10" , "mac" : "cmd+f10" , "when" : "editorTextFocus" }, { "command" : "extension.createComponent" , "key" : "ctrl+f11" , "mac" : "cmd+f11" , "when" : "editorTextFocus" } ], //Menu "menus" : { //Editor right-click menu "editor/context" : [ { //Indicates that "when" will appear in the menu only when the editor has focus : "editorFocus" , "command" : "extension.createPage" , //navigation is a group that is always on top, and the following @6 is manual Sorting within the group "group" : "navigation@6" }, { "when" : "editorFocus" , "command" : "extension.createComponent" , "group" : "navigation@5" }, { // "when" : "editorFocus && resourceLangId == javascript" , "command" : "extension.createComponentDemo" , "group" : "z_commands" will only appear if the editor has the focus and the JS file is opened }, { "command" : "extension.createComponentDemo2" , "group" : "navigation" } ], //The icon in the upper right corner of the editor, the text "editor/title" is displayed without a picture : [ { "when" : "editorFocus && resourceLangId == javascript" , "command" : "extension.createComponentDemo3" , "group" : "navigation" } ], //Right-click menu of editor title "editor/title/context" : [ { "when" : "resourceLangId == javascript" , "command" : "extension.createComponentDemo4" , "group" : "navigation" } ], //Explorer right-click menu "explorer/context" : [ { "command" : "extension.createComponentDemo5" , "group" : "navigation" }, { "command" : "extension.createComponentDemo6" , "group" : "navigation" } ] }, //Code snippet "snippets" : [ { "language" : "javascript" , "path" : "./snippets/javascript.json" }, { "language" : "html" , "path" : "./snippets/html.json" } ], //Customize the new activitybar icon, which is the large icon "viewsContainers" on the left sidebar : { "activitybar" : [ { "id" : "wxapp" , "title" : "wxapp" , "icon" : "images/icon.png" } ] }, //Customize the realization of the view in the sidebar "views" : { //Correspond to the id of viewsContainers "wxapp" : [ { "id" : "wxapp1" , "name" : " " }, { "id" : "wxapp2" , "name" : " " }, { "id" : "wxapp3" , "name" : " " } ] }, //icon theme "iconThemes" : [ { "id" : "IconTheme" , "label" : "Test icon theme" , "path" : "./theme/icon-theme.json" } ] }, //npm scripts "scripts" : { "postinstall" : "node ./node_modules/vscode/bin/install" , "test" : "node ./node_modules/vscode/bin/test" }, //Development dependency "devDependencies" : { "@types/vscode" : "^1.52.0" , "@types/glob" : "^7.1.3" , "@types/mocha" : "^8.0.0" , "@types/node" : "^12.11.7" , "eslint" : "^7.9.0" , "@typescript-eslint/eslint-plugin" : "^4.1.1" , "@typescript-eslint/parser" : "^4.1.1" , "glob" :"^7.1.6" , "mocha" : "^8.1.3", "typescript" : "^4.0.2" , "vscode-test" : "^1.4.0" , "ts-loader" : "^8.0.3" , "webpack" : "^4.44.1" , " webpack-cli" : "^3.3.12" }, "license" : "SEE LICENSE IN LICENSE.txt" , "bugs" : { "url" : "https://github.com/XXXX/issues" }, "repository" : { "type" : "git" , "url" : "https://github.com/XXXXX" }, //Description page "homepage" : "https://github.com/XXXXXXX/README.md" } Copy code
activationEvents
  • onLanguage:${language}
  • onCommand:${command}
  • onDebug
  • workspaceContains:${toplevelfilename}
  • onFileSystem:${scheme}
  • onView:${viewId}
  • onUri
  • *

Configuration of events that trigger plugin activation

contributes

summary

Here is a simple example to understand the plug-in development steps. Some commonly used plug-in configurations are listed. There will be a chance to explain in detail the relevant parts of the plug-in configuration section in the future. I hope to help you develop plug-ins