VSCODE 插件初探

時間 2019-11-22

標籤 vscode 插件初探简体版

原文原文鏈接

作vscode的插件，好久就有這個想法了，可是一直由於這樣，那樣的事情耽誤，放棄了N次。不過確實讓我對文檔有了個直觀的瞭解。前端

上週末的時候由於測試妹紙要加班測試，讓我也到公司加班，等待可能出現的bug這理由聽着就扯淡node

固然一羣妹紙都到公司等着了，我也必須去......因而在等待bug的時間裏看了看官方的文檔，在這裏寫了點本身的摸索結果。git

本文分爲2部分，1是分享本身作的一個demo，2個分享本身摸索的一些製做插件踩完坑後的一點經驗。github

官方vscode插件文檔 https://code.visualstudio.com/docs/extensions/overview

vscode-background插件地址 https://marketplace.visualstudio.com/items?itemName=shalldie.background

Github地址 https://github.com/shalldie/vscode-background

作了一個vscode背景插件，你們能夠試試F1輸入 ext install background 來試用，僅測試了win7，win10.
by：2016/5/19 Cross all themes! 已支持全部主題!
by:2016/8/29 前幾天，添加了對mac的支持chrome

安裝:npm

有3個命令:json

效果圖:api

具體怎麼用應該能看懂吧，，，每一個操做步驟我都配了中英文提示，還有水印提示。若是仍是不明白，能夠隨便玩，玩壞了大不了重裝唄 =。=

說再多也不如作一遍，這裏咱們一塊兒來一步步作一個插件。就作官網的那個demo，wordCounter,用於統計當前頁單詞量。官網是TypeScript，我不會...這裏就用nodejs來示例。數組

1、搭建環境，準備工做

首先固然是安裝nodejs跟vscode，這裏我略過了，不用我多嘴。electron

vscode 團隊，爲插件開發提供了一個工具，先全局安裝這個，而後執行 yo code 來開始咱們的工做。

npm install -g yo generator-code

yo code

咱們選第二項，這裏須要注意下：通常狀況能夠用鍵盤的 ↑ ↓ 鍵來調整，可是win10有時候按了沒反應，這時候能夠輸入2回車，來達到一樣的目的。

而後會出現如下一系列選項，一路回車就好...... 相信起名字不會難道各位，其實我本身不少時候爲一個變量的命名會耽誤好久，改不少次。囧。

而後它會自動執行 npm install 來加載vscode這個依賴。我這裏網不行因此直接差掉，本身用 cnpm install 來安裝，沒有影響，能夠直接關閉。

準備工做到此完畢，咱們開始搞代碼。

2、結構簡介

3、Hello World，vscode加載插件的流程

扯了那麼多，先看看helloworld的效果吧。直接按F5

不出意外，會彈出一個提示消息：「Hello World」

VSCODE ，是如何加載並運行插件的。

這裏我參考了很多資料，官網的文檔，和其它的一些文章。四級的英語水平，頭一次感受到稍許做用。

1.package.json 告知vscode，本身定義的事件，和觸發事件的方式

	"activationEvents": [
		"onCommand:extension.sayHello"
	],
	"contributes": {
		"commands": [{
			"command": "extension.sayHello",
			"title": "Hello World"
		}]
	}

activationEvents是定義事件觸發的時間，contributes是定義有哪些事件。commands 中的command和title是事件的名稱，和顯示給用戶的內容(由於這裏觸發時間是在用戶command的時候，即在F1中選擇命令。)

先說定義的事件，事件名稱，我的建議仍是加上本身的命名空間。好比：extension.插件名.事件名 。各有所愛吧，我以爲這樣直觀一些。定義的command事件，就能夠在 F1 中找到對應的命令，用起來很方便。這裏是用戶點擊了【Hello World】這個項，就觸發了【extension.sayHello】這個事件。

而後是 activationEvents ，這個表示事件被激活的時間。這裏是指：用戶在F1中選擇了命令的時候。以後會介紹其它的激活方式。

2.extension.js 程序入口

我使用的是註釋的方式來描述extension.js裏面的各個地方的做用：

// vscode這個包，包含了裏面全部的api
var vscode = require('vscode');

// 在插件被激活的時候，這個方法會被調用
function activate(context) {

	//這是註冊在package.json裏面的事件，且是command方式觸發的
	//注意：這裏的command註冊事件，返回的是一個相似於「非託管資源的對象」，難道是實現了「idispossible接口」麼...吐個嘈
	//這個須要手動釋放
	var disposable = vscode.commands.registerCommand('extension.sayHello', function () {
		
		//用戶選擇這個command指令的時候，就會觸發裏面的方法
		//這裏是顯示了一個helloworld提示框
		vscode.window.showInformationMessage('Hello World!');
	});
	
	//須要釋放的資源都在這裏依次push到這個數組裏面
	//注意，這些非託管的資源，都含有dispose方法，本身封裝的對象，若是有須要手動釋放的資源，請也實現dispose方法吧
	context.subscriptions.push(disposable);
}
exports.activate = activate;

4、稍稍改動，作一個自啓動統計詞量的插件

題外話：個人瞭解，vscode是基於electron作的，而electron好像是在新版本chrome出來一週仍是一個月，就被更新chrome到electron，因此在跟vscode 的前端交互這裏，前端方面不用考慮兼容寫法，什麼新語法糖隨便用...

1.修改package.json

	"activationEvents": [   // "*" 表示在vscode啓動的時候，就啓動插件了。不太友好，謹慎使用。
		"*"
	],
	// "contributes": {     // 自啓動插件，不須要命令
	// 	"commands": [{
	// 		"command": "extension.sayHello",
	// 		"title": "Hello World"
	// 	}]
	// },

2.添加wordCounter.js 文件

class WordCounter {
    constructor(_vscode) {        //構造函數，傳入vscode對象
        this.vscode = _vscode;
        this.init();
    }

    init() {                      //初始化
        var vscode = this.vscode;
        var StatusBarAlignment = vscode.StatusBarAlignment;
        var window = this.vscode.window;

        //statusBar，是須要手動釋放的
        this.statusBar = window.createStatusBarItem(StatusBarAlignment.Left);

        //跟註冊事件相配合的數組，事件的註冊，也是須要釋放的
        var disposable = [];
        //事件在註冊的時候，會自動填充一個回調的dispose到數組
        window.onDidChangeTextEditorSelection(this.updateText, this, disposable);

        //保存須要釋放的資源
        this.disposable = vscode.Disposable.from(disposable);

        this.updateText();
        this.statusBar.show();
    }

    updateText() {       //如今快凌晨兩點，偷個懶早點睡，臨時改爲字符數量了。
        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 = `啦啦啦...已經敲了${len}個字符了`;
    }

    dispose() {  //實現dispose方法
        this.disposable.dispose();
        this.statusBar.dispose();
    }
}

module.exports = WordCounter;

3.在入口 extension.js中調用一下wordCounter.js

// vscode這個包，包含了裏面全部的api
var vscode = require('vscode');

// 在插件被激活的時候，這個方法會被調用
function activate(context) {

	var WordCounter = require('./src/wordCounter');
	var counter = new WordCounter(vscode);

	//須要釋放的資源都在這裏依次push到這個數組裏面
	//注意，這些非託管的資源，都含有dispose方法，本身封裝的對象，若是有須要手動釋放的資源，請也實現dispose方法吧
	// context.subscriptions.push(disposable);

	context.subscriptions.push(counter);

}
exports.activate = activate;

簡單看一下效果，F5啓動：

...