介绍
本项目将指导你完成创建 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 文件中，包含三个主要函数：
- 生成执行提示所需的文件列表（例如 package.json、index.js 等）。
- 生成执行提示所需的共享依赖项列表（例如 axios、react 等）。
- 对于生成的每个文件，生成应放入该文件的代码，并在适用时利用共享依赖项。
请注意，smol-ai 还提供其他功能，例如调试错误和根据当前代码库生成提示的能力。
任务
克隆 smol-ai 仓库
你需要将
https://github.com/smol-ai/developer仓库克隆到/home/labex/project目录下。配置 smol-ai
你需要阅读
smol-ai的 README 并配置 OpenAI API 密钥。
初始化此扩展
这里有一个描述此项目的基本提示：
一个 VSCode 扩展，允许用户调整所选文本的标题级别。它应该有三个命令：增加标题级别、减少标题级别和设置标题级别
请注意，这个提示很简短且通用。你可以尝试通过添加更多关于项目的细节来改进提示。
你可以运行 smol-ai 来生成项目。在花费几分钟生成代码后，smol-ai 会在 developer/generated 目录中创建文件。
任务
初始化项目
查看
smol-ai的 README，然后使用smol-ai生成项目。配置项目
你需要查看生成的代码。如有必要，可以调整提示以重新生成。
预期结果
developer/generated 目录中有一个生成的代码示例。你的结果可能会有所不同。
.
├── extension
│ ├── package.json
│ ├── src
│ │ ├── commands
│ │ │ ├── decreaseHeadingLevel.ts
│ │ │ ├── increaseHeadingLevel.ts
│ │ │ └── setHeadingLevel.ts
│ │ └── extension.ts
└── shared_dependencies.md
测试此扩展
要测试此扩展，我们需要成功执行以下步骤：
- 安装依赖项；
- 编译代码；
- 运行扩展。
安装依赖项
你需要在生成的目录下运行以下命令。
yarn
安装依赖项时可能会出现一些问题。你需要修复这些问题。
任务
修复安装依赖项时出现的问题。
你可以要求 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
编译代码时可能会出现一些问题。你需要修复这些问题。
任务
修复编译代码时出现的问题。
你可以要求 AI 修复这些问题。
预期结果
当问题修复后，你可能会看到以下示例结果。
$ tsc -p ./
✨ Done in 0.80s.
运行此扩展
运行 VSCode 扩展要求你在编辑器中激活 extension.ts 文件时，转到“运行和调试”面板并启动 vscode extension 任务。
运行扩展时可能会出现一些问题。你需要修复这些问题。
任务
修复运行扩展时出现的问题。
你可以要求 AI 修复这些问题。
预期结果
当问题修复后，你将看到扩展正常运行。
总结
它奏效了 🥳
我们做得怎么样？我们得到了一个可以工作的扩展。它实现了我们提示中设定的目标。
到达此处的旅程并非“自动”完成的。我们一路上遇到了很多问题。由于缺乏 TypeScript、Node.js 和 VSCode 的先验知识，调试这些问题可能需要花费很长时间。
即使我们能够生成可工作的代码，仍然有许多改进之处：
- 没有关于如何开发、使用或发布扩展的说明；
- 没有用于 TypeScript/JavaScript/VSCode 工件的
.gitignore文件； - 没有配置在开发中运行扩展的
launch.json文件； - 没有测试；
- 没有代码复用。
