As a front-end developer, VS Code is well known, has a rich plugin market, and an active community. In the development process, we usually install some practical plug-ins to improve work efficiency, so why not develop a plug-in yourself? You can have a clear understanding of the process of plug-in development, release, update and so on, deepen your understanding of VS Code, and then start your exploration journey.

Create a project

hello world

To initialize a new project, starting with Hello World, you need to install the scaffolding tools

  • Yeoman

Yeamon is a front-end build tool that provides a build ecosystem, primarily through the Yo command to build an entire project or part of a project.

  • VS Code Extension Generator

Yeoman generator written by VS Code as the template for most extension/custom type additions.

npm install -g yo generator-code
Copy the code

After executing the command, run the command to generate the project after the installation is successful

yo code ? What type of extension do you want to create? New Extension (TypeScript) // Select the type of plug-in you want to develop? What's the name of your extension? HelloWorld // Plugin name? What's the identifier of your extension? Helloworld // Plug-in identifier, such as name in package.json? What's the description of your extension? Test Extension // Plugin description? Initialize a git repository? Yes // Initialize git repository? Bundle the source code with webpack? Yes // Package source code with webpack? Which package manager to use? NPM // Select the package management toolCopy the code

Open VS Code and click Run plug-in

Enter HelloWorld in the command panel (Ctrl+Shift+P) and select HelloWorld from HelloWorld! Message, congratulations you have run successfully.

Congratulations on your success. Before developing your own functionality, you need to know that the two most important files are package.json and extension.ts. These two files are described in detail below:


This is the plug-in configuration file

{"name": "helloworld", // plugin name" displayName": "helloworld", // app market displayName" description": "test extension", "icon": "Images /logo.png", // Application icon "version": "0.0.1", // Plug-in version" engines": {// Compatible versions, such as "^1.62.0" indicate minimum compatibility with "1.62.0" VS Code. "Categories ": [// category "Other"], "activationEvents": [/ / activate event array "onCommand: the helloworld. The helloworld]", "main" : ". / dist/extension. Js ", / / the entry file "contributes" : {// Describe the object that the plugin publishes: "commands": [// Configure the input command {"command": "helloWorld. Helloworld ", "title": {"when": "editorTextFocus", // trigger the condition "command": "helloworld.helloWorld", "key": "shift+alt+h" } ] }, "scripts": { ...... }, "devDependencies": { ...... }}Copy the code

More configurations can be found here


This is the plug-in entry file where the functionality needs to be written. There are two functions

  • activate

This method is called when your plugin is activated, the first time the command is executed.

export function activate(context: vscode.ExtensionContext) { console.log('Congratulations, your extension "helloworld" is now active! '); Json file // The commandId parameter must match let with the command field in package.json disposable = vscode.commands.registerCommand('helloworld.helloWorld', () => { vscode.window.showInformationMessage('Hello World from HelloWorld! '); }); context.subscriptions.push(disposable); }Copy the code

The prompt we see is written here, which is a simple plugin registration process:

1, Set activationEvents to package.json, and contribute, keeping the event name consistent, e.g. “HelloWorld. Helloworld”

2, registered in the active function through the method of the mands. Events registerCommand (‘ the helloworld. The helloworld)

3. Type Hello World in the Command palette (Ctrl+Shift+P) to contribute the title that contributes, or press the bound shortcut key to activate the event and trigger the callback method

  • deactivate

This method is called when your extension is disabled.

Click here for more API information

The example analysis

Select the variable name to jump to the browser query

import * as open from "open"; // openBrowser const openBrowser = (url: string, query? : string) => { if (query) { open(encodeURI(url.replace(/{query}/, query))); } else { const editor = vscode.window.activeTextEditor; if (! editor) { return; } const selection = editor.selection; const text = editor.document.getText(selection); open(encodeURI(url.replace(/{query}/, text ?? ""))); }};Copy the code

Select the variable name and add the print log

Const addConsole = () = > {/ / get the editor const editor = vscode. Window. ActiveTextEditor; if (editor) { const selection = editor.selection; const text = editor.document.getText(selection); / / insert the next line mands. ExecuteCommand (" editor. Action. InsertLineAfter "). Then (() = > {const afterSelection = editor.selection; const range = new vscode.Range( afterSelection.start, afterSelection.end ); editor.edit((editBuilder) => { editBuilder.replace( range, text ? `console.log('${text}: ', ${text}); ` : "console.log();" ); }); }); }};Copy the code

Then according to the above plug-in registration process, the corresponding functions can be realized.

Packaging releases

At this point, you need to install vsce, the publishing tool provided by vscode, which helps you package and distribute plug-ins directly to the plug-in market.

NPM install -g vsce // plugin package generates vsix files, such as helloWorld 0.0.1.vsix VSce packageCopy the code

Before packaging, remember to modify files such as readme. md and add information such as plug-in description, otherwise error messages will be displayed

Two distribution modes are recommended

  • Package generated VSIX plug-in, install their own use

  • Package the vSIX plug-in and publish it to the app market

1. Create an Azure DevOps organization and register an account

2. After successful login, enter the page below to obtain the Personal Access Token

Click Create and you will see the newly created Personal Access Token. Copy it.

3. Create publishers. The package.json file for each plug-in contains the Publisher field.

4. Log in to vsCE and publish the plug-in to verify the Personal Access Token.

// login to vsce (publisher name)Copy the code

5, after the successful release, you can see the release status of the plug-in in the market, waiting for the successful verification, you can search for your plug-in.

Since the research plug-in

You can try, don’t like please uninstall decisively…

If you are looking for some other VS Code plug-ins to improve efficiency

VS Code’s must-have front-end plugin, you deserve it!