前言
来啦老铁！
在上一篇文章：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 插件到插件市场等，可期~
能力有限，欢迎指正、互相交流，感谢~
如果本文对您有帮助，麻烦点赞、关注！
感谢~
