寫在前面 分享一個vscode插件background(用於改變背景)。點擊直接跳到vscode插件開發步驟
做vscode的插件，很久就有這個想法了，但是一直因為這樣，那樣的事情耽誤，放棄了N次。不過確實讓我對文檔有了個直觀的了解。
上周末的時候因為測試妹紙要加班測試，讓我也到公司加班，等待可能出現的bug這理由聽着就扯淡
當然一群妹紙都到公司等着了，我也必須去......於是在等待bug的時間里看了看官方的文檔，在這里寫了點自己的摸索結果。
本文分為2部分，1是分享自己做的一個demo，2個分享自己摸索的一些制作插件踩完坑后的一點經驗。
官方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的支持
安裝:
有3個命令:
效果圖:
具體怎么用應該能看懂吧，，，每個操作步驟我都配了中英文提示，還有水印提示。如果還是不明白，可以隨便玩，玩壞了大不了重裝唄 =。=
vscode 插件開發步驟，一點經驗
說再多也不如做一遍，這里我們一起來一步步做一個插件。就做官網的那個demo，wordCounter,用於統計當前頁單詞量。 官網是TypeScript，我不會...這里就用nodejs來示例。
一、搭建環境，准備工作
首先當然是安裝nodejs跟vscode，這里我略過了，不用我多嘴。
vscode 團隊，為插件開發提供了一個工具，先全局安裝這個，然后執行 yo code 來開始我們的工作。
npm install -g yo generator-code
yo code
我們選第二項，這里需要注意下：一般情況可以用鍵盤的 ↑ ↓ 鍵來調整，但是win10有時候按了沒反應，這時候可以輸入2回車，來達到同樣的目的。
然后會出現以下一系列選項，一路回車就好...... 相信起名字不會難道各位，其實我自己很多時候為一個變量的命名會耽誤很久，改很多次。囧。
然后它會自動執行 npm install 來加載vscode這個依賴。我這里網不行所以直接差掉，自己用 cnpm install 來安裝，沒有影響，可以直接關閉。
准備工作到此完畢，我們開始搞代碼。
二、結構簡介
..
三、Hello World，vscode加載插件的流程
扯了那么多，先看看helloworld的效果吧。直接按F5
不出意外，會彈出一個提示消息：“Hello World”
VSCODE ，是如何加載並運行插件的。
這里我參考了不少資料，官網的文檔，和其它的一些文章。四級的英語水平，頭一次感覺到稍許作用。
- 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 告知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;
四、稍稍改動，做一個自啟動統計詞量的插件
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啟動：
...
五、Demo，以及發布的問題
發布到插件市場，其實挺麻煩的。流程大概是這樣...如果我沒記錯。
- 1 注冊microsoft賬號
- 2 注冊開發者賬號
- 3 申請token用於遠程發布
- 4 本地安裝vsce
- 4 本地利用token登陸
- 5 配置文件，進行發布
- 發布流程 建議前往 https://code.visualstudio.com/docs/tools/vscecli查閱詳細步驟 0.0
如果只是自己用就方便多了，直接把項目拷貝到 xxx\.vscode\extensions 文件夾下
Windows %USERPROFILE%\.vscode\extensions
Mac $HOME/.vscode/extensions
Linux$HOME/.vscode/extensions
寫的比較倉促，有錯誤的地方請指正出來我盡快改。
.