Paper come zhongjue shallow, know this to practice, so to experience VSCode plug-in development, there are many online friends of the article gave a lot of help, the code of this article is directly using the content of the Internet, hereby sorted out for later learning partners reference

www.cnblogs.com/lianmin/p/5… www.cnblogs.com/Leo_wl/p/99…

Set up the environment

Nodejs and VSCode need to be installed in advance, which will not be covered here. Next, install yo, a tool provided by the vscode team for plug-in development

npm install -g yo generator-code
Copy the code

Once installed, generate the plug-in development project through Yo Code. Typescript is officially recommended, but javascript is more familiar, and the rest is the default

After generating all the way, Open the newly generated plug-in project through VSCode (File->Open Folder). In this stack of files, we only care about two important points: extension.js is the entry File of the plug-in, and package.json contains the configuration information of the plug-in

Once you’re ready, to verify that the plug-in project is OK, If you can see that VSCode has opened a window to run the plugin project,shift+ CTRL + P type Hello World and you will be OK if you can see the message “Hello World” in the bottom right corner

If the content changes while editing the plug-in, the running window can be refreshed by simply pressing Ctrl+ R, without closing and re-running

The plug-in content

Here we start to write the specific content of the plug-in, it’s time to give play to the creative imagination, but I don’t know how to start at the beginning, you can refer to the official website of the document, write is very detailed, although it is in English but direct translation read not particularly strange

The official entry example 1: code.visualstudio.com/docs/extens…

The plugin here is a modified version of the Markdown word count from example 2 on the official website, which counts the number of characters written in any file

New wordCounter. Js

Class WordCounter {constructor(_vscode) {// Pass the vscode object this.vscode = _vscode; this.init(); } init() {var vscode = this.vscode; var StatusBarAlignment = vscode.StatusBarAlignment; var window = this.vscode.window; / / statusBar, is the need to manually release the enclosing statusBar = window. CreateStatusBarItem (StatusBarAlignment. Left); Var Disposable = []; / / event at the time of registration, automatically fill a callback the dispose to array the window. The onDidChangeTextEditorSelection (enclosing updateText, this, the disposable); This.Disposable = vscode.disposable. From (disposable); this.updateText(); this.statusBar.show(); } updateText() {// Now it's about 2 am. var window = this.vscode.window; this.editor = window.activeTextEditor; var content = this.editor.document.getText(); var len = content.replace(/[\r\n\s]+/g, '').length; This.statusbar. text = 'this.statusbar. text... ${len} has already been typed; Dispose () {dispose(); dispose() {dispose(); dispose(); this.statusBar.dispose(); } } module.exports = WordCounter;Copy the code

Modify the extension. Js

Const vscode = require('vscode'); Function activate(context) {var WordCounter = require('./ WordCounter '); var counter = new WordCounter(vscode); / / resources are needed to be released in turn push here to this array context. The subscriptions. Push (counter); } exports.activate = activate; // this method is called when your extension is deactivated function deactivate() { } exports.deactivate = deactivate;Copy the code

Modify the package. The json

{"name": "wordcount", "displayName": "wordcount", "description": "wordcount", "version": "0.0.1", "engines": {" vscode ":" ^ 1.29.0 "}, "categories" : [" Other "], "activationEvents" : / "*", "main" : ". / the extension ", "contributes" : { "commands": [ { "command": "extension.sayHello", "title": "Hello World" } ] }, "scripts": { "postinstall": "node ./node_modules/vscode/bin/install", "test": "node ./node_modules/vscode/bin/test" }, "devDependencies": {" typescript ":" ^ 3.1.4 ", "vscode" : "^ 1.1.25", "eslint" : "^ 4.11.0", "@ types/node" : "^ 8.10.25", "@ types/mocha" : "^ 2.2.42}}"Copy the code

Then shift+ CTRL + P to enter the plugin environment to test the number of characters in the status bar

Native use plug-ins

After the plug-in is written, how to use it in the process of VSCode development normally? This section directly copies the developed plug-in project to the directory where VSCode stores the plug-in installation

C:\Users\your name\.vscode\extensions
Copy the code

After the plugin project is copied in, restart VSCode and open a new project at will. You can also see the character statistics function in the status bar

Plug-in release

The official plug-in release process: code.visualstudio.com/docs/extens…

Visual Studio Code’s application marketplace is based on Microsoft’s own Azure DevOps, where plug-ins are authenticated, hosted, and managed. To publish to the app market, you must have an App Publisher account

1. Register the account aka.ms/SignupAzure… 2. After obtaining the token, log in and select Security as shown in the following figure. Note that the token must be copied and saved, because it will not be displayed after entering the second time

3. Install NPM install -g vsCE 4. Run the vsce command to create a publisher account: vsce create-publisher your-publisher-name 5. Vsce login your-publisher-name 6. Release vsce publish

After the success of the launch, can visit marketplace.visualstudio.com/search?targ… To view

You can also search for installation in VSCode

Posted here there are a few common Error: Error 1: Error: Missing publisher name. Learn more:code.visualstudio.com/docs/extens… Solution: In package.json, add the newly created publishing account to “publisher”:” Your name”,

Error 2 :Make sure to edit the readme. md file before you publish your extension

Error 3: A ‘repository’ field is missing from the ‘package.josn’ manifest file.Do you want to continue? [Y /n] Solution: y

The code download

Visit Baidu web disk address to download directly pan.baidu.com/s/1-veAViLS…