Vscode plug-in development guide (I)- theory

What is vscode plug-in and what can it do

Visual Studio Code is a lightweight Code editor from Microsoft. It is free, open source and powerful. It supports syntax highlighting, intelligent code completion, custom hotkeys, parenthesis matching, code snippets, code comparison Diff, GIT and other features of almost all major programming languages, and supports plug-in extensions, and has been optimized for web development and cloud application development. Software cross-platform support Win, Mac and Linux. Has become the code editor of choice for more and more people.

The vscode plug-in is actually a vsix file similar to an NPM package, and its functions can be roughly divided into the following categories:

1) Unrestricted local disk access

2) Customize commands, shortcut keys and menus

3) Customized jump, automatic completion and suspension prompts

4) Customize plug-in Settings, customize plug-in welcome page

5) Customize WebView

6) Customize the left function panel

7) Customize color and icon theme

8) New language support (code highlighting, syntax parsing, folding, jump, completion, etc.)

9) Markdown enhancement

10) Others (such as status bar changes, notification prompts, editor control, Git source control, task definition, Language Server, Debug Adapter, etc.)

It’s interesting to see what you can do with it, and then you’ll see where you can improve your productivity in your current job. Let’s take a look at how to write a plugin.

Two, hand in hand to teach you to write a plug-in

2.1 Construction Project

Microsoft provides scaffolding to help you quickly build a project

2.1.1 Installation of scaffolding

NPM install -g yo generator-codeCopy the code

2.2.2 Using scaffolding to create a project

// Create project Yo CodeCopy the code

2.2.2.1 Creating a Project Will open an interactive command line that allows you to select the type of plug-in you want to create. Currently, the following types are supported:

1) New Extension (TypeScript) : Ts syntax project with the hello World command built in

2) New Extension (JavaScript) : a basic version of the JavaScript syntax with a built-in Hello World command

3) New Color Theme: Theme project, built-in Theme, can be customized Theme

4) New Language Support: Language Support project, built-in syntax Support configuration, can be used to Support special languages

5) New Code Snippets: Code Snippets project, built-in Code Snippets configuration, you can configure Code Snippets, input trigger characters, quickly generate Code Snippets

6) New Keymap: shortcut key project, built-in shortcut key configuration, you can customize the shortcut key behavior

7) New Extension Pack: Plug-in collection project, built-in plug-in collection configuration, can be used to customize the plug-in set, to quickly install a set of plug-ins

8) New Language Pack (Localization) : at present, no sites contributed by Localizations can be found in the official documents, which need to be added

2.2.2.2 Enter the plug-in name, plug-in id, plug-in description, whether to initialize git repository, whether webpack is required, and use package manager (NPM/YARN) in sequence.

2.2.2.3 After following the steps, a project folder named by the identifier of the plug-in will be created, which contains the initialized project files

2.2.3 Explain the project architecture as New Extension (TypeScript)

├ ─ ─. Eslintrc. Json/ / eslint configuration├ ─ ─ vscode// vscode debugs configuration| ├ ─ ─ extensions. Json | ├ ─ ─ launch. The json | ├ ─ ─ Settings. The json | └ ─ ─ the tasks. The json ├ ─ ─ the vscodeignore// Publish ignored content├ ─ ─ CHANGELOG. The md// Modify the log├ ─ ─ the README, md// After the plug-in is published, the plug-in home page content├ ─ ─ package - lock. Json ├ ─ ─ package. The json// vscode identifies plug-in contribution points from here├ ─ ─ the SRC// Core source code content| ├ ─ ─ the extension. Ts// Import file| └ ─ ─ the test// Test the file├ ─ ─ tsconfig. Json// ts configuration file├ ─ ─ VSC - the extension - quickstart. Md └ ─ ─ webpack. Config. Js/ / wepack configuration
Copy the code

There are a few core content, focus on the expansion

1)package.json

Every Visual Studio Code extension needs a manifest file package.json at the root of the extension directory structure

The most basic of these fields:

The more complex one is that contributes the configuration of activationEvents, and I will focus on the actual combat content in the future.

Here’s a brief description of the scaffolding project

"ActivationEvents" : [onCommand: TypeScript. "helloWorld" / / when the trigger TypeScript. The helloWorld command start plug-in], "main" : "./dist/extension.js", // import file "contributes": {" Commands ": [// register command {"command": "TypeScript. HelloWorld ", // command unique identifier, command name "title": "Hello World" // command display title in vcode}]}Copy the code

2) Import files

// ./dist/extension.js" import * as vscode from 'vscode'; // Export function activate(context: vscode.ExtensionContext) { console.log('Congratulations, your extension "TypeScript" is now active! '); // call vscode register command API, (unique) command to register a name for the TypeScript. The helloWorld command let the disposable = vscode.com mands. RegisterCommand (' TypeScript. The helloWorld, () = > {/ / execute commands, you will be shown at the bottom right hand corner tooltip vscode. Window. ShowInformationMessage (' Hello World from TypeScript! '); }); context.subscriptions.push(disposable); } // Export function deactivate() {}Copy the code

3) the effect of

Press theshift+command+p, enter the command title query, and click the command we wrote

Vscode will display a prompt in the lower right corner

2.2 How to Develop and debug

In the aboveNew Extension (TypeScript)For example, the scaffolding has been automatically configured for us by means of vscode’s built-in debugging function, i.e.vscodeContents in the directory

In fact, execute the package.json configuration watch command

"watch": "webpack --watch"
Copy the code

1) After clicking “Run Extension”, a new VISUAL studio code interface will be automatically opened. At this time, the newly opened VISUAL Studio code will automatically install the plug-in developed by us, and the header of visual Studio Code will display [Extension Development Host].

2) now we debug the plug-in function in this interface. If we need to test the code, we can create a new local project in this vscode or open an existing project to test

3) We write console related log, can be inDEBUG CONSOLEYou can also add or delete breakpoints while running, as follows:

4) WebPack automatically listens and compiles if the plugin content is modified

5) how to update the vscode debug page of Extension Development Host?

• Method 1: Disconnect and execute the command again
• Method 2: Hold down Command +R on the screen, the system automatically restarts and applies the application. Recommended

2.3 How do I Release and Update information

2.3.1 Release method

• Method 1: directly send the folder to others, let others find vscode plug-in directory and put it in, and then restart VScode, generally not recommended;
• Method two: PackvsixPlugin, and then send someone else to install, if your plugin is confidential and not convenient to release to the app market, try this method;
• Method 3: Register a developer account and publish to the official website app market, which does not need to be reviewed like NPM.

2.3.2 packaging

NPM I vsCE -g // package into a vsix file, the project root directory will generate a vsix file vsCE packageCopy the code

2.3.3 Publishing to the App Market

1) Register account to publish (you can read it in detail hereBlog. Haoji. Me/vscode c-plug…)

• First go to login.live.com/. Log in to your Microsoft account, or sign up for one if you don’t have one
• Then access: aka.ms/SignupAzure… Click Continue to create an organization with a mailbox prefix by default
• Create a token. The important thing to note here is that you need to write down the token locally, because the website won’t save it for you
• After obtaining a personal access token, usevsceThe following command creates a new publisher

vsce create-publisher your-publisher-name
Copy the code

• release

Patch VSCE publish patch VSCE publish minor VSCE publish MajorCopy the code

2) Revoke the publication

Note that this action does not cancel the release of a version, but deletes the plug-in directly. Use with caution!

vsce unpublish (publisher name).(extension name)
Copy the code

3) How users update (install from the app market)

Vscode plug-in is hot update mode. After the user installs it once, it will automatically detect whether there is a new version and install it, and the user is basically unaware of it. These detection opportunities include searching the plug-in and restarting VScode, etc

If the automatic detection mechanism of vscode is not triggered after the plug-in is updated, you can manually search the plug-in once or restart vscode. It should be noted that the plug-in update also needs to restart vscode to take effect

Iii. Reference materials

• Vscode official API
• Translation document
• VSCode plug-in development overview: here focus on the recommendation, small white into the door god tutorial