easy-vibe 跨平台实战从零开发 VS Code 插件 AI Project Bot掌握 TreeView、Chat Participant 与 Marketplace 发布【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇指南基于 easy-vibe 课程第三阶段「跨平台开发」章节 VS Code 插件教程带你从零构建一个名为AI Project Bot的 VS Code 智能项目助手侧边栏项目模板一键生成、project-bot聊天问答、选中代码 AI 解析、多文件批量分析、自定义快捷键并走通 vsce 打包与 Marketplace 发布流程。读完后你将完整掌握 VS Code 扩展的「声明—注册—调试—打包」全链路开发能力。前置条件与学习路线本教程采用「端到端 Vibe Coding」模式用 AI 编码助手生成大部分代码你只需要理解核心概念与架构再用自然语言描述需求。开始前请准备Node.js 环境18.0VS Code 编辑器1.90Chat Participant API 从 1.90 开始可用一个 AI 编码助手Cursor / Trae / Claude Code 等可选GitHub Copilot 订阅——用于调用 Language Model API教程分六步推进创建扩展项目3 分钟→ 实现项目模板5 分钟→ 实现 AI Chat Participant5 分钟→ 实现文件/选段聊天与多文件问答5 分钟→ 添加快捷键与 UX 打磨3 分钟→可选发布到 Marketplace。VS Code 扩展能做什么你日常使用的 Prettier 格式化代码、GitLens 显示 Git 历史、GitHub Copilot 辅助写码本质上都是「用 TypeScript/JavaScript 编写、通过 VS Code API 扩展编辑器」的程序。扩展的能力边界远不止这些新增界面元素侧边栏面板、状态栏信息、自定义 Webview 页面操作文件与代码读取、修改、创建文件解析代码结构集成外部服务调用 API、连接数据库、接入 CI/CD扩展编辑器能力自定义语言支持、代码补全、诊断添加 AI 能力用 Chat Participant API 创建 AI 助手用 Language Model API 调用模型扩展基础架构Extension Host 隔离进程VS Code 扩展运行在一个隔离的 Extension Host 进程中与编辑器主进程分离。这意味着即使某个扩展崩溃编辑器本身不会受影响。一个典型的扩展由以下要素构成package.json清单文件扩展的「身份证」声明名称、入口文件以及贡献点commands、menus、keybindings等extension.ts入口文件扩展的「大脑」导出activate()与deactivate()贡献点Contributes扩展向 VS Code 贡献的一切命令、菜单项、快捷键、视图等VS Code API一套 TypeScript API用于调用编辑器的各种能力从源码结构看整个扩展可抽象为这样的进程关系编辑器 VS Code │ ├── Extension Host扩展进程 │ ├── 你的扩展 │ │ ├── package.json - 声明我能做什么 │ │ ├── extension.ts - 实现怎么做 │ │ └── 其他模块 - 具体功能代码 │ ├── 其他扩展 A │ └── 其他扩展 B │ └── 编辑器主进程UI 渲染目标产品AI Project Bot 功能全景我们要构建的扩展名为AI Project Bot一个功能完整的 AI 项目助手功能说明项目模板侧边栏列出模板一键生成项目骨架AI 聊天VS Code Chat 面板中的project-bot参与者用于项目问答文件/选段聊天选中代码或文件后右键发送到 AI进行分析/解释/重构多文件问答在资源管理器中多选文件让 AI 分析文件间关系与逻辑快捷键自定义键盘快捷键快速触发常用操作创建扩展项目用官方脚手架生成项目VS Code 官方提供 Yeoman 脚手架工具。将如下需求交给 AI 执行帮我安装 VS Code 扩展脚手架工具并创建项目 1. 安装 Yeoman 和 generator-codenpm install -g yo generator-code 2. 运行 yo code选择 - 类型New Extension (TypeScript) - 名称ai-project-bot - 标识ai-project-bot - 描述AI 项目助手 - 模板生成、智能聊天、多文件问答 - 包管理器npm 3. 进入项目目录并安装依赖生成的项目结构如下ai-project-bot/ ├── .vscode/ │ ├── launch.json # 调试配置F5 启动调试 │ └── tasks.json # 构建任务 ├── src/ │ └── extension.ts # 扩展入口文件 ├── package.json # 扩展清单最重要的文件 ├── tsconfig.json # TypeScript 配置 └── vsc-extension-quickstart.md # 快速上手指南可删除理解 package.json扩展的「身份证」package.json是 VS Code 扩展的核心文件。除了 npm 常规字段它包含contributes字段声明扩展向 VS Code 贡献的一切{ name: ai-project-bot, displayName: AI Project Bot, description: AI 项目助手 - 模板生成、智能聊天、多文件问答, version: 0.0.1, engines: { vscode: ^1.90.0 }, activationEvents: [], main: ./out/extension.js, contributes: { commands: [], menus: {}, keybindings: [], viewsContainers: {}, views: {}, chatParticipants: [] } }关键字段说明字段作用engines.vscode支持的最低 VS Code 版本activationEvents扩展何时被激活留空 按需激活main编译后入口文件的路径contributes所有贡献的能力命令、菜单、快捷键、视图等理解 extension.ts扩展的「大脑」打开src/extension.ts你会看到两个核心函数import * as vscode from vscode // 扩展激活时调用首次执行命令、打开特定文件等 export function activate(context: vscode.ExtensionContext) { console.log(AI Project Bot activated!) // 注册命令、视图、聊天参与者等 const disposable vscode.commands.registerCommand( ai-project-bot.helloWorld, () { vscode.window.showInformationMessage(Hello from AI Project Bot!) } ) context.subscriptions.push(disposable) } // 扩展停用时调用例如 VS Code 关闭时 export function deactivate() {}关键概念activate(context)扩展初始化入口所有能力都应在其中注册context.subscriptions自动清理列表VS Code 在停用时自动释放其中注册的对象vscode.commands.registerCommand注册可从命令面板CtrlShiftP调用的命令启动调试按下F5VS Code 会打开一个新的Extension Development Host窗口——一个加载了你扩展的空白 VS Code 实例。在新窗口按CtrlShiftP输入 Hello World看到弹窗消息即说明扩展运行成功。调试技巧修改代码后在 Extension Development Host 中按CtrlShiftP执行Developer: Reload Window即可快速重载扩展。实现项目模板系统TreeView目标是在 VS Code 侧边栏增加一个「项目模板」面板用户可以浏览模板并一键生成项目骨架这用到 VS Code 的TreeView API。将以下需求交给 AI 实现帮我在 ai-project-bot 中实现项目模板功能 1. 在 package.json 中添加贡献点 - 新增 viewsContainers.activitybar 条目id 为 project-bot标题 AI Project Bot - 在其下新增视图id 为 projectTemplates名称 项目模板 - 新增命令 ai-project-bot.createFromTemplate标题 从模板创建项目 2. 创建 src/templates/templateProvider.ts - 实现 TreeDataProvider包含模板分类和模板项 - 前端React TypeScript、Vue 3 TypeScript、Next.js App - 后端Express API、FastAPI Python - 全栈T3 Stack (Next.js tRPC Prisma) - 每个模板项显示名称、描述和图标 3. 创建 src/templates/scaffolder.ts - 实现 createProjectFromTemplate 函数 - 让用户选择目标文件夹 - 根据模板类型生成项目结构在 package.json 中声明视图首先在package.json中添加侧边栏视图贡献{ contributes: { viewsContainers: { activitybar: [ { id: project-bot, title: AI Project Bot, icon: resources/bot-icon.svg } ] }, views: { project-bot: [ { id: projectTemplates, name: 项目模板 } ] }, commands: [ { command: ai-project-bot.createFromTemplate, title: 从模板创建项目, icon: $(add) } ], menus: { view/title: [ { command: ai-project-bot.createFromTemplate, when: view projectTemplates, group: navigation } ] } } }这段配置做了三件事在 Activity Bar 中新增一个「AI Project Bot」图标入口在该入口下创建「项目模板」视图在视图标题栏添加「」按钮用于创建项目实现 TreeDataProviderTreeDataProvider是 VS Code 填充树形数据的接口需要实现getTreeItem节点的展示信息和getChildren子节点列表。核心代码如下// src/templates/templateProvider.ts import * as vscode from vscode interface Template { name: string description: string category: string command: string // 用于生成项目的命令例如 npx create-react-app } const TEMPLATES: Template[] [ { name: React TypeScript, description: 基于 Vite 的 React 项目, category: 前端, command: npm create vitelatest {{name}} -- --template react-ts }, { name: Vue 3 TypeScript, description: 基于 Vite 的 Vue 3 项目, category: 前端, command: npm create vitelatest {{name}} -- --template vue-ts }, { name: Next.js App, description: Next.js App Router 全栈项目, category: 前端, command: npx create-next-applatest {{name}} --typescript --app }, { name: Express API, description: Express TypeScript REST API, category: 后端, command: npx create-express-api {{name}} }, { name: FastAPI Python, description: Python FastAPI 后端项目, category: 后端, command: pip install fastapi uvicorn }, ] // 树节点分类或模板 class TemplateItem extends vscode.TreeItem { constructor( public readonly label: string, public readonly collapsibleState: vscode.TreeItemCollapsibleState, public readonly template?: Template ) { super(label, collapsibleState) if (template) { this.description template.description this.tooltip ${template.name}\n${template.description}\n命令${template.command} this.contextValue template this.command { command: ai-project-bot.createFromTemplate, title: 创建项目, arguments: [template] } } } } export class TemplateProvider implements vscode.TreeDataProviderTemplateItem { getTreeItem(element: TemplateItem): vscode.TreeItem { return element } getChildren(element?: TemplateItem): TemplateItem[] { if (!element) { // 根节点返回分类列表 const categories [...new Set(TEMPLATES.map(t t.category))] return categories.map( cat new TemplateItem(cat, vscode.TreeItemCollapsibleState.Expanded) ) } // 子节点该分类下的模板 return TEMPLATES .filter(t t.category element.label) .map(t new TemplateItem(t.name, vscode.TreeItemCollapsibleState.None, t)) } }注册视图与创建命令在extension.ts中注册 TreeView 与创建项目的命令// src/extension.ts import { TemplateProvider } from ./templates/templateProvider export function activate(context: vscode.ExtensionContext) { // 注册模板视图 const templateProvider new TemplateProvider() vscode.window.registerTreeDataProvider(projectTemplates, templateProvider) // 注册创建项目命令 const createCmd vscode.commands.registerCommand( ai-project-bot.createFromTemplate, async (template) { if (!template) { // 未传入模板从命令面板调用时让用户选择 const pick await vscode.window.showQuickPick( TEMPLATES.map(t ({ label: t.name, description: t.description, template: t })), { placeHolder: 请选择项目模板 } ) if (!pick) return template pick.template } // 询问项目名 const name await vscode.window.showInputBox({ prompt: 请输入项目名, placeHolder: my-awesome-project }) if (!name) return // 询问目标文件夹 const folder await vscode.window.showOpenDialog({ canSelectFolders: true, openLabel: 选择目标文件夹 }) if (!folder) return // 执行创建命令 const terminal vscode.window.createTerminal(AI Project Bot) terminal.show() const cmd template.command.replace({{name}}, name) terminal.sendText(cd ${folder[0].fsPath} ${cmd}) vscode.window.showInformationMessage(正在创建 ${template.name} 项目${name}) } ) context.subscriptions.push(createCmd) }现在按 F5 调试你会在 Activity Bar 看到 AI Project Bot 入口。展开模板列表点击任意模板即可创建项目。实现 AI Chat ParticipantChat Participant API 是什么从 VS Code 1.90 起扩展可以通过Chat Participant API在 Chat 面板中创建自己的 AI 助手。当用户输入project-bot 帮我分析这个项目的架构时你的扩展会收到消息并返回模型生成的回答。核心概念Participant参与者你的助手在 Chat 面板中的身份通过名称唤起斜杠命令Slash Commands参与者支持的快捷命令如/explain、/refactorLanguage Model API调用 VS Code 内置的模型如 Copilot GPT-4oStreaming通过stream.markdown()渐进式输出回答在 package.json 中声明 Chat Participant在contributes中添加{ contributes: { chatParticipants: [ { id: ai-project-bot.projectBot, name: project-bot, fullName: AI Project Bot, description: 你的 AI 项目助手用于代码分析、架构解释与方案生成, isSticky: true } ] } }isSticky: true表示一旦选中该参与者后续消息默认都发给它无需每次都输入project-bot。实现 Chat Participant 处理器让 AI 编写核心逻辑帮我创建 src/chat/chatParticipant.ts 并实现 Chat Participant 1. 注册参与者 ai-project-bot.projectBot 2. 支持三个斜杠命令 - /explain解释选中代码或当前文件 - /refactor提供重构建议 - /template推荐适合的技术栈模板 3. 使用 Language Model API 调用 VS Code 内置模型 4. 以流式模式返回回答stream.markdown核心代码// src/chat/chatParticipant.ts import * as vscode from vscode export function registerChatParticipant(context: vscode.ExtensionContext) { const participant vscode.chat.createChatParticipant( ai-project-bot.projectBot, async (request, chatContext, stream, token) { // 选择可用的模型 const models await vscode.lm.selectChatModels({ family: gpt-4o }) const model models[0] if (!model) { stream.markdown(无可用语言模型请确保已安装 GitHub Copilot。) return } // 根据斜杠命令构建系统提示 let systemPrompt 你是一个专业的开发项目助手。 if (request.command explain) { systemPrompt 你是一个代码解释专家。用简明的语言解释用户代码的用途、逻辑流程和关键设计决策。 } else if (request.command refactor) { systemPrompt 你是一个代码重构专家。分析用户代码并给出具体的重构建议和改进后的代码示例。 } else if (request.command template) { systemPrompt 你是一个技术栈选型专家。根据用户需求推荐合适的技术栈和项目模板。 } // 构建消息 const messages [ vscode.LanguageModelChatMessage.User(systemPrompt), vscode.LanguageModelChatMessage.User(request.prompt) ] // 流式输出 const response await model.sendRequest(messages, {}, token) for await (const chunk of response.stream) { stream.markdown(chunk) } return { metadata: { command: request.command || } } } ) // 注册斜杠命令 participant.slashCommandProvider { provideSlashCommands: () [ { name: explain, description: 解释代码的功能和逻辑 }, { name: refactor, description: 提供重构建议和改进 }, { name: template, description: 推荐适合的项目模板和技术栈 } ] } // 注册后续建议 participant.followupProvider { provideFollowups: (result) { if (result.metadata?.command explain) { return [ { prompt: 能否画一个流程图, label: 生成流程图 }, { prompt: 这里有潜在的 bug 吗, label: 检查潜在问题 } ] } return [] } } context.subscriptions.push(participant) }在extension.ts中调用注册import { registerChatParticipant } from ./chat/chatParticipant export function activate(context: vscode.ExtensionContext) { // ...前面的模板注册代码... registerChatParticipant(context) }现在在 Chat 面板输入project-bot /explain 这段代码是做什么的扩展就会调用模型生成解释。文件/选段聊天与多文件问答上下文菜单把选中代码发给 AI我们希望用户能在编辑器中选中代码后从右键菜单将其发送给 AI。这用到 VS Code 的Context Menu贡献点。在package.json中添加{ contributes: { commands: [ { command: ai-project-bot.explainSelection, title: AI: 解释选中代码 }, { command: ai-project-bot.refactorSelection, title: AI: 重构选中代码 } ], menus: { editor/context: [ { command: ai-project-bot.explainSelection, when: editorHasSelection, group: ai-project-bot1 }, { command: ai-project-bot.refactorSelection, when: editorHasSelection, group: ai-project-bot2 } ] } } }配置要点when: editorHasSelection仅在选中文本时显示菜单项group: ai-project-bot1菜单的分组与排序1、2实现选中代码分析// src/commands/selectionCommands.ts import * as vscode from vscode export function registerSelectionCommands(context: vscode.ExtensionContext) { // 解释选中代码 const explainCmd vscode.commands.registerCommand( ai-project-bot.explainSelection, async () { const editor vscode.window.activeTextEditor if (!editor) return const selection editor.selection const selectedText editor.document.getText(selection) const fileName editor.document.fileName.split(/).pop() const startLine selection.start.line 1 const endLine selection.end.line 1 // 构建带上下文的 prompt const prompt [ 请解释以下代码来自 ${fileName}第 ${startLine}-${endLine} 行, , selectedText, , 请解释1) 这段代码做什么 2) 核心逻辑 3) 可能的改进 ].join(\n) // 调用 Language Model API const models await vscode.lm.selectChatModels({ family: gpt-4o }) if (!models.length) { vscode.window.showErrorMessage(无可用语言模型) return } // 在输出面板展示结果 const outputChannel vscode.window.createOutputChannel(AI Project Bot) outputChannel.show() outputChannel.appendLine(\n--- 代码解释 (${fileName}:${startLine}-${endLine}) ---\n) const messages [ vscode.LanguageModelChatMessage.User(prompt) ] const response await models[0].sendRequest(messages, {}) for await (const chunk of response.stream) { outputChannel.append(chunk) } } ) context.subscriptions.push(explainCmd) }多文件问答批量分析文件间关系这是最强大的功能之一在资源管理器中多选文件一键让 AI 分析文件间的关系与逻辑。先在package.json中添加资源管理器上下文菜单{ contributes: { commands: [ { command: ai-project-bot.analyzeFiles, title: AI: 分析所选文件的关系 } ], menus: { explorer/context: [ { command: ai-project-bot.analyzeFiles, when: explorerResourceIsFile, group: ai-project-bot } ] } } }实现多文件分析命令// src/commands/multiFileAnalysis.ts import * as vscode from vscode export function registerMultiFileCommands(context: vscode.ExtensionContext) { const analyzeCmd vscode.commands.registerCommand( ai-project-bot.analyzeFiles, async (clickedFile: vscode.Uri, selectedFiles: vscode.Uri[]) { // selectedFiles 包含所有被选中的文件 const files selectedFiles || [clickedFile] if (files.length 2) { vscode.window.showWarningMessage(请至少选择 2 个文件进行分析) return } // 读取所有选中文件 const fileContents: string[] [] for (const file of files) { const content await vscode.workspace.fs.readFile(file) const fileName vscode.workspace.asRelativePath(file) fileContents.push( --- ${fileName} ---\n${Buffer.from(content).toString(utf8)} ) } const prompt [ 请分析这 ${files.length} 个文件之间的关系, , ...fileContents, , 请说明, 1. 每个文件的职责, 2. 它们之间的依赖/调用关系, 3. 数据流向如有, 4. 架构建议或潜在问题 ].join(\n) // 调用模型并展示结果 const models await vscode.lm.selectChatModels({ family: gpt-4o }) if (!models.length) { vscode.window.showErrorMessage(无可用语言模型) return } const outputChannel vscode.window.createOutputChannel(AI Project Bot) outputChannel.show() outputChannel.appendLine(\n--- 多文件分析 (${files.length} 个文件) ---\n) const messages [ vscode.LanguageModelChatMessage.User(prompt) ] const response await models[0].sendRequest(messages, {}) for await (const chunk of response.stream) { outputChannel.append(chunk) } } ) context.subscriptions.push(analyzeCmd) }使用方式在资源管理器中按住CtrlMac 为Cmd多选文件右键选择「AI: 分析所选文件的关系」AI 会读取全部选中文件并返回分析结果。快捷键与 UX 优化自定义键盘快捷键快捷键是效率的关键。在package.json中添加{ contributes: { keybindings: [ { command: ai-project-bot.explainSelection, key: ctrlshifte, mac: cmdshifte, when: editorTextFocus editorHasSelection }, { command: ai-project-bot.refactorSelection, key: ctrlshiftr, mac: cmdshiftr, when: editorTextFocus editorHasSelection }, { command: ai-project-bot.createFromTemplate, key: ctrlshiftn, mac: cmdshiftn, when: } ] } }when条件说明条件含义editorTextFocus焦点在编辑器中editorHasSelection有文本被选中explorerViewletVisible资源管理器面板可见!editorReadonly文件非只读多个条件用连接表示必须全部满足。状态栏指示器在状态栏添加一个入口让用户随时知道扩展处于活动状态// src/statusBar.ts import * as vscode from vscode export function createStatusBarItem(context: vscode.ExtensionContext) { const statusBar vscode.window.createStatusBarItem( vscode.StatusBarAlignment.Right, 100 ) statusBar.text $(hubot) AI Bot statusBar.tooltip 点击打开 AI Project Bot statusBar.command ai-project-bot.createFromTemplate statusBar.show() context.subscriptions.push(statusBar) }$(hubot)是 VS Code 内置图标Codicon语法完整图标集可查阅 VS Code 官方的 Codicon 图标库。打包与发布到 Marketplace发布前准备VS Code 扩展用官方工具vsce打包与发布npm install -g vscode/vsce正式上架前需要准备Azure DevOps 账号注册并创建组织Marketplace 发布走 Azure DevOps 体系Personal Access TokenPAT在 Azure DevOps 中创建权限选择Marketplace → Manage发布者 IDPublisher在 VS Code Marketplace 上创建你的发布者身份完善 package.json 元数据发布前补充市场展示所需的元数据{ publisher: your-publisher-id, repository: { type: git, url: https://github.com/yourname/ai-project-bot }, categories: [AI, Other], keywords: [ai, project, template, chat], icon: resources/icon.png, galleryBanner: { color: #1e1e2e, theme: dark } }另外还需要一个README.md用于 Marketplace 展示页以及CHANGELOG.md记录版本历史。打包与发布命令# 打包为 .vsix手动安装文件 vsce package # 发布到 Marketplace vsce publish打包后会生成ai-project-bot-0.0.1.vsix可以发给同事通过 VS Code「Install from VSIX」安装。执行vsce publish完成 Marketplace 正式发布后扩展通常几分钟内即可被搜索到。提示首次发布可能需要审核。确保 README 清晰、截图完整可以加快通过速度。总结与进阶方向至此你已经从零构建了一个功能完整的 VS Code 扩展完整跑通了「脚手架 → 声明贡献点 → 注册命令/视图/参与者 → F5 调试 → vsce 打包发布」的全流程用 Yeoman 脚手架创建扩展项目理解package.json与extension.ts的分工用 TreeView API 实现侧边栏项目模板列表与一键创建项目用 Chat Participant API 创建project-botAI 助手含斜杠命令与流式回答通过右键菜单实现选中代码的分析实现多文件关系批量分析添加自定义快捷键与状态栏指示器VS Code 扩展开发的想象空间远不止于此。可以沿着以下方向继续深入自定义 Webview 面板用 HTML/CSS/JS 构建完全自定义的界面如可视化架构图谱、交互式代码评审界面Language Model 工具注册可被 AI 调用的自定义工具如查询数据库、执行 API 请求Diagnostics 与 CodeLens在代码行内显示 AI 建议、性能提示与安全警告自定义语言支持为特定 DSL 或配置格式提供语法高亮、补全与诊断远程开发集成让扩展在 SSH、容器与 WSL 环境中正常工作在 easy-vibe 仓库中同系列的中文教程 VS Code 插件开发 则从另一个角度切入——构建不调用模型、只做本地规则检查的Engineering Guard扩展并系统分析了 GitHub Pull Requests、Dev Containers、Container Tools 等真实商业插件的设计取舍「把原需打开网页或敲命令的那一步留在 VS Code 里」可与本篇的 AI 扩展路线互为补充两者同属 easy-vibe 第三阶段跨平台开发 的学习内容。你的编辑器你做主。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考