更多文章請戳VSCode插件開發全攻略系列目錄導航。
寫着前面
學習一門新的語言或者生態首先肯定是從HelloWord開始。
您可以直接克隆我放在GitHub上vscode-plugin-demo 的代碼到本地，然后嘗試修改代碼並運行，也可以使用微軟官方的腳手架vscode-generator-code來生成項目結構，腳手架的使用我們后面再來介紹，先來熟悉一下項目結構。
HelloWorld
項目結構
項目結構其實很簡單，主要是清單文件package.json以及extension.js這個插件入口文件：
package.json部分關鍵內容如下（已省略其它）
{
// 擴展的激活事件
"activationEvents": [
"onCommand:extension.sayHello"
],
// 入口文件
"main": "./src/extension",
// 貢獻點，vscode插件大部分功能配置都在這里
"contributes": {
"commands": [
{
"command": "extension.sayHello",
"title": "Hello World"
}
]
}
}
src/extension.js內容如下：
const vscode = require('vscode');
/**
* 插件被激活時觸發，所有代碼總入口
* @param {*} context 插件上下文
*/
exports.activate = function(context) {
console.log('恭喜，您的擴展“vscode-plugin-demo”已被激活！');
// 注冊命令
context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', function () {
vscode.window.showInformationMessage('Hello World!');
}));
};
/**
* 插件被釋放時觸發
*/
exports.deactivate = function() {
console.log('您的擴展“vscode-plugin-demo”已被釋放！')
};
解讀
承如上述代碼：
main定義了整個插件的主入口；- 我們在
contributes.commands里面注冊了一個名為extension.sayHello的命令，並在src/extension.js中去實現了它（彈出一個Hello World的提示）； - 但是僅僅這樣還不夠，命令雖然定義了，但是vscode還不知道啥時候去執行它，還需要在
activationEvents添加上onCommand:extension.sayHello用來告訴vscode，當用戶執行了這個命令操作時去執行前面我們定義的內容； - 除了
onCommand之外，還有onView、onUri、onLanguage等等，具體我們后面會詳細講到。
運行調試
默認情況下，工程已經幫我們配置好了調試相關參數（有興趣的可以查看.vscode/launch.json文件的寫法），只需要到調試面板選中要調試的項目(僅僅是第一次需要，后續會自動記住上次調試的項目)，然后按下F5就會彈出一個新的vscode窗口：
這個新窗口已經加載了我們的插件，窗口標題會注明擴展開發主機，對於只有單顯示器的同學來說，很容易寫着寫着就忘了哪個是主窗口，哪個是新窗口，所以可以通過這個來區分。
先插句話：
為了描述方便，我們約定，后續把新彈出來的那個窗口叫
新窗口，之前老的那個叫舊窗口。
然后按下Ctrl+Shift+P，輸入HelloWorld執行對應命令，當你發現右下角彈出了HelloWorld的提示時，恭喜你，你已經掌握了你人生第109種新語言了，哈哈，開個玩笑。
添加右鍵菜單和快捷鍵
上面由於我們只是注冊了命令，沒有添加菜單或快捷鍵，調用不方便，所以我們現在添加一下。
打開package.json，按照下述方式添加：
{
"contributes": {
"commands": [
{
"command": "extension.sayHello",
"title": "Hello World"
}
],
// 快捷鍵綁定
"keybindings": [
{
"command": "extension.sayHello",
"key": "ctrl+f10",
"mac": "cmd+f10",
"when": "editorTextFocus"
}
],
// 設置菜單
"menus": {
"editor/context": [
{
"when": "editorFocus",
"command": "extension.sayHello",
"group": "navigation"
}
]
}
}
}
然后重新運行插件，在編輯器的右鍵可以看到如下菜單：
這里我們暫時不對配置項做過渡解讀，后面會有專門篇章來介紹package.json文件的寫法。
關於重新加載
如果修改了擴展代碼，想重新加載的話，可以直接在新窗口上按下Ctrl+R來快速重新加載，也可以先停止，然后再按F5。
關於開發語言
vscode插件可以使用TypeScript來編寫（官方推薦），也可以使用JavaScript，本文統一使用后者，不過使用哪種方式，能實現的功能都是一樣的。
腳手架的使用
終於到腳手架環節了，如果你喜歡干凈的項目的話，可以使用官方腳手架來生成。
安裝腳手架：
npm install -g yo generator-code
然后cd到你的工作目錄，運行yo code：
根據向導一步步選擇即可，沒啥好說的，運行完后就生成了一個干凈的可以直接F5運行的vscode插件工程了。