更多文章請戳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外掛工程了。