前言

来啦老铁！

在上一篇文章：VSCode 插件开发（一）：Hello World
中，我们一起学习了 VSCode 插件项目是如何创建、VSCode 插件的基础知识等，而今天我们将基于上一篇文章，继续来尝试开发一个稍微复杂点的插件。

实际上，关于插件开发，VSCode 有较为完善的文档，请参考：VSCode 插件开发文档。

学习路径

插件功能设计；
编写插件代码；
为插件设置快捷键；
为插件设置菜单项；

1. 插件功能设计；

我学习 VSCode 插件开发的初衷是：

想要通过这个插件与公司内部用例管理平台集成，从而能帮助我在一定程度上自动生成自动化代码“框架”；

在这一点上，我之前是用保存好的代码片段来完成的，代码片段虽好，可无法做一些逻辑处理，如请求一个接口后，将接口内容填入代码片段，然后再填充代码；

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

简单快速地得到用例是否已发生变化，与前一个版本或前面几个版本的差异在哪；
对用例管理平台上的用例进行字段更新；
也许还可以触发 Jenkins job 等操作；
等。

这里面涉及到公司内部平台，不适合拿来写文章，我们用一个类似的例子来演示，即：

在我们的 VSCode 插件中调用免费的公共接口（模拟调用公司用例管理平台的接口），在拿到接口返回后，对返回内容进行读取，拼凑出我们的代码片段（模拟拼出我们的自动化代码“框架”），最后填充到文件中去；

2. 编写插件代码；

首先安装用于发请求的模块 axios:

npm install axios --save-dev

先实现简单的向文件中写入固定字符串的逻辑；

代码如下：

// 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() { }

运行插件后，在任意的文件内，使用命令 Command + Shift + P（windows 为：Ctrl + Shift + P），选取使用我们的插件：

使用插件

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

效果

然后再实现向文件中写入经过处理后的字符串（调 API，取 API 返回，然后经过处理后的字符串）的逻辑；

这里，我们要做的是将上述代码中的 "this is snippet test~" 替换为调完 API，取 API 返回，然后经过处理后的字符串，即为动态的字符串；

我们首先随便找一个免费公开接口，如：https://www.zhihu.com/api/v4/topics/19552112

免费公开接口

我们计划取 name 对应的值和 introduction 对应的值，作为文本填入我们的目标文件；
代码如下：

// 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() { }

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

插入动态文本

3. 为插件设置快捷键；

快捷键的设置非常简单，只需要在插件项目内的 package.json 找到 contributes 字段，按我们的需要写好快捷键配置，比如我们希望在文件内，键盘按下 Command+M（windows 上为 Ctrl+M）组合键时，完成插件的调用。

快捷键配置如下：

快捷键配置

其中：

"command": "case2script.helloWorld" 与 commands 中我们注册的命令 command 一致；
"key": "ctrl+m" 为 windows 机器对应的快捷键；
"mac": "cmd+m" 为 mac 机器对应的快捷键；
"when": "editorFocus" 为什么时候可以调用快捷键从而可以调用插件；

when 的其他选项参考：when 的其他选项参考。

执行效果与未使用快捷键一致，方便多了：

快捷键执行

4. 为插件设置菜单项；

与快捷键设置类似，设置菜单项也是在 package.json 内的 contributes 字段下进行配置；

菜单项配置如下：

菜单项配置

其中：

"when": "editorFocus" 为什么时候可以展示菜单从而可以选择我们的菜单项进行调用插件；
"command": "case2script.helloWorld" 与 commands 中我们注册的命令 command 一致；
"alt": "case2script.helloWorld" 此处定义了备用命令，即按住alt键打开菜单时将执行对应命令，笔者的电脑为 mac 电脑，无法验证效果，见谅~
"group": "navigation" 控制菜单的分组和排序，不同类型的菜单拥有不同的默认分组，其中，editor/context 中有这些

group 默认分组：

a. navigation：放在这个组的永远排在最前面；
b. 1_modification - 更改组；
c. 9_cutcopypaste - 编辑组；
d. z_commands - 最后一个默认组，其中包含用于打开命令选项板的条目。

分组

于是，我们就能用鼠标右键找到我们的菜单项并调用插件啦，菜单项也能让我们更方便使用插件~

菜单项

至此，我们学习了开发稍微复杂的 VSCode 插件的过程、插件快捷键、菜单项的设置等常用功能点，更多知识点还有待后续探索与实践~

可以预见，拥有上述插件知识，开发其他类似功能的插件，必定不在话下（我的初衷应该问题不大）！！！

下一篇，我们可能会一起来学习如何本地安装 VSCode 插件、发布 VSCode 插件到插件市场等，可期~

能力有限，欢迎指正、互相交流，感谢~

如果本文对您有帮助，麻烦点赞、关注！

感谢~

VSCode 插件开发（二）：插件开发实践

前言