Introduction to the

In the development of small programs, because the business needs to contact vscode plug-in development. Because he is also from scratch to develop plug-ins do not have what experience, so is to check information while stepping on the pit, after some torturing finally completed a simple plug-in. Plug-in functionality is simple, but all the steps of plug-in development need to be taken once. So it’s very helpful to understand how to develop plug-ins. As it is the first time to develop plug-ins, it is inevitable that we will forget the development process in the future, so I will make a record in the way of notes for your reference and reference.

What is vscode plug-in

Because vscode is a lightweight editor, it comes with fewer features to help it develop. If you want more friendly development and code prompts, you need plug-ins. A plug-in is an extension to vscode’s functionality to implement the desired functionality. For example: code highlighting, code prompts, code debugging runs, etc.

Hello World

It all started with Hello World.

Installation of official scaffolding

npm install -g yo generator-code
Copy the code

Run the command to generate the plug-in folder

yo code
Copy the code

File directory

Among them, extension.ts is the main plug-in file and the main entry of the plug-in

The key plug-in configuration in package.json, and the rest of the configuration is basically the same as the normal NPM package configuration

// the lowest compatible version of 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 the code

  • The entry file for the plug-in is defined in main, in this case extension.ts

  • Contributes.contributes.mangds a command named vscode-plugin-demo.helloWorld is registered and implemented in SRC /extension.js (insert Hello World prompt);

  • Add onCommand to activationEvents :vscode-plugin-demo.helloWorld to execute the previously defined content when the user executes this command action

  • In addition to onCommand, there are onView, onUri, onLanguage, etc., which we’ll see later

SRC /extension.ts Entry file Contents of the file

import * as vscode from 'vscode';

// Triggered when your extension is activated
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'.() = > {
		// The code you put here is executed each time a command is executed

		// Displays a message box to the user
		vscode.window.showInformationMessage('Hello World from vscode-plugin-demo! ');
	});

	context.subscriptions.push(disposable);
}

// Triggered when your extension is disabled
export function deactivate() {}

Copy the code

Run the debug

The test environment has already been configured in the 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 the code
  • configurations.nameIs the name of the debugging environment

Open the debug

First click 1 to appear debugging, then click 2 to appear the drop-down option, which is the configured debugging environment. Select the configured Run Extension and click the small green button in front of it, and a debugging window will appear. The debug shortcut is F5

The debug window will have the identity of the extension development host

In the debug window, press Ctrl+Shift+P and enter HelloWorld to execute the corresponding command. When you find the prompt HelloWorld pops up in the lower right corner, congratulations, the plug-in has been developed

Add right-click menus and shortcuts

The default configuration of the project only adds commands, which is not convenient for debugging, so add menus and shortcut keys.

package.json

{
    "contributes": {
      // Register the command
        "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 the menu
        "menus": {
            "editor/context": [{"when": "editorFocus"."command": "vscode-plugin-demo.helloWorld"."group": "navigation"}]}}}Copy the code

Then right click on the open file to have a menu

Package.json file common configuration

{
	// The name of the plug-in should be all lowercase without Spaces
    "name": "wxapp-cli".// The friendly display name of the plugin, used to display in the app market, supports Chinese
    "displayName": "VSCode plug-in wxapp - cli"./ / description
    "description": "A tool to create applet pages and components".// Keywords for application market search
    "keywords": ["vscode"."plugin"."wxapp"."cli"]./ / version number
    "version": "0.0.1".// Publisher, the name must be the same as the publisher if you want to publish to the app market
    "publisher": "water".// represents the lowest supported version of vscode for the plug-in
    "engines": {
        "vscode": "^ 1.52.0"
    },
	// Plug-in application market category, optional value:  [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]
    "categories": [
        "Other"].// Plugin ICONS, 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 activated by the extension, more on later
    "activationEvents": [
        "onCommand:extension.createPage"."onCommand:extension.createComponent"].// The main entry to the plugin
    "main": "./src/extension".// The most important configuration item in the plug-in
    "contributes": {
		// Plug-in configuration items
		"configuration": {
            "type": "object".// the configuration item title will be displayed on vscode's Settings page
            "title": "wxTemp"."properties": {
              // Related configuration
								"wxTemp.page.js": {
                  "type": "string"."default": ""."description": "Applet page template JS"
          		},
                "wxTemp.page.wxss": {
                  "type": "string"."description": "Applets page template WXSS"}}},/ / command
        "commands": [{"command": "extension.createPage"."title": "Create applet page"
      			},
      			{
              "command": "extension.createComponent"."title": "Create applets 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"}]./ / the menu
        "menus": {
			// Editor right-click menu
            "editor/context": [{// indicates that the editor only appears in the menu if it has a focus
                    "when": "editorFocus"."command": "extension.createPage".// Navigation is a group that is always at the top, followed by @6 for manual sorting within the group
                    "group": "navigation@6"
                },
                {
                    "when": "editorFocus"."command": "extension.createComponent"."group": "navigation@5"
                },
                {
					// Only the editor has focus and JS files open will appear
                    "when": "editorFocus && resourceLangId == javascript"."command": "extension.createComponentDemo"."group": "z_commands"
                },
                {
                    "command": "extension.createComponentDemo2"."group": "navigation"}].// The icon in the upper right corner of the editor shows the text without the image
            "editor/title": [{"when": "editorFocus && resourceLangId == javascript"."command": "extension.createComponentDemo3"."group": "navigation"}].// Editor title right-click menu
            "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 larger icon in the left sidebar
        "viewsContainers": {
            "activitybar": [{"id": "wxapp"."title": "wxapp"."icon": "images/icon.png"}},// Customize the implementation of the view in the sidebar
        "views": {
			// corresponds to the ID of viewsContainers
            "wxapp": [{"id": "wxapp1"."name": "Days"
                },
                {
                    "id": "wxapp2"."name": "Right time"
                },
                {
                    "id": "wxapp3"."name": "And"}},// 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"
    },
	// Develop dependencies
    "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.4.1"."@typescript-eslint/parser": "^ 4.4.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"
    },
	/ / instructions page
    "homepage": "https://github.com/XXXXXXX/README.md"
}
Copy the code
activationEvents
  • onLanguage:${language}
  • onCommand:${command}
  • onDebug
  • workspaceContains:${toplevelfilename}
  • onFileSystem:${scheme}
  • onView:${viewId}
  • onUri
  • *

Event configuration that triggers plug-in activation

contributes
  • Set the configuration:
  • Commands: command
  • Menus, menu
  • Keybindings: shortcut keybindings
  • Languages: New language support
  • Debuggers: debugging
  • Breakpoints: breakpoint
  • grammars
  • Themes: the theme
  • Snippets: snippets of code
  • JsonValidation: Custom JSON validation
  • Views: Left sidebar view
  • ViewsContainers: Customize Activitybar
  • problemMatchers
  • problemPatterns
  • taskDefinitions
  • colors

summary

Here is a simple example to understand the steps of plug-in development, listing some commonly used plug-in configuration, the opportunity to explain the relevant parts of the plug-in configuration section in detail. Hope to help you develop plug-ins