第2部分 - 如何为API健康检查创建VS Code扩展？

如何为API健康检查创建VS Code扩展？

您是否曾经想过构建一个 Visual Studio Code 扩展作为您的顶点项目？在本文中，我们将分享如何一步步创建一个 VS Code 扩展，并以 API 健康检查为例，帮助开发者在部署前验证 API 的功能。

为什么要创建 API Guardian 扩展？

在开发过程中，API 的健康状态至关重要。为了帮助开发者快速识别项目中的 API 端点并检查其功能，我开发了一个名为 API Guardian 的 VS Code 扩展。这个工具旨在节省开发者修复因文档不清晰或过时引发问题的时间，同时简化维护工作。

接下来，我们将逐步讲解如何构建一个类似的扩展。

环境准备

在开始之前，请确保您的开发环境已安装以下工具：

Node.js
您可以通过运行以下命令检查是否已安装 Node.js：
```
node -v
```
如果未安装，请访问 Node.js 官网下载并安装。
生成器代码
安装 VS Code 扩展生成器工具，运行以下命令：
```
npm install -g yo generator-code
```

创建扩展项目

初始化项目
在目标文件夹中运行以下命令：
```
yo code
```
按照提示选择开发语言（本教程选择 JavaScript）并填写相关信息。
项目结构
初始化完成后，您的扩展项目结构将被创建。

自定义扩展命令

修改 package.json
打开项目根目录下的 package.json 文件，找到 commands 部分，根据需求修改命令名称和描述。
更新 extension.js
如果您在 package.json 中更改了命令名称，请同步更新 extension.js 文件中的逻辑代码。

使用快速选取功能

Visual Studio Code 提供了强大的 API，可以帮助开发者快速实现交互式功能。例如，快速选取功能允许用户从选项列表中选择操作，从而简化工作流。

以下是一个示例代码片段：

const vscode = require('vscode');

function activate(context) {
    let disposable = vscode.commands.registerCommand('extension.sayHello', async () => {
        const options = ['说你好', '说再见'];
        const selection = await vscode.window.showQuickPick(options, {
            placeHolder: '请选择一个选项'
        });

        if (selection === '说你好') {
            vscode.window.showInformationMessage('Hello World!');
        } else if (selection === '说再见') {
            vscode.window.showInformationMessage('再见！');
        }
    });

    context.subscriptions.push(disposable);
}

exports.activate = activate;

在上述代码中，用户可以通过快速选取菜单选择不同的选项，并触发相应的逻辑。

测试扩展

启动调试
在 VS Code 中，打开运行菜单并选择 开始调试。这将启动一个新的 VS Code 实例，称为 扩展开发主机。
运行命令
在扩展开发主机中，按下 Ctrl+Shift+P 打开命令面板，输入自定义命令名称（如“说你好”），并选择执行。
验证功能
根据 extension.js 文件中的逻辑，验证扩展是否按预期运行。

总结与提升

恭喜您！通过本教程，您已经成功创建了一个简单的 Visual Studio Code 扩展。虽然构建扩展可能充满挑战，但它不仅能提升您的技术能力，还能锻炼解决问题、批判性思维和时间管理等软技能。

在实际开发中，您可能会遇到各种问题，但正是这些挑战帮助您为未来的软件工程角色做好准备。

致谢

特别感谢以下人员和机构对本项目的支持：

邱腾华博士 和 张先生 的宝贵指导
新加坡理工学院、格拉斯哥大学 和 Wizvision私人有限公司 提供的资源和机会

如果您对本文提到的扩展感兴趣，可以访问以下链接了解更多：
https://marketplace.visualstudio.com/items?itemName=APIGuardian-vsc.api

原文链接: https://techcommunity.microsoft.com/blog/educatordeveloperblog/part-2---how-to-create-a-vs-code-extension-for-api-health-checks/4405688