如何建立一個簡單的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