使用 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 框架来生成代码。

来自 README 中对 smol-ai 的描述：

这是一个“初级开发者”代理（即 smol dev）的原型，一旦你给它一个产品规格，它就能为你搭建出整个代码库，但不会带来世界末日或过度承诺通用人工智能。与创建特定的、严格的一次性启动器（如 create-react-app 或 create-nextjs-app）不同，这基本上是一个创建任何应用的工具，你可以在与你的 smol dev 紧密循环中开发你的搭建提示。

我们喜欢 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. 解决安装依赖项时出现的问题。

   你可以让人工智能来解决这些问题。

预期结果

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

$ 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. 解决编译代码时出现的问题。

   你可以让人工智能来解决这些问题。

预期结果

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

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

运行此扩展

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

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

任务

1. 解决运行扩展时出现的问题。

   你可以让人工智能来解决这些问题。

预期结果

当问题解决后，你可能会看到扩展正确运行。

总结

成功了 🥳

那么我们做得怎么样呢？我们得到了一个能正常工作的扩展。我们让它实现了提示中设定的目标。

到目前为止的这个过程并非“一帆风顺”。我们一路上遇到了很多问题。由于缺乏 TypeScript、Node.js 和 VSCode 的先验知识，这些问题本会花费一些时间来调试。

而且，尽管我们能够生成可运行的代码，但仍有许多需要改进的地方：

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