vscode?插件開發(fā)步驟
說再多也不如做一遍，這里我們一起來一步步做一個(gè)插件壹将。就做官網(wǎng)的那個(gè)demo嗤攻，wordCounter,用于統(tǒng)計(jì)當(dāng)前頁單詞量。 官網(wǎng)是TypeScript诽俯，我不會(huì)...這里就用nodejs來示例妇菱。
一、搭建環(huán)境暴区，準(zhǔn)備工作
首先當(dāng)然是安裝nodejs跟vscode闯团，這里我略過了，不用我多嘴仙粱。
vscode 團(tuán)隊(duì)房交，為插件開發(fā)提供了一個(gè)工具，先全局安裝這個(gè)伐割，然后執(zhí)行?yo code?來開始我們的工作候味。
npm install -g yo generator-code
yo code
我們選第二項(xiàng)刃唤，這里需要注意下：一般情況可以用鍵盤的 ↑ ↓ 鍵來調(diào)整，但是win10有時(shí)候按了沒反應(yīng)白群，這時(shí)候可以輸入2回車尚胞，來達(dá)到同樣的目的。
然后會(huì)出現(xiàn)以下一系列選項(xiàng)帜慢，一路回車就好...... 相信起名字不會(huì)難道各位笼裳，其實(shí)我自己很多時(shí)候?yàn)橐粋€(gè)變量的命名會(huì)耽誤很久，改很多次粱玲。囧侍咱。
然后它會(huì)自動(dòng)執(zhí)行?npm install?來加載vscode這個(gè)依賴。我這里網(wǎng)不行所以直接差掉密幔，自己用?cnpm install?來安裝，沒有影響撩轰，可以直接關(guān)閉胯甩。
準(zhǔn)備工作到此完畢，我們開始搞代碼堪嫂。
二偎箫、結(jié)構(gòu)簡(jiǎn)介
三、Hello World皆串，vscode加載插件的流程
扯了那么多淹办，先看看helloworld的效果吧。直接按F5
不出意外恶复，會(huì)彈出一個(gè)提示消息：“Hello World”
VSCODE 怜森，是如何加載并運(yùn)行插件的。
這里我參考了不少資料谤牡，官網(wǎng)的文檔副硅，和其它的一些文章。四級(jí)的英語水平翅萤，頭一次感覺到稍許作用恐疲。
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，自己定義的事件套么，和觸發(fā)事件的方式
"activationEvents": [
????"onCommand:extension.sayHello"
],
"contributes": {
????"commands": [{
????????"command": "extension.sayHello",
????????"title": "Hello World"
????}]
}
activationEvents是定義事件觸發(fā)的時(shí)間培己，contributes是定義有哪些事件。commands 中的command和title是事件的名稱胚泌，和顯示給用戶的內(nèi)容(因?yàn)檫@里觸發(fā)時(shí)間是在用戶command的時(shí)候省咨，即在F1中選擇命令。)
先說定義的事件诸迟，事件名稱茸炒，個(gè)人建議還是加上自己的命名空間愕乎。比如：extension.插件名.事件名?。 各有所愛吧壁公，我覺得這樣直觀一些感论。定義的command事件，就可以在 F1 中找到對(duì)應(yīng)的命令紊册，用起來很方便比肄。這里是用戶點(diǎn)擊了【Hello World】這個(gè)項(xiàng)，就觸發(fā)了【extension.sayHello】這個(gè)事件囊陡。
然后是?activationEvents?芳绩，這個(gè)表示事件被激活的時(shí)間。這里是指：用戶在F1中選擇了命令的時(shí)候撞反。之后會(huì)介紹其它的激活方式妥色。
2.extension.js 程序入口
我使用的是注釋的方式來描述extension.js里面的各個(gè)地方的作用：
// vscode這個(gè)包，包含了里面所有的api
var?vscode = require('vscode');
// 在插件被激活的時(shí)候遏片，這個(gè)方法會(huì)被調(diào)用
function?activate(context) {
????//這是注冊(cè)在package.json里面的事件嘹害，且是command方式觸發(fā)的
????//注意：這里的command注冊(cè)事件，返回的是一個(gè)類似于“非托管資源的對(duì)象”吮便，難道是實(shí)現(xiàn)了“idispossible接口”么...吐個(gè)嘈
????//這個(gè)需要手動(dòng)釋放
????var?disposable = vscode.commands.registerCommand('extension.sayHello', function?() {
????????//用戶選擇這個(gè)command指令的時(shí)候笔呀，就會(huì)觸發(fā)里面的方法
????????//這里是顯示了一個(gè)helloworld提示框
????????vscode.window.showInformationMessage('Hello World!');
????});
????//需要釋放的資源都在這里依次push到這個(gè)數(shù)組里面
????//注意，這些非托管的資源髓需，都含有dispose方法许师，自己封裝的對(duì)象，如果有需要手動(dòng)釋放的資源僚匆，請(qǐng)也實(shí)現(xiàn)dispose方法吧
????context.subscriptions.push(disposable);
}
exports.activate = activate;
四微渠、稍稍改動(dòng)，做一個(gè)自啟動(dòng)統(tǒng)計(jì)詞量的插件
題外話：我的了解咧擂，vscode是基于electron做的敛助，而electron好像是在新版本chrome出來一周還是一個(gè)月，就被更新chrome到electron屋确，所以在跟vscode 的前端交互這里纳击，前端方面不用考慮兼容寫法，什么新語法糖隨便用...
1.修改package.json
"activationEvents": [?? // "*" 表示在vscode啟動(dòng)的時(shí)候攻臀，就啟動(dòng)插件了焕数。不太友好，謹(jǐn)慎使用刨啸。
????"*"
],
// "contributes": {???? // 自啟動(dòng)插件堡赔，不需要命令
//? "commands": [{
//????? "command": "extension.sayHello",
//????? "title": "Hello World"
//? }]
// },
2.添加wordCounter.js 文件
class?WordCounter {
????constructor(_vscode) {??????? //構(gòu)造函數(shù)，傳入vscode對(duì)象
????????this.vscode = _vscode;
????????this.init();
????}
????init() {????????????????????? //初始化
????????var?vscode = this.vscode;
????????var?StatusBarAlignment = vscode.StatusBarAlignment;
????????var?window = this.vscode.window;
????????//statusBar设联，是需要手動(dòng)釋放的
????????this.statusBar = window.createStatusBarItem(StatusBarAlignment.Left);
????????//跟注冊(cè)事件相配合的數(shù)組善已，事件的注冊(cè)灼捂，也是需要釋放的
????????var?disposable = [];
????????//事件在注冊(cè)的時(shí)候，會(huì)自動(dòng)填充一個(gè)回調(diào)的dispose到數(shù)組
????????window.onDidChangeTextEditorSelection(this.updateText, this, disposable);
????????//保存需要釋放的資源
????????this.disposable = vscode.Disposable.from(disposable);
????????this.updateText();
????????this.statusBar.show();
????}
????updateText() {?????? //現(xiàn)在快凌晨?jī)牲c(diǎn)换团，偷個(gè)懶早點(diǎn)睡悉稠，臨時(shí)改成字符數(shù)量了。
????????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 = `啦啦啦...已經(jīng)敲了${len}個(gè)字符了`;
????}
????dispose() {? //實(shí)現(xiàn)dispose方法
????????this.disposable.dispose();
????????this.statusBar.dispose();
????}
}
module.exports = WordCounter;
3.在入口?extension.js中調(diào)用一下wordCounter.js
// vscode這個(gè)包艘包，包含了里面所有的api
var?vscode = require('vscode');
// 在插件被激活的時(shí)候的猛，這個(gè)方法會(huì)被調(diào)用
function?activate(context) {
????var?WordCounter = require('./src/wordCounter');
????var?counter = new?WordCounter(vscode);
????//需要釋放的資源都在這里依次push到這個(gè)數(shù)組里面
????//注意，這些非托管的資源想虎，都含有dispose方法卦尊，自己封裝的對(duì)象，如果有需要手動(dòng)釋放的資源舌厨，請(qǐng)也實(shí)現(xiàn)dispose方法吧
????// context.subscriptions.push(disposable);
????context.subscriptions.push(counter);
}
exports.activate = activate;
簡(jiǎn)單看一下效果岂却，F(xiàn)5啟動(dòng)：
五、Demo裙椭，以及發(fā)布的問題
發(fā)布到插件市場(chǎng)淌友，其實(shí)挺麻煩的。流程大概是這樣...如果我沒記錯(cuò)骇陈。
1?注冊(cè)microsoft賬號(hào)
2?注冊(cè)開發(fā)者賬號(hào)
3?申請(qǐng)token用于遠(yuǎn)程發(fā)布
4?本地安裝vsce
4?本地利用token登陸
5?配置文件，進(jìn)行發(fā)布
發(fā)布流程?建議前往?https://code.visualstudio.com/docs/tools/vscecli查閱詳細(xì)步瑰抵；
如果只是自己用就方便多了你雌，
直接把項(xiàng)目拷貝到?xxx\.vscode\extensions文件夾下
Windows?%USERPROFILE%\.vscode\extensions
Mac?$HOME/.vscode/extensions
Linux$HOME/.vscode/extensions
