VS Code插件開發介紹（一）

• 前言

前段時間作了一個基於命令行的效率工具，能夠自動生成組件的模板代碼。本身用起來還以爲挺好，但在組內案例幾回後你們都不肯意用，究其緣由仍是命令行工具使用起來門檻有點高，不方便。因爲組內已經統一使用VS Code進行開發了，因而決定研究下VS Code的插件開發，讓效率工具更方便的用起來。

• 準備工做

爲了下降開發門檻，微軟作了一個Yeoman代碼生成命令，能夠很方便的生成插件開發須要的模板代碼，能夠經過如下命令安裝：

// 安裝
npm install -g yo generator-code

// 使用
yo code

運行完以上命令後會出現下面的操做界面，填入須要的信息便可。

• 運行示例代碼

代碼生成後，能夠按F5開始調試插件，此時VS Code會新建一個實例並進入插件開發模式，開發中的插件能夠在這個新的實例中使用。模版代碼會生成一個名爲Hello World的命令，按下⇧⌘P調出命令輸入窗口，而後輸入'Hello World'運行命令。若是找不到命令，重啓下VS Code再從新運行。

• 修改代碼

插件的入口代碼在extension.js這個文件中，主要是修改activate函數：

export 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 "my-first-extension" 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', () => {
        // 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) {
    console.log('Congratulations, your extension "react-template" is now active!');

    // 註冊一個名爲createFunctionalComponent的命令
    const fc = vscode.commands.registerCommand('extension.createFunctionalComponent', function (param) {
        // 文件夾絕對路徑
        const folderPath = param.fsPath;

        const options = {
            prompt: "請輸入組件名: ",
            placeHolder: "組件名"
        }
        
        // 調出系統輸入框獲取組件名
        vscode.window.showInputBox(options).then(value => {
            if (!value) return;

            const componentName = value;
            const fullPath = `${folderPath}/${componentName}`;

            // 生成模板代碼，不是本文的重點，先忽略
            generateComponent(componentName, fullPath, ComponentType.FUNCTIONAL_COMP);
        });
    });
    
    context.subscriptions.push(pc);
}

代碼很簡單，就不作講解了。爲了顯示Create Functional Component這個菜單項，咱們須要修改package.json文件的contributes字段。activationEvents字段也要相應的改下。同時爲了給插件配一個圖標，要加一個icon字段：

"icon": "images/icon.png",
    "activationEvents": [
        "onCommand:extension.createFunctionalComponent"
    ],
    "contributes": {
        "commands": [
            {
                "command": "extension.createFunctionalComponent",
                "title": "Create Functional Component"
            }
        ],
        "menus": {
            "explorer/context": [
                {
                    "command": "extension.createFunctionalComponent",
                    "group": "1_modification"
                }
            ]
        }
    },

詳細的contributes配置能夠看這裏。配置好menus以後，registerCommand的第二個函數參數就能取到文件或文件夾的絕對路徑了。

• 發佈插件

插件開發完後就能夠發佈了，須要安裝vsce

npm install -g vsce

安裝完後，須要去Azure DevOps註冊並生成一個access token。詳細的流程能夠看這裏。生成toke的時候有兩個地方須要注意下：

token生成後就能夠登陸和發佈了。若是有任何的修改，要注意修改package.json裏面版本號才能發佈成功。發佈成功後，很快就能在VS Code的插件市場搜到了。

• 總結

本文介紹了VS Code插件開發的基本流程，實現了一個簡單的插件。本文只涉及到VS Code插件系統的冰山一角，更多的高級功能之後接觸到的時候再做介紹。若是想再做進一步的瞭解，能夠從這裏開始。更多的 VS Code 開發技巧，能夠看這個系列的第二篇：VS Code插件開發介紹（二）