VSCode 建立一個外掛，如何建立一個外掛，VS Code 的外掛既然是一個 Node.js 應用，那麼官方自然也會提供了基於 NPM 的工具鏈來幫助你建立和維護外掛。
首先你需要的是 yeoman，一個腳手架工具。通過 yeoman 你可以快速建立程式碼模板，如下所示：

npm install -g yeoman

然後你需要安裝 VS Code 的模板：

npm install -g generator-code

有了腳手架，你就可以建立一個 VS Code 的外掛模板了。接下來執行：

yo code myextension

請注意，第三個引數將是你新建立的外掛的資料夾名字。

由上圖，你可以看到有七個外掛模板：

前兩個是通過程式設計來提供外掛功能，你可以選擇 TypeScript 或者 JavaScript，結果都是類似的，因為 TypeScript 最後也需要被編譯成 JavaScript 再發布；第三個是主題外掛，你可以將你自己建立的主題分享給其他人；第四個是語言支援，也就是語法高亮、語言定義等；第五個是程式碼片段的分享；第六個則是分享快捷鍵；第七個就是對多個外掛進行組合分享。

關於主題（Color Theme）、快捷鍵（Keymap）、程式碼片段（Code Snippet）的分享，我會在下一講進行介紹。語言支援之後也會涉及。今天，我們先講述第二個選項 “New Extension (JavaScript)”。

接下來，你會依次被提示輸入外掛的名字、介紹、想要用哪個賬號釋出、是否要開啟 type check以及是否要使用 git 等。你可以暫時按照我的樣例進行輸入，之後也可以再根據需要修改。

輸入全部問題後，指令碼就會自動地建立檔案，安裝需要的 dependencies。全部結束後，指令碼會提示你，可以執行下面的指令碼開啟這個外掛的程式碼。

cd myextension code .

VS Code 的腳手架，預設為我們建立了不少的檔案。不過像 .gitignore、.eslintrc.json、README.md 這些檔案的作用想必你已經比較熟悉了。對於這個外掛而言，最重要的是下面幾個檔案：

package.json 我上面提到了，VS Code 的外掛就是一個 Node.js 的應用，package.json 裡記錄了這個 Node.js 應用的資訊。同時，外掛的資訊也會被記錄在這個檔案內。 extension.js 這個檔案是當前外掛的全部程式碼。 .vscode 腳手架工具已經為我們提供了除錯配置、任務配置等，有了它們，我們就不用自己花時間書寫了。

好了，下面我們來看看 extension.js 和 package.json。看完它們，你就對 VS Code 外掛是如何執行的有很好的理解的。

extension.js的內容在刪除了所有的註釋後，如下：

const vscode = require('vscode');

function activate(context) {
  console.log('Congratulations,your extension "myextension" is now active!');
  let disposable = vscode.commands.registerCommand('extension.sayHello',function () {
    vscode.window.showInformationMessage('Hello World!');
  });

  context.subscriptions.push(disposable);
}
exports.activate = activate;

function deactivate() {
}
exports.deactivate = deactivate;

第一，我們引用了 vscode 這個庫。通過引用這個庫，我們就能夠使用 VS Code 的外掛 API 了。

第二，我們建立了 activate 函式並且將其輸出。VS Code 的外掛程序在啟用這個外掛時，就是呼叫這個被輸出（export）的函式。也就是說，這個函式，就是這個外掛的入口。

相對應的就是 deactivate 函式，當我們禁用這個外掛或者關閉 VS Code 時，這個函式就會被呼叫了。
下面我們再來看看 activate 這個函式：

function activate(context) {
  console.log('Congratulations,function () {
    vscode.window.showInformationMessage('Hello World!');
  });

  context.subscriptions.push(disposable);
}`

這個函式首先輸出了 log，告訴我們外掛已經被成功激活了。接著，我們使用 vscode.commands.registerCommand註冊一個名為 extension.sayHello的命令，這個命令的實現，是 registerCommand的第二個引數，我們通過呼叫 vscode.window.showInformationMessage ，在介面上調出一個提示框，內容則是 Hello World!。

不過，光有 extension.js ，這個外掛是無法執行的。VS Code 會根據條件來啟用外掛，而這個啟用條件寫在了 package.json 中，那麼我們一起來看下package.json。

{
  "name": "myextension","displayName": "myextension","description": "my extension","version": "0.0.1","publisher": "rebornix","engines": {
    "vscode": "^1.29.0"
  },"categories": [
    "Other"
  ],"activationEvents": [
    "onCommand:extension.sayHello"
  ],"main": "./extension","contributes": {
    "commands": [
      {
        "command": "extension.sayHello","title": "Hello World"
      }
    ]
  },"scripts": {
    "postinstall": "node ./node_modules/vscode/bin/install","test": "node ./node_modules/vscode/bin/test"
  },"devDependencies": {
    "typescript": "^2.6.1","vscode": "^1.1.21","eslint": "^4.11.0","@types/node": "^8.10.25","@types/mocha": "^2.2.42"
  }
}

上面這個檔案，跟普通的 npm 的 package.json 只有三處不同。

第一處是 engines。

"vscode": "^1.29.0"

它指定了執行這個外掛需要的 VS Code 版本。比如 “^1.29.0” 就是說明，要安裝執行這個外掛必須要使用 VS Code 1.29 及以上版本。

第二處是 activationEvents。

"activationEvents": [
  "onCommand:extension.sayHello"
]

這個屬性指定了什麼情況下這個外掛應該被載入並且啟用。在我們這個例子裡，啟用條件是，當用戶想要執行 “extension.sayHello” 這個命令時，就啟用這個外掛。
這個機制能夠保證，當我們需要使用這個外掛的時候，這個外掛才被啟用，儘可能地保證效能和記憶體使用的合理性。

第三處是 contributes。

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

這個屬性指定了，我們這個外掛給 VS Code 添加了一個 command，這個 command 的 id 是 “extension.sayHello”， 跟 extension.js 中寫的一樣。而這個命令的名字，叫做 Hello World。

如果不寫這個屬性的話，VS Code 是不會把這個命令註冊到命令面板中的，我們也就沒法找到這個命令並且執行了。