使用 ChatGPT 构建 VSCode 扩展

介绍

本项目将指导你完成创建 VSCode 扩展的过程，该扩展允许用户调整所选 Markdown 文本的标题级别。最终，你将拥有一个功能完善的扩展，以增强 Visual Studio Code 中的 Markdown 编辑体验。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何使用 TypeScript 为 VSCode 扩展创建脚手架。
• 如何将 TypeScript 与 Node.js 和 VSCode 配置集成。
• 如何开发核心功能来调整所选 Markdown 文本的标题级别。
• 如何为构建、调试和运行扩展编写配置文件。

🏆 成就

完成本项目后，你将能够：

• 使用 TypeScript 设计和开发 VSCode 扩展。
• 在 VSCode 环境中处理用户交互和文本选择。
• 解析和操作 Markdown 语法。
• 在项目中生成和管理多个文件。
• 配置 TypeScript、Node.js 和 VSCode 以实现无缝开发。

安装 smol-ai

此外，我们使用 smol-ai 框架来生成代码。

smol-ai 在 README 中的描述：

这是一个“初级开发者”代理（也称为 smol dev）的原型，它可以在你提供产品规范后为你搭建整个代码库，但它不会颠覆世界或过度承诺通用人工智能（AGI）。它不是创建和维护像 create-react-app 或 create-nextjs-app 这样特定、僵化的“一次性启动器”，而是让你在一个紧密的循环中与你的 smol dev 一起开发你的脚手架提示，实现 create-anything-app 的功能。

我们喜欢 smol-ai 是因为它简单。整个代码生成逻辑在一个单独的 Python 文件中，包含三个主要函数：

1. 生成执行提示所需的文件列表（例如 package.json、index.js 等）。
2. 生成执行提示所需的共享依赖项列表（例如 axios、react 等）。
3. 对于生成的每个文件，生成应放入该文件的代码，并在适用时利用共享依赖项。

请注意，smol-ai 还提供其他功能，例如调试错误和根据当前代码库生成提示的能力。

任务

1. 克隆 smol-ai 仓库

   你需要将 https://github.com/smol-ai/developer 仓库克隆到 /home/labex/project 目录下。

2. 配置 smol-ai

   你需要阅读 smol-ai 的 README 并配置 OpenAI API 密钥。

初始化此扩展

这里有一个描述此项目的基本提示：

一个 VSCode 扩展，允许用户调整所选文本的标题级别。它应该有三个命令：增加标题级别、减少标题级别和设置标题级别

请注意，这个提示很简短且通用。你可以尝试通过添加更多关于项目的细节来改进提示。

你可以运行 smol-ai 来生成项目。在花费几分钟生成代码后，smol-ai 会在 developer/generated 目录中创建文件。

任务

1. 初始化项目

   查看 smol-ai 的 README，然后使用 smol-ai 生成项目。

2. 配置项目

   你需要查看生成的代码。如有必要，可以调整提示以重新生成。

预期结果

developer/generated 目录中有一个生成的代码示例。你的结果可能会有所不同。

.
├── extension
│   ├── package.json
│   ├── src
│   │   ├── commands
│   │   │   ├── decreaseHeadingLevel.ts
│   │   │   ├── increaseHeadingLevel.ts
│   │   │   └── setHeadingLevel.ts
│   │   └── extension.ts
└── shared_dependencies.md

测试此扩展

要测试此扩展，我们需要成功执行以下步骤：

1. 安装依赖项；
2. 编译代码；
3. 运行扩展。

安装依赖项

你需要在生成的目录下运行以下命令。

yarn

安装依赖项时可能会出现一些问题。你需要修复这些问题。

任务

1. 修复安装依赖项时出现的问题。

   你可以要求 AI 修复这些问题。

预期结果

当问题修复后，你可能会看到以下示例结果。

$ yarn

...
[3/5] 🚚 Fetching packages...
[4/5] 🔗 Linking dependencies...
[5/5] 🔨 Building fresh packages...
✨ Done in 4.31s.

构建此扩展

因为 TypeScript 是一种编译型语言，我们需要执行一个构建步骤将其编译成 JavaScript。package.json 附带以下脚本：

"scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "npm run compile && node ./node_modules/vscode/bin/test"
},

我们可以通过运行以下命令来构建代码：

tsc --init
yarn compile

编译代码时可能会出现一些问题。你需要修复这些问题。

任务

1. 修复编译代码时出现的问题。

   你可以要求 AI 修复这些问题。

预期结果

当问题修复后，你可能会看到以下示例结果。

$ tsc -p ./
✨ Done in 0.80s.

运行此扩展

运行 VSCode 扩展要求你在编辑器中激活 extension.ts 文件时，转到“运行和调试”面板并启动 vscode extension 任务。

运行扩展时可能会出现一些问题。你需要修复这些问题。

任务

1. 修复运行扩展时出现的问题。

   你可以要求 AI 修复这些问题。

预期结果

当问题修复后，你将看到扩展正常运行。

总结

它奏效了 🥳

我们做得怎么样？我们得到了一个可以工作的扩展。它实现了我们提示中设定的目标。

到达此处的旅程并非“自动”完成的。我们一路上遇到了很多问题。由于缺乏 TypeScript、Node.js 和 VSCode 的先验知识，调试这些问题可能需要花费很长时间。

即使我们能够生成可工作的代码，仍然有许多改进之处：

• 没有关于如何开发、使用或发布扩展的说明；
• 没有用于 TypeScript/JavaScript/VSCode 工件的 .gitignore 文件；
• 没有配置在开发中运行扩展的 launch.json 文件；
• 没有测试；
• 没有代码复用。