前言

來啦老鐵！

在上一篇文章：VSCode 插件開發(fā)（一）：Hello World
中，我們一起學(xué)習(xí)了 VSCode 插件項目是如何創(chuàng)建、VSCode 插件的基礎(chǔ)知識等，而今天我們將基于上一篇文章，繼續(xù)來嘗試開發(fā)一個稍微復(fù)雜點的插件。

實際上，關(guān)于插件開發(fā)，VSCode 有較為完善的文檔，請參考：VSCode 插件開發(fā)文檔。

學(xué)習(xí)路徑

1. 插件功能設(shè)計；
2. 編寫插件代碼；
3. 為插件設(shè)置快捷鍵；
4. 為插件設(shè)置菜單項；

1. 插件功能設(shè)計；

我學(xué)習(xí) VSCode 插件開發(fā)的初衷是：

• 想要通過這個插件與公司內(nèi)部用例管理平臺集成，從而能幫助我在一定程度上自動生成自動化代碼“框架”；

在這一點上，我之前是用保存好的代碼片段來完成的，代碼片段雖好，可無法做一些邏輯處理，如請求一個接口后，將接口內(nèi)容填入代碼片段，然后再填充代碼；

同時能想到的其他想法是，通過插件，我可以：

• 簡單快速地得到用例是否已發(fā)生變化，與前一個版本或前面幾個版本的差異在哪；
• 對用例管理平臺上的用例進行字段更新；
• 也許還可以觸發(fā) Jenkins job 等操作；
• 等。

這里面涉及到公司內(nèi)部平臺，不適合拿來寫文章，我們用一個類似的例子來演示，即：

• 在我們的 VSCode 插件中調(diào)用免費的公共接口（模擬調(diào)用公司用例管理平臺的接口），在拿到接口返回后，對返回內(nèi)容進行讀取，拼湊出我們的代碼片段（模擬拼出我們的自動化代碼“框架”），最后填充到文件中去；

2. 編寫插件代碼；

1. 首先安裝用于發(fā)請求的模塊 axios:

npm install axios --save-dev

2. 先實現(xiàn)簡單的向文件中寫入固定字符串的邏輯；

• 代碼如下：

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {

    // 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 "case2script" 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('case2script.helloWorld', () => {
        // 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 from case2script! I am Dylan Zhang ~');

        let editor = vscode.window.activeTextEditor;
        if (!editor) {
            return;
        }
        let snippet: vscode.SnippetString = new vscode.SnippetString("this is snippet test~");
        editor.insertSnippet(snippet);
    });

    context.subscriptions.push(disposable);
}

// this method is called when your extension is deactivated
export function deactivate() { }

• 運行插件后，在任意的文件內(nèi)，使用命令 Command + Shift + P（windows 為：Ctrl + Shift + P），選取使用我們的插件：

使用插件

• 就能快速看到效果啦（自動輸入一行字符：this is snippet test~）：

效果

3. 然后再實現(xiàn)向文件中寫入經(jīng)過處理后的字符串（調(diào) API，取 API 返回，然后經(jīng)過處理后的字符串）的邏輯；

這里，我們要做的是將上述代碼中的 "this is snippet test~" 替換為調(diào)完 API，取 API 返回，然后經(jīng)過處理后的字符串，即為動態(tài)的字符串；

• 我們首先隨便找一個免費公開接口，如：https://www.zhihu.com/api/v4/topics/19552112

免費公開接口

• 我們計劃取 name 對應(yīng)的值和 introduction 對應(yīng)的值，作為文本填入我們的目標(biāo)文件；

• 代碼如下：

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
import axios from 'axios';

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export async function activate(context: vscode.ExtensionContext) {

    // 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 "case2script" 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('case2script.helloWorld', async () => {
        // 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 from case2script! I am Dylan Zhang ~');

        let editor = vscode.window.activeTextEditor;
        if (!editor) {
            return;
        }

        let res = await axios.get("https://www.zhihu.com/api/v4/topics/19552112");
        let snippetString = "name: " + res.data.name + "\n" + "introduction:" + res.data.introduction;

        let snippet: vscode.SnippetString = new vscode.SnippetString(snippetString);
        editor.insertSnippet(snippet);
    });

    context.subscriptions.push(disposable);
}

// this method is called when your extension is deactivated
export function deactivate() { }

• 同理，插件運行后效果如下：

插入動態(tài)文本

3. 為插件設(shè)置快捷鍵；

快捷鍵的設(shè)置非常簡單，只需要在插件項目內(nèi)的 package.json 找到 contributes 字段，按我們的需要寫好快捷鍵配置，比如我們希望在文件內(nèi)，鍵盤按下 Command+M（windows 上為 Ctrl+M）組合鍵時，完成插件的調(diào)用。

快捷鍵配置如下：

快捷鍵配置

其中：

• "command": "case2script.helloWorld" 與 commands 中我們注冊的命令 command 一致；
• "key": "ctrl+m" 為 windows 機器對應(yīng)的快捷鍵；
• "mac": "cmd+m" 為 mac 機器對應(yīng)的快捷鍵；
• "when": "editorFocus" 為什么時候可以調(diào)用快捷鍵從而可以調(diào)用插件；

when 的其他選項參考：when 的其他選項參考。

執(zhí)行效果與未使用快捷鍵一致，方便多了：

快捷鍵執(zhí)行

4. 為插件設(shè)置菜單項；

與快捷鍵設(shè)置類似，設(shè)置菜單項也是在 package.json 內(nèi)的 contributes 字段下進行配置；

菜單項配置如下：

菜單項配置

其中：

• "when": "editorFocus" 為什么時候可以展示菜單從而可以選擇我們的菜單項進行調(diào)用插件；
• "command": "case2script.helloWorld" 與 commands 中我們注冊的命令 command 一致；
• "alt": "case2script.helloWorld" 此處定義了備用命令，即按住alt鍵打開菜單時將執(zhí)行對應(yīng)命令，筆者的電腦為 mac 電腦，無法驗證效果，見諒~
• "group": "navigation" 控制菜單的分組和排序，不同類型的菜單擁有不同的默認(rèn)分組，其中，editor/context 中有這些

group 默認(rèn)分組：

a. navigation： 放在這個組的永遠(yuǎn)排在最前面；
b. 1_modification - 更改組；
c. 9_cutcopypaste - 編輯組；
d. z_commands - 最后一個默認(rèn)組，其中包含用于打開命令選項板的條目。

分組

于是，我們就能用鼠標(biāo)右鍵找到我們的菜單項并調(diào)用插件啦，菜單項也能讓我們更方便使用插件~

菜單項

至此，我們學(xué)習(xí)了開發(fā)稍微復(fù)雜的 VSCode 插件的過程、插件快捷鍵、菜單項的設(shè)置等常用功能點，更多知識點還有待后續(xù)探索與實踐~

可以預(yù)見，擁有上述插件知識，開發(fā)其他類似功能的插件，必定不在話下（我的初衷應(yīng)該問題不大）?。?！

下一篇，我們可能會一起來學(xué)習(xí)如何本地安裝 VSCode 插件、發(fā)布 VSCode 插件到插件市場等，可期~

能力有限，歡迎指正、互相交流，感謝~

如果本文對您有幫助，麻煩點贊、關(guān)注！

感謝~