结合 AI 开发 VSCode 插件

最近 AI 比较火，若想结合 AI 来提效，最容易入手的就是结合 AI 开发 VSCode 插件。目标开发一个 Git 消息生成插件，借助 AI 的强大能力，自动生成规范且准确的 Git 提交消息，提升开发效率。

成果

https://marketplace.visualstudio.com/items?itemName=ai-git.ai-git

准备

环境准备

在开始开发之前，你需要确保已经安装了以下工具：

• Node.js 和 npm：VSCode 插件基于 Node.js 开发，因此需要安装 Node.js 和其包管理工具 npm。你可以从 Node.js 官方网站 下载并安装适合你操作系统的版本。安装完成后，在终端中运行以下命令来验证安装是否成功：

bashCopy

• Yeoman 和 VSCode 扩展生成器：Yeoman 是一个脚手架工具，而 VSCode 扩展生成器可以帮助我们快速创建 VSCode 插件的项目结构。使用以下命令进行全局安装：

bashCopy

AI 服务选择

为了实现自动生成 Git 消息的功能，我们需要借助 AI 服务。目前有许多可用的 AI 平台，选择硅基流动的API服务

1. 注册 硅基流动 账号：访问 硅基流动 官方网站 进行注册。
2. 获取 API Key：注册并登录后，在 OpenAI 平台的控制台中生成 API Key，这将用于后续调用 AI 服务。注意要妥善保管你的 API Key，避免泄露。

项目初始化

使用 VSCode 扩展生成器创建一个新的插件项目。在终端中执行以下命令：

bashCopy

按照提示进行选择：

• What type of extension do you want to create?：选择 New Extension (TypeScript)，因为 TypeScript 提供了类型检查，能让代码更加健壮。
• What's the name of your extension?：输入插件的名称，例如 git-message-generator。
• What's the identifier of your extension?：一般保持默认即可。
• What's the description of your extension?：输入插件的描述信息，如 “Automatically generate Git commit messages using AI”。
• Initialize a git repository?：根据个人需求选择是否初始化 Git 仓库。
• Which package manager to use?：选择 npm。

完成上述步骤后，Yeoman 会自动生成项目的基本结构和文件。

项目结构介绍

生成的项目主要包含以下重要文件和目录：

• package.json：定义插件的元数据、激活事件、命令等信息。
• src/extension.ts：插件的入口文件，包含插件的主要逻辑。
• tsconfig.json：TypeScript 的配置文件，用于指定编译选项。
• .vscode 目录：包含调试和任务配置文件。

需要用到的网站

• 参考 https://juejin.cn/post/7076649162653040647
• https://marketplace.visualstudio.com/
• https://dev.azure.com/

node -v
npm -v

npm install -g yo generator-code

yo code