第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