Probe into Vscode plug-in

Write in front share a Vscode plugin background (for changing the background). Click to jump directly to the Vscode plugin development step

Do Vscode plug-in, long time have this idea, but always because of this, such things delay, give up n times. But it does give me a visual understanding of the document.

Last weekend because the test sister paper to work overtime test, let me also to work overtime, waiting for possible bugs这理由听着就扯淡

Of course a group of sister paper is waiting for the company, I must go ... So in the time of waiting for the bug to look at the official documents , here to write a bit of their own results.

This article is divided into 2 parts, 1 is to share their own to do a demo,2 to share their own exploration of some of the production plug-in after the pit of a little experience.

official Vscode Plugin documentationHttps://code.visualstudio.com/docs/extensions/overviewVscode-background Plugin AddressHttps://marketplace.visualstudio.com/items?itemName=shalldie.backgroundGitHub AddressHttps://github.com/shalldie/vscode-background

Do a vscode background plugin, you can try F1 input ext install background to try, only tested WIN7,WIN10, currently only support the default theme:

Installation:

There are 3 commands:

:

Specific how to use should be able to understand,,, each operation step I have a Chinese and English tips, as well as the watermark hint. If still do not understand, can play casually, play bad big deal re-install Bai =. =vscode plug-in development steps, a little experience

Say no more than to do it again, here we come together step by step to do a plug-in. On the official network of the Demo,wordcounter, used to count the current page word volume. The official website is typescript, I will not ... Here is an example with Nodejs.

I. Setting up the environment and preparing for work

First of all of course is installed Nodejs and Vscode, here I skipped, do not have my mouth.

The Vscode team, which provides a tool for plug-in development, installs this globally and then executes yo code to begin our work.

npm install-g yo Generator-code

Yo code

We choose the second item, here need to note: The general situation can be adjusted with the keyboard ↑↓ key, but win10 sometimes pressed the response, this time can enter 2 return to the car, to achieve the same purpose.

Then the following series of options will appear, all the way to the return ... Believe that the name will not everyone, in fact, I myself many times for a variable name will be delayed for a long time, changed many times. 囧

Then it will automatically execute npm install to load Vscode this dependency. I do not have a network here, so the direct difference, I use cnpm install to install, no impact, can be directly closed.

Now that we're ready to work, we're going to start coding.

Second, the structure of the introduction

..

Third, Hello World,vscode loading plug-in process

Pull so much, first look at the effect of HelloWorld. Press F5 directly

No surprises, a message pops up: "Hello World"

Vscode, is how to load and run the plugin.

Here I refer to a lot of information, official website of the documents, and other articles. Level four English, the first time to feel a little effect.

• Https://code.visualstudio.com/docs/extensionAPI/activation-events
• http://www.3fwork.com/b102/002764MYM005691/
• Https://code.visualstudio.com/docs/extensionAPI/extension-manifest

1.package.json informs Vscode about the events that they define, and how they trigger events

"Activationevents": ["OnCommand:extension.sayHello"], "contributes": {"Commands": [{"Command": "Extension.sayhello" , "title": "Hello World"}]}

activationEventsIs the time that the event is triggered, and contributes what events are defined. Command and title in commands is the name of the event, and the content displayed to the user (because the trigger time here is the command in the user, that is, in F1. )

First, define the event, event name, personal suggestion or add your own namespace. For example: extension.插件名.事件名 . Each their own, I think it's a little more intuitive. Defined command events, you can find the corresponding commands in the F1, which is convenient to use. Here is the user click on the "Hello world" This item, it triggered the "Extension.sayhello" this event.

Then activationEvents , this indicates the time when the event was activated. This means: When the user chooses the command in F1. Other activation methods will be described later.

2.extension.js Program Entry

I use annotations to describe the role of various places in Extension.js:

Vscode This package, contains all of the inside Apivar Vscode = require (' Vscode '),//When the plugin is activated, this method will be called function activate (context) {// This is registered in the Package.json inside the event, and is the command mode trigger//NOTE: Here the command register event, return is a similar to "Unmanaged Resources object", is the implementation of "Idispossible interface" ... Spit a noisy//this need to manually release var disposable = Vscode.commands.registerCommand (' Extension.sayhello ', function () {// When the user chooses this command command, it will trigger the inside method//Here is a HelloWorld hint box vscode.window.showInformationMessage (' Hello world! ') is displayed; /The resources that need to be freed are then sequentially push into this array//Note that these unmanaged resources contain the Dispose method, their own encapsulated object, and if there are resources that need to be freed manually, Please also implement the Dispose Method bar Context.subscriptions.push (disposable);} Exports.activate = activate;

Four, a slight change, do a self-starting statistics of the amount of plug-ins Off topic:I understand that Vscode is based on an electron, and the electron seems to be in the new version of Chrome out of a week or one months, it was updated chrome to electron, so in front of the vscode with the first side of the front-end aspects do not consider compatible wording, What new grammar sugar to use ...

1. Modify Package.json

"Activationevents": [   //"*" indicates that the plugin was started when the Vscode was started. Not very friendly, use cautiously. "*"],//"contributes": {//     self-booting plugin, no command//"commands": [{//"command": "Extension.sayhello",//"title": "Hello World" // }]// },

2. Add a Wordcounter.js file

Class WordCounter {Constructor (_vscode) {///constructor, incoming Vscode object this.vscode = _vscode;    This.init ();        } init () {//initialize var vscode = This.vscode; var statusbaralignment = Vscode.        Statusbaralignment;        var window = This.vscode.window;        StatusBar, This.statusbar = Window.createstatusbaritem (statusbaralignment.left) that needs to be released manually;        An array that matches the registration event, the registration of events, is also required to release the var disposable = [];        The event is automatically populated with a callback of Dispose to the array window.ondidchangetexteditorselection (This.updatetext, this, disposable) at the time of registration; Save the resource that needs to be freed this.disposable = Vscode.        Disposable.from (disposable);        This.updatetext ();    This.statusBar.show ();        } updatetext () {//Now fast two o'clock in the morning, steal a lazy early to sleep, temporarily changed to the number of characters.        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 = ' La La ...    Already knocked ${len} characters out ';        } Dispose () {//implement Dispose Method This.disposable.dispose ();    This.statusBar.dispose (); }}module.exports = WordCounter;

3. Call the Wordcounter.js in the portal extension.js

Vscode This package, contains all of the inside Apivar Vscode = require (' Vscode ');//When the plugin is activated, this method is called function activate (context) {var WordCounter = require ('./src/wordcounter '), var counter = new WordCounter (vscode);//The resources that need to be freed are then push into the array here and there//note, These unmanaged resources contain the Dispose method, their own encapsulated object, and if there are resources that need to be freed manually, implement the Dispose method too//Context.subscriptions.push (disposable); Context.subscriptions.push (counter);} Exports.activate = activate;

Simply look at the effect, F5 start:

...

V. Demo, and issues of release

Download WordCounter Plugin Project

Publishing to the plug-in market, in fact, quite troublesome. The process is probably like this ... If I remember correctly.

• 1 registering a Microsoft account
• 2 Registered developer account
• 3 Request token for remote publishing
• 4 Local Installation Vsce
• 4 Local Use token login
• 5 configuration files for publishing
• Release Process recommendations go to HTTPS://CODE.VISUALSTUDIO.COM/DOCS/TOOLS/VSCECLI for detailed step 0.0

If you just use it for your convenience, copy the project directly to the xxx\.vscode\extensions folder.

Windows%USERPROFILE%\.vscode\extensions

Mac$HOME/.vscode/extensions

Linux$HOME/.vscode/extensions

Write a hasty, the wrong place please correct me as soon as possible to change.

.

Probe into Vscode plug-in