用 AI 开发 VSCode 插件：从想法到上架实战（2026）

搜「VSCode 插件」，出来的文章清一色是「10 个必装插件推荐」——却几乎没人告诉你：用 AI 自己写一个 VSCode 插件，门槛已经低到一个晚上能搞定。VSCode 插件开发的资料全是英文、API 又多，过去劝退了大批人；但这恰恰是 AI 编程最擅长的场景——框架固定、文档齐全、功能内聚。你负责想清楚「要解决什么痛点」，脚手架、API 调用、调试报错全都可以交给 Claude Code 或 Cursor。这篇教程走完整流程：起项目 → 让 AI 写功能 → 本地调试 → 打包 → 上架官方市场（顺带 Open VSX），照做就能发布你的第一个插件。

先想清楚做什么：适合第一次的插件点子

第一个插件的选题原则：解决你自己每天遇到的小麻烦，功能单一，不碰复杂 UI。几个被验证过好上手的方向：

• 选中即转换：选中一段文本右键转换——时间戳转日期、JSON 格式化、驼峰转下划线、生成 UUID。只用到最基础的命令和编辑器 API。
• 状态栏小组件：在底部状态栏常驻显示信息——番茄钟倒计时、当前文件代码行数、自定义提醒。
• 代码片段包：把你常用的代码模板做成 snippets 插件，甚至不用写逻辑代码，纯配置文件就能发布。
• 高亮与装饰：把代码里的 TODO/FIXME/HACK 用不同颜色高亮，或给特定注释加图标。
• 接 AI API 的小助手：选中代码右键「让 AI 解释/翻译/写注释」，调用 DeepSeek、GLM 等便宜的国产模型 API，实现你的专属 AI 按钮。

环境准备与脚手架

需要 Node.js 18+ 和 VSCode 本体。微软官方提供了脚手架工具 yo code，两条命令生成一个能直接运行的插件项目：

# 安装脚手架和打包工具（一次性）
npm install -g yo generator-code @vscode/vsce

# 生成插件项目，按提示回答问题
yo code

交互提问时这样选：类型选 New Extension (TypeScript)（别怕，TS 代码是 AI 写，报错比 JS 更容易被 AI 定位）；名称用小写加连字符（如 my-timestamp-tool）；打包器选 esbuild；其余默认即可。生成的项目里只有三个文件需要你关心：

• package.json —— 插件的「说明书」：插件名、版本，以及最关键的 contributes 字段（声明插件往 VSCode 里加什么：命令、菜单项、快捷键、配置项）。
• src/extension.ts —— 插件的「大脑」：activate 函数在插件启动时执行，所有功能逻辑从这里注册。
• README.md —— 上架后市场页面展示的介绍，发布前必须改（默认模板内容会导致发布体验很差）。

让 AI 写核心功能：提示词这样给

在项目根目录打开 Claude Code（或用 Cursor 打开项目），把功能一次性描述清楚。以「时间戳转换」插件为例：

这是一个 yo code 生成的 VSCode 插件项目（TypeScript + esbuild）。
请实现以下功能：
1. 注册命令「转换时间戳」：用户选中一段数字（Unix 时间戳，秒或毫秒自动判断），
   执行命令后把选中内容替换为「2026-08-10 14:30:00」格式的本地时间；
2. 在编辑器右键菜单中加入这个命令，仅当有选中文本时显示；
3. 转换失败（选中的不是合法时间戳）时用 showWarningMessage 提示，不要改动文本。
要求：改动只涉及 package.json 的 contributes 部分和 src/extension.ts，
每处改动加简短注释说明对应上面哪条需求。

这条提示词的三个要点，换任何插件功能都适用：把触发方式说死（命令面板？右键菜单？快捷键？）、把边界情况说死（失败怎么办）、把改动范围说死（只动哪两个文件）。VSCode 插件的一切能力都通过 vscode 这个内置模块暴露，AI 对它非常熟——常用的也就几个：vscode.commands.registerCommand 注册命令、vscode.window.showInformationMessage 弹提示、vscode.window.activeTextEditor 读写编辑器内容、vscode.window.createStatusBarItem 加状态栏。你不需要背 API，看得懂 AI 用了什么即可。

调试：按 F5，开一个「实验窗口」

这是 VSCode 插件开发最爽的部分。在项目里直接按 F5，VSCode 会弹出一个标着「扩展开发宿主」的新窗口——你的插件已经装在里面了。在新窗口里随便打开个文件，选中一串时间戳，右键看看你的命令出现没有、能不能转换。改了代码后在宿主窗口按 Ctrl+R（Mac 是 Cmd+R）重载即可，不用重启。

打包：先发给自己和同事用

不想公开上架的话，打包成 .vsix 文件就能分发——发给同事拖进 VSCode 就能装：

# 在项目根目录打包，生成 my-timestamp-tool-0.0.1.vsix
vsce package

# 本地安装测试（或在 VSCode 扩展面板右上角菜单选「从 VSIX 安装」）
code --install-extension my-timestamp-tool-0.0.1.vsix

打包时报错多半是两个原因：README.md 还是默认模板（vsce 会拒绝打包，改成真实介绍即可）；或者体积过大（没配 .vscodeignore 把 node_modules 打了进去——用 esbuild 模板的话产物已打包进 dist，node_modules 本就不该进包）。

上架官方市场（以及 Open VSX）

公开上架到 VSCode 官方市场（Visual Studio Marketplace）完全免费，流程四步，顺序不能乱：

1. 1注册 Azure DevOps 账号（dev.azure.com，微软账号直接登录），在个人设置里创建一个 Personal Access Token（PAT），Scopes 勾选 Marketplace → Manage。
2. 2到 marketplace.visualstudio.com/manage 创建 Publisher（发布者 ID），这个 ID 要填进 package.json 的 publisher 字段。
3. 3命令行登录：vsce login <你的发布者ID>，粘贴刚才的 PAT。
4. 4发布：vsce publish。首次发布后市场会做自动安全扫描，通常几分钟到几十分钟内插件就能被搜到；之后更新版本用 vsce publish patch 自动升版本号。

新手踩坑清单

• package.json 里的 engines.vscode 版本别乱改高，写得比用户装的 VSCode 新，插件会装不上。
• 插件名和发布者 ID 全市场唯一，发布前先去市场搜一下有没有重名。
• 上架前给插件配一个 128×128 以上的 icon（package.json 的 icon 字段），没有图标的插件几乎没人点。
• 涉及 API Key 的插件（比如接 AI 模型），把 Key 做成用户配置项（contributes.configuration），绝对不要写死在代码里发布。
• 每次发布前本地 vsce package 装一遍验证，市场没有人工审核兜底，发出去坏的就是坏的。

做一个 VSCode 插件，是「用 AI 做出真产品」路线上性价比极高的一站：项目小到一个晚上能闭环，却完整走了一遍需求拆解、AI 协作开发、调试、打包、上架分发的全流程——这套能力换到做网站、做小程序、做桌面应用上是通用的。想系统学习怎么把 AI 编程用到能交付的水平，欢迎来 IMAI 看看我们的体系化实战课程。