Vscode plug-in development practice and demo source code

Writing in the front

He that will do his work well must first sharpen his tools. As an excellent development tool, vscode provides great convenience to my daily development work. This is especially true of its expansion mechanics.

However, when I was doing the annual professional line task recently, I needed to use the beautiful line end comment alignment. After searching, I found that vscode official plug-in market did not have what I wanted.

So I want to develop such a thing, on the one hand to facilitate their own use, on the one hand can also learn under vscode plug-in development, release method, on the other hand if released to help others better.

Main Contents of this paper

This article was written after I finished developing the plug-in and released it, documenting the method.

It mainly includes two aspects:

Main process of vscode plug-in development and release
Vscode plug-in demo source:

(1) Reference 1, annotation alignment plugin github.com/febaoshan/v…

(2) Refer to the console. Log plugin github.com/febaoshan/v…

Three (3) reference, git commit to submit quickly fill in the plugin marketplace.visualstudio.com/items?itemN…

Main process of vscode plug-in development and release

Preparation before plug-in development: VScode, NodeJS, VScode plug-in production tool, Git, Microsoft account
Plug-in development: plug-in ideas, official document review
Plugin publishing: package, upload, plugin market operation
Plug-in maintenance: package, upload, plug-in market operation after update iteration

Preparation before plug-in development:

Vscode, Nodejs, Git, Microsoft account, no need to say much about this preparation.

VS Code plug-in production tools: Yeoman and VS Code Extension Generator are officially recommended. Install with the following command:

npm install -g yo generator-code

At this point, you are ready for development.

Plug-in development

Initialize the code using production tools

Execute the following command

yo code

The results are as follows:

$yukio okamoto, code _ -- -- -- -- -- _ ╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ | | │ Welcome to the Visual │ | - (o) - | │ Studio code Extension │ ` -- -- -- -- -- -- -- -- -- ´ │ the generator! │ (_ ´ U ` _) ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯ / ___A___ \ | to | __ '. ___. '__ ´ ` | ° ´ ` Y? What type of extension do you want to create? (Use arrow keys) > New Extension (TypeScript) New Extension (JavaScript) New Color Theme New Language Support New Code Snippets New Keymap New Extension Pack (Move up and down to reveal more choices)Copy the code

Select the type to be created by pressing up and down keys on the OS. Type 1, 2, and 3 on Win and press Enter to select the type.

Follow the instructions for other steps. The directory structure is as follows:

├─.vscode // Resource Configuration File ├─ Changelog.md // Change record file, ├─ jsconfig.json ├─ package.json // Resource Config ├─ readme.md // ├─ ├─ vsc-extension-quickstart.md │ ├─ vsc-extension-quickstart.mdCopy the code

Ps: The document directories of other project types may be different. The generated file directories prevail. Under the JS extension project, the most important ones are extension.js and package.json.

Plug-in conception

Inspiration comes from life, work, this thought can do. For example, I have a line end comment alignment (the directory comment above is a plugin I just developed).

The details about comment-aligner are not written here. If you are interested, download the source code, which contains the full comments. The logic is simple.

Review documentation development

It has to be said here that the official documentation is not pretty, or at least not very friendly. Portal code.visualstudio.com/api/referen… . English is really difficult to use chrome one key translation, translation is accurate.

For basic applications, it’s enough to focus on window-related code, but simple functionality can be achieved with the basic code generated by Yo Code.

Plug-in release

Install packaging and publishing tools

npm install -g vsce

Create publisher

Create a publisher on the plugin marketplace website

perfect`package.json`

In package.json, THERE is a custom configuration of VScode. When executing the package command, VScode will check itself, and there will be a message if the configuration is wrong or missing.

The more complete information is as follows (below is my package.json file for Comment Aligner) :

{ "name": "comment-aligner", "displayName": "comment aligner", "description": "A tool for aligning the inline trailing comment", "version": "1.0.1", "Publisher ": "Huangbaoshan ", // Publisher, publisher ID "icon" created on official website of plug-in market: "icon/icon.png", // plug-in icon, icon used for display in plug-in market; Can be placed in the same directory, packaging will bring "repository": {"type": "git", "url":"https://github.com/gitshan/vscode-extension-comment-aligner.git" }, "engines": { "vscode": "^1.30.0" // vscode version number}, "categories": ["Other" // vscode plugin category, will be shown in the corresponding category in the plugin market], "activationEvents": [ "onCommand:extension.commentaligner" ], "main": "./extension.js", "contributes": { "commands": [{ "command": }]}, "scripts": {"postinstall": {"postinstall": {"postinstall": {"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

In the development of the console plug-in, found that the above package. J jons are not perfect, so attached a slightly all points, forwarded from www.cnblogs.com/liuxianan/p…

{// the name of the plug-in, all lowercase, no space "name": "vscode-plugin-demo", // the friendly displayName of the plug-in, used for display in the app market, supporting Chinese "displayName": "VSCode plug-in demo", // description" description": "VSCode plug-in demo highlights ", // keywords for the application market search "keywords": ["vscode", "plugin", "demo"], // Version number "version": "1.0.0", // Publisher, if you want to publish to the market, this name must be the same as the publisher" publisher": "Sxei ", // indicates the lowest supported version of VScode for the plug-in. "engines": {"vscode": "^1.27.0"}, // Plug-in application market category, optional values:  [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, For Extension Packs, Language Packs] "Categories ": ["Other"] "Images /icon. PNG ", // an extended array of activationEvents, which can be extended by activationEvents, more on activationEvents later: [onCommand: extension. "sayHello"], / / the plugin's main entrance to the "main" : ". / SRC/extension ", / / contribution points, the entire plug-in is the most important one of the most configuration items "contributes" : {// Plugin configuration item "configuration": {"type": "object", // config item title, which will be displayed in vscode Settings page "title": "vscode-plugin-demo", "properties": {/ / here I just wrote 2 Settings, configure your nickname "vscodePluginDemo. YourName" : {" type ":" string ", "default" : "guest", "description" : ShowTip: {"type": "Boolean ", "default": true, "description": "Should a welcome prompt be displayed at every startup!" SayHello: [{"command": "extension.sayHello", "title": "Hello World"}], [{" command ":" the extension. SayHello ", "key" : "CTRL + f10", "MAC" : "CMD + f10" and "when" : "editorTextFocus}], / / the menu" menus ": "When ": "editorFocus", "command": {// editor/context": [{// when": "editorFocus", "command": "Group ": "navigation@6"}, {"when": "editorFocus", "command": "extension.demo.getCurrentFilePath", "group": "navigation@5"}, {// "when": "editorFocus && resourceLangId == javascript", "command": "extension.demo.testMenuShow", "group": "z_commands" }, { "command": "extension.demo.openWebview", "group": "Navigation"}], // display text "editor/title": [{"when": "editorFocus && resourceLangId == javascript", "command": "extension.demo.testMenuShow", "group": "Navigation"}], // Editor title/context": [{"when": "resourceLangId == javascript", "command": "The extension. The demo. TestMenuShow", "group" : "navigation"}], / / resource manager right-click menu "explorer/context" : [{" command ": "extension.demo.getCurrentFilePath", "group": "navigation" }, { "command": "extension.demo.openWebview", "group": "Navigation"}]}, // Snippets "snippets": [{"language": "javascript", "path": "./snippets/javascript.json" }, { "language": "html", "path": "./snippets/html.json"}], // customize the new Activitybar icon, which is the large icon "viewsContainers" in the left sidebar: {"activitybar": [{"id": "BeautifulGirl ", "title": "beautifulGirl", "icon": "images/ beautifulgirl.svg"}]}, // customize the implementation of the view in the sidebar: {// and the viewsContainers ID correspond to "beautifulGirl": [{" ID ": "beautifulGirl1", "name": "domestic beauty"}, {"id": "BeautifulGirl2", "name" : "foreign beauties"}, {" id ":" beautifulGirl3 ", "name" : "freak"}]}, / / "iconThemes" icon theme: [{" id ": "TestIconTheme ", "label": "testIconTheme", "path": "./theme/icon-theme.json"}]}, // same as NPM scripts" scripts": { "postinstall": "node ./node_modules/vscode/bin/install", "test": "Node. /node_modules/vscode/bin/test"}, "devDependencies": {"typescript": "^2.6.1", "vscode": "^ 1.1.6 eslint", ""," ^ 4.11.0 ", "@ types/node" : "^ 7.0.43", "@ types/mocha" : "^ 2.2.42"}, / / behind this a few should not introduce "license" : "SEE LICENSE IN LICENSE.txt", "bugs": { "url": "https://github.com/sxei/vscode-plugin-demo/issues" }, "repository": {" type ":" git ", "url" : "https://github.com/sxei/vscode-plugin-demo"}, / / home page "homepage" : "https://github.com/sxei/vscode-plugin-demo/blob/master/README.md" }Copy the code

packaging

Run the following command:

vsce package

In the root directory you get the: comment-aligner-1.0.1.vsix file

release

Method 1: Use VSCE publish tool of VSCE to publish, but it is cumbersome to configure Personal Access Token on the official website. Please refer to the official tutorial
Method two: upload and publish directly on the official website

After uploading, click OK to publish successfully.

Release inspection

Check the status of the plugin market website
Search the plugin marketplace website
Search on the vscode plug-in page

All the above indicates that the release has been successful.

The plugin maintenance

When bugs are found and new features are developed, the plugin needs to be updated. Simply upload the newly produced.vsix package to the official website.

The last

I hope it works. Thank you.