Visual Studio Code擴展

注：本文提到的代碼示例下載地址>How to create a simple extension for VS Code

VS Code 是微軟推出的一款輕量級的代碼編輯器，免費，開源，支持多種語言，還能安裝各種擴展。沒有用過的同學可以下載下來感受一下，具體參見官方文檔。

假設VS Code你已經安裝好了，也已經大概玩過一遍了。接下來我們就開始講講怎么創建一個簡單的VS Code擴展。

首先要裝下node.js，然后通過命令行安裝Yeoman，我們要通過這個工具來自動生成擴展代碼：

>npm install -g yo generator-code

安裝完了之后，再在命令行中敲>yo code

擴展支持JavaScript和TypeScript兩種語言編寫，我們這次選擇JavaScript，使用上下鍵來選擇，然后回車，下面輸入你的擴展的各種信息

確認回車后，工具會幫我們生成一個Hello World擴展，我們這邊取的名字是hellocode, 所以擴展所在的文件夾名就是hellocode，打開hellocode

運行>code .

hellocode文件夾將會通過VS Code打開，我們在這個VS Code窗口中按下F5來運行這個擴展，可以看到一個新的VS Code窗口會打開。我們在里面按下Ctrl+Shift+P，在彈出的命令欄中敲Hello World回車，你會看到彈出一個“Hello Worlld!”信息框。

 

 關掉這個窗口，我們來看一下hellocode底下的文件，package.json 里有我們用工具生成代碼的時候寫的一些信息。

 

我們可以在這個里面修改配置，比如把title改成“Hi Code”，那我們調取這個擴展的時候就要敲“Hi Code”而不是“Hello World”了。

    "contributes": {
        "commands": [{
            "command": "extension.sayHello",
            "title": "Hi Code"
        }]
    },

那么彈出信息框的代碼在哪里呢？

我們在extension.js里找到這段代碼，activate 方法中，我們給“extension.sayHello”注冊了方法，方法內容就是，彈出“Hello World!”信息框。

function activate(context) {

    // Use the console to output diagnostic information (console.log) and errors (console.error)
    // This line of code will only be executed once when your extension is activated
    console.log('Congratulations, your extension "testcode" is now active!');

    // The command has been defined in the package.json file
    // Now provide the implementation of the command with  registerCommand
    // The commandId parameter must match the command field in package.json
    let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
        // The code you place here will be executed every time your command is executed

        // Display a message box to the user
        vscode.window.showInformationMessage('Hello World!');
    });

    context.subscriptions.push(disposable);
}

接下來我們稍微修改下這個方法，

function activate(context) {
    // Use the console to output diagnostic information (console.log) and errors (console.error)
    // This line of code will only be executed once when your extension is activated
    console.log('Congratulations, your extension "hellocode" is now active!');
    // The command has been defined in the package.json file
    // Now provide the implementation of the command with  registerCommand
    // The commandId parameter must match the command field in package.json
    let disposable = vscode.commands.registerCommand('extension.sayHello', SelectItem);
    context.subscriptions.push(disposable);
}

function SelectItem() {
    vscode.window.showQuickPick(["a", "b"]).then(function (selected) {
        if(selected){
        vscode.window.showInformationMessage("Item '"+selected+"' has been selected!");}
    });
}

我們在彈出信息框之前，調用了一個VC Code 的API，顯示一個快速選擇的列表，當用戶選擇之后，把選中的內容顯示在信息框中。

按下F5來debug一下，

 

我們可以在extension.js中添加斷點進行一步步調試，這邊我就不一步步的放截圖了，大家可以自己嘗試着去做一下。

好了，這次的示范就到這里，希望能幫到大家~

想了解更多的VS Code API, 戳這邊：https://code.visualstudio.com/docs/extensionAPI/vscode-api

這次的示例代碼在這里可以下載：How to create a simple extension for VS Code

覺得這個例子太簡單？這里有更多完整的示例：https://code.visualstudio.com/docs/tools/samples