尧图网页设计 
用 easy-vibe 三步法构建 VS Code 扩展从零打造 AI 项目助手 AI Project Bot【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇技术指南带你完整走通 VS Code 扩展开发的闭环从 Yeoman 脚手架生成项目到用 TreeView API 实现一键项目模板生成、用 Chat Participant API 接入 AI 对话、用右键菜单实现选中代码分析与多文件关系分析、再到自定义快捷键与发布到 VS Code Marketplace。你可以在 Node.js 18 与 VS Code 1.90 环境下配合 AI 编码助手以 vibe coding 的方式逐步完成全部开发、调试与发布流程。前置环境与教程定位本教程属于 easy-vibe 项目docs/es-es/stage-3/cross-platform系列跨平台开发章节中的一环与 如何选择适合你的应用平台、Electron 桌面应用、浏览器 AI 扩展等教程并列均面向已完成初中级开发阶段、熟悉前端框架React/Vue与后端开发的进阶学习者详见 Stage 3 总览。开始之前请确认环境满足以下最低要求依赖版本/说明Node.js18.0VS Code1.90Chat Participant API 与 Language Model API 的可用前提AI 编码助手Cursor / Trae / Claude Code用于 vibe coding 生成大部分代码GitHub Copilot 订阅可选但需要它为 Language Model API 提供模型调用能力端到端 Vibe Coding本教程的理念是让 AI 编码助手生成绝大部分代码你只需要理解核心概念与架构然后用自然语言描述需求即可。第 1 章 VS Code 扩展开发是什么1.1 VS Code 扩展能做什么你每天都在使用 VS Code 扩展Prettier 格式化代码、GitLens 展示 Git 历史、GitHub Copilot 辅助写码。这些扩展本质上都是用 TypeScript/JavaScript 编写、通过 VS Code API 扩展编辑器的程序。而扩展的实际能力远超多数人的预期新增 UI 元素侧边栏面板、状态栏信息、自定义 Webview 页面处理文件与代码读取、修改、创建文件分析代码结构集成外部服务调用 API、连接数据库、集成 CI/CD扩展编辑器能力自定义语言支持、代码补全、诊断添加 AI 能力用 Chat Participant API 创建 AI 助手用 Language Model API 调用模型1.2 VS Code 扩展的核心架构VS Code 扩展运行在一个独立的Extension Host扩展宿主进程中与编辑器主进程隔离。这意味着即使某个扩展崩溃编辑器本身也不会受影响。一个典型扩展由四部分构成package.json清单扩展的身份证声明名称、入口文件、贡献点commands、menus、keybindings等extension.ts入口文件扩展的大脑导出activate()与deactivate()贡献点Contribution Points扩展在 package.json 中向 VS Code 贡献的能力命令、菜单项、快捷键、视图等VS Code API用于操作编辑器能力的 TypeScript API 集合VS Code 编辑器 │ ├── Extension Host扩展进程 │ ├── 你的扩展 │ │ ├── package.json - 声明我能做什么 │ │ ├── extension.ts - 实现怎么做 │ │ └── 其他模块 - 具体功能代码 │ ├── 其他扩展 A │ └── 其他扩展 B │ └── 编辑器主进程UI 渲染1.3 我们要构建什么扩展本教程构建的扩展名为AI Project Bot一个具备以下功能的 AI 项目助手功能说明项目模板侧边栏模板列表一键生成项目脚手架AI 对话VS Code Chat 面板中的project-bot参与者回答项目相关问题文件/片段聊天右键选中代码或文件发送给 AI 做分析/解释/重构多文件问答在资源管理器中多选文件让 AI 分析文件间的关系与逻辑快捷键自定义键位绑定快速触发常用操作1.4 教程路线图步骤耗时内容1. 创建扩展项目3 分钟脚手架生成项目理解核心文件2. 实现项目模板5 分钟用 TreeView 在侧边栏展示模板并生成项目3. 实现 AI Chat 参与者5 分钟通过 Chat Participant API 创建project-bot4. 实现文件/片段聊天与多文件问答5 分钟右键菜单 多选分析5. 添加快捷键与打磨体验3 分钟键盘快捷键与状态栏指示器6. 发布到 Marketplace可选打包并提交第 2 章 创建扩展项目3 分钟2.1 用脚手架生成项目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 # 快速上手指南可删除2.2 理解 package.json扩展的身份证package.json是 VS Code 扩展的核心文件。除了普通 npm 字段外它通过contributes声明扩展向 VS Code 贡献的一切能力{ name: ai-project-bot, displayName: AI Project Bot, description: AI project assistant - template generation, intelligent chat, multi-file QA, 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扩展贡献的全部能力命令、菜单、快捷键、视图等2.3 理解 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调用的命令2.4 启动调试按F5VS Code 会打开一个新的Extension Development Host窗口——一个加载了你的扩展的全新 VS Code 实例。在新窗口中按CtrlShiftP输入 Hello World看到弹出消息即表示扩展正常工作。调试技巧修改代码后在 Extension Development Host 中按CtrlShiftP-Developer: Reload Window可快速重载扩展无需重启整个窗口。第 3 章 实现项目模板5 分钟3.1 设计模板系统我们希望在 VS Code 侧边栏增加一个项目模板面板用户能浏览模板并一键生成项目骨架这用到 VS Code 的TreeView API。让 AI 实现以下需求请帮我在 ai-project-bot 中实现项目模板 1. 在 package.json 添加贡献点 - 新增 viewsContainers.activitybar 项id 为 project-bot标题 AI Project Bot - 在其下新增视图id 为 projectTemplates名称 Project Templates - 新增命令 ai-project-bot.createFromTemplate标题 Create Project from Template 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 函数 - 允许用户选择目标文件夹 - 按模板类型生成项目结构3.2 在 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: Project Templates } ] }, commands: [ { command: ai-project-bot.createFromTemplate, title: Create Project from Template, icon: $(add) } ], menus: { view/title: [ { command: ai-project-bot.createFromTemplate, when: view projectTemplates, group: navigation } ] } } }这段配置完成三件事在活动栏Activity Bar添加 AI Project Bot 图标入口在该入口下创建 Project Templates 视图在视图标题栏添加 按钮用于创建项目3.3 实现 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: React project built with Vite, category: Frontend, command: npm create vitelatest {{name}} -- --template react-ts }, { name: Vue 3 TypeScript, description: Vue 3 project built with Vite, category: Frontend, command: npm create vitelatest {{name}} -- --template vue-ts }, { name: Next.js App, description: Next.js App Router full-stack project, category: Frontend, command: npx create-next-applatest {{name}} --typescript --app }, { name: Express API, description: Express TypeScript REST API, category: Backend, command: npx create-express-api {{name}} }, { name: FastAPI Python, description: Python FastAPI backend project, category: Backend, 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}\nCommand: ${template.command} this.contextValue template this.command { command: ai-project-bot.createFromTemplate, title: Create Project, 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)) } }3.4 注册视图与创建命令在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: Choose a project template } ) if (!pick) return template pick.template } // 询问项目名称 const name await vscode.window.showInputBox({ prompt: Enter project name, placeHolder: my-awesome-project }) if (!name) return // 询问目标文件夹 const folder await vscode.window.showOpenDialog({ canSelectFolders: true, openLabel: Select target folder }) 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(Creating ${template.name} project: ${name}) } ) context.subscriptions.push(createCmd) }现在按 F5 调试活动栏出现 AI Project Bot展开模板列表点击任意模板即可创建项目。这里值得注意的实现细节是模板数据TEMPLATES数组把脚手架命令作为模板的一等公民字段创建流程通过showQuickPick、showInputBox、showOpenDialog三个对话框依次收集模板、项目名与目标目录最后在集成终端中执行cd 目录 脚手架命令这是一种轻量、无额外依赖的脚手架方案——你可以在src/templates/templateProvider.ts中随意增删模板条目来扩展模板库。第 4 章 实现 AI Chat 参与者5 分钟4.1 什么是 Chat Participant API从 VS Code 1.90 起扩展可以用Chat Participant API在 Chat 面板中创建自己的 AI 助手。用户输入project-bot help me analyze this project architecture你的扩展收到消息并返回模型生成的回答。核心概念Participant参与者你的助手在 Chat 面板中的身份通过name唤起Slash Commands斜杠命令参与者支持的快捷命令如/explain、/refactorLanguage Model API调用 VS Code 内置模型如 Copilot GPT-4oStream流式输出通过stream.markdown()逐步输出响应4.2 在 package.json 中声明 Chat Participant在contributes中添加{ contributes: { chatParticipants: [ { id: ai-project-bot.projectBot, name: project-bot, fullName: AI Project Bot, description: Your AI project assistant for code analysis, architecture explanation, and solution generation, isSticky: true } ] } }isSticky: true表示一旦选中该参与者后续消息默认发送给它无需每次输入project-bot。4.3 实现 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(No language model available. Please make sure GitHub Copilot is installed.) return } // 根据斜杠命令构造系统提示词 let systemPrompt You are a professional project development assistant. if (request.command explain) { systemPrompt You are a code explanation expert. Please explain user code in concise Chinese, including purpose, logic flow, and key design decisions. } else if (request.command refactor) { systemPrompt You are a code refactoring expert. Analyze user code and provide specific refactoring suggestions with improved code examples. } else if (request.command template) { systemPrompt You are a tech stack selection expert. Recommend suitable tech stacks and project templates based on user requirements. } // 构造消息 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: Explain code function and logic }, { name: refactor, description: Provide refactoring suggestions and improvements }, { name: template, description: Recommend suitable project templates and tech stacks } ] } // 注册追问建议 participant.followupProvider { provideFollowups: (result) { if (result.metadata?.command explain) { return [ { prompt: Can you draw a flowchart?, label: Generate flowchart }, { prompt: Any potential bugs here?, label: Check potential issues } ] } return [] } } context.subscriptions.push(participant) }在extension.ts中调用注册import { registerChatParticipant } from ./chat/chatParticipant export function activate(context: vscode.ExtensionContext) { // ... 前面的模板注册代码 ... registerChatParticipant(context) }现在在 Chat 面板输入project-bot /explain what does this code do?扩展会调用模型并生成解释。从实现上看这段代码展示了 Chat Participant 的三层能力组合slashCommandProvider定义可用的快捷命令并驱动不同的系统提示词followupProvider根据上一次调用的metadata.command返回上下文相关的追问建议主处理器通过vscode.lm.selectChatModels挑选模型并用sendRequest流式获取结果。第 5 章 文件/片段聊天与多文件问答5 分钟5.1 右键菜单把选中代码发送给 AI我们希望用户在编辑器中选中代码后能从右键菜单把代码发送给 AI。这用到 VS Code 的Context Menu上下文菜单贡献点{ contributes: { commands: [ { command: ai-project-bot.explainSelection, title: AI: Explain Selected Code }, { command: ai-project-bot.refactorSelection, title: AI: Refactor Selected Code } ], 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控制顺序5.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 // 构造带上下文的提示词 const prompt [ Please explain the following code (from ${fileName}, lines ${startLine}-${endLine}):, , selectedText, , Please explain: 1) what this code does 2) core logic 3) possible improvements ].join(\n) // 调用 Language Model API const models await vscode.lm.selectChatModels({ family: gpt-4o }) if (!models.length) { vscode.window.showErrorMessage(No language model available) return } // 在输出面板显示结果 const outputChannel vscode.window.createOutputChannel(AI Project Bot) outputChannel.show() outputChannel.appendLine(\n--- Code Explanation (${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) }5.3 多文件问答批量分析文件间关系这是最有价值的功能之一在资源管理器中多选文件一键让 AI 分析文件间的关系与逻辑。先在package.json添加资源管理器右键菜单{ contributes: { commands: [ { command: ai-project-bot.analyzeFiles, title: AI: Analyze Relationships of Selected Files } ], 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(Please select at least 2 files for analysis) 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 [ Please analyze relationships among these ${files.length} files:, , ...fileContents, , Please explain:, 1. Responsibilities of each file, 2. Dependency/call relationships among them, 3. Data flow (if any), 4. Architectural suggestions or potential issues ].join(\n) // 调用模型并展示结果 const models await vscode.lm.selectChatModels({ family: gpt-4o }) if (!models.length) { vscode.window.showErrorMessage(No language model available) return } const outputChannel vscode.window.createOutputChannel(AI Project Bot) outputChannel.show() outputChannel.appendLine(\n--- Multi-file Analysis (${files.length} files) ---\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: Analyze Relationships of Selected FilesAI 会读取所有选中文件并返回分析结果。注意命令处理函数的签名(clickedFile: vscode.Uri, selectedFiles: vscode.Uri[])——这是 VS Code 资源管理器上下文菜单的约定第一个参数是右键点击的文件第二个参数是当前全部选中项这正是一键分析的关键。第 6 章 快捷键与体验优化3 分钟6.1 自定义键盘快捷键快捷键是效率的关键。在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文件非只读多个条件用连接表示所有条件需同时满足。6.2 状态栏指示器在状态栏添加快捷入口让用户随时知道扩展正在运行// 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 Click to open AI Project Bot statusBar.command ai-project-bot.createFromTemplate statusBar.show() context.subscriptions.push(statusBar) }$(hubot)是 VS Code 内置图标Codicon的语法完整的图标库可在 Codicon 官方文档中查阅。第 7 章 发布到 Marketplace可选7.1 发布前准备VS Code 扩展使用vsce打包与发布请帮我安装 vscenpm install -g vscode/vsce发布前需要准备Azure DevOps 账户在 dev.azure.com 注册并创建组织Personal Access TokenPAT在 Azure DevOps 创建授权范围为Marketplace - ManagePublisher ID在 VS Code Marketplace 的管理页面创建发布者身份7.2 完善 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记录版本历史。7.3 打包与发布# 打包为 .vsix手动安装文件 vsce package # 发布到 Marketplace vsce publish打包后会得到ai-project-bot-0.0.1.vsix。你可以把这个文件发给朋友他们在 VS Code 中通过 Install from VSIX 即可安装。正式发布到 Marketplace 则执行vsce publish扩展通常在几分钟内可见。提示首次发布可能需要审核。确保 README 清晰、截图完整有助于加快审批。第 8 章 总结与进阶方向至此你已经从零构建了一个功能完整的 VS Code 扩展用 Yeoman 脚手架创建扩展项目理解package.json与extension.ts的职责用 TreeView API 实现侧边栏项目模板列表与一键创建项目用 Chat Participant API 创建project-botAI 助手包含斜杠命令与流式响应实现右键菜单的选中代码分析实现多文件关系分析添加自定义快捷键与状态栏指示器VS Code 扩展开发的想象空间巨大——你每天使用的那些实用扩展其底层技术正是你刚刚学到的这套 API 体系。进阶方向自定义 Webview 面板用 HTML/CSS/JS 构建完全自定义的 UI如可视化架构图、交互式代码审查界面Language Model Tools注册可供 AI 调用的自定义工具如查询数据库或执行 API 请求诊断与 CodeLens在代码行内显示 AI 建议、性能提示与安全警告自定义语言支持为 DSL 或特定配置格式提供语法高亮、自动补全与诊断远程开发集成让扩展在 SSH、容器与 WSL 环境中正常工作你的编辑器你的规则。参考资料VS Code Extension API 官方文档Chat Participant API 指南Language Model API 指南TreeView API 指南Webview API 指南VS Code 扩展发布指南Codicon 图标库本文档对应的英文原版位于 docs/en/stage-3/cross-platform/vscode-extension/index.md其他语言版本可参考 docs/zh-cn/stage-3/cross-platform/vscode-extension/index.md 等目录教程配套的演示截图位于 docs/zh-cn/stage-3/cross-platform/vscode-extension/images 目录。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 easy-vibe 三步法构建 VS Code 扩展：从零打造 AI 项目助手 AI Project Bot
用 easy-vibe 三步法构建 VS Code 扩展从零打造 AI 项目助手 AI Project Bot【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇技术指南带你完整走通 VS Code 扩展开发的闭环从 Yeoman 脚手架生成项目到用 TreeView API 实现一键项目模板生成、用 Chat Participant API 接入 AI 对话、用右键菜单实现选中代码分析与多文件关系分析、再到自定义快捷键与发布到 VS Code Marketplace。你可以在 Node.js 18 与 VS Code 1.90 环境下配合 AI 编码助手以 vibe coding 的方式逐步完成全部开发、调试与发布流程。前置环境与教程定位本教程属于 easy-vibe 项目docs/es-es/stage-3/cross-platform系列跨平台开发章节中的一环与 如何选择适合你的应用平台、Electron 桌面应用、浏览器 AI 扩展等教程并列均面向已完成初中级开发阶段、熟悉前端框架React/Vue与后端开发的进阶学习者详见 Stage 3 总览。开始之前请确认环境满足以下最低要求依赖版本/说明Node.js18.0VS Code1.90Chat Participant API 与 Language Model API 的可用前提AI 编码助手Cursor / Trae / Claude Code用于 vibe coding 生成大部分代码GitHub Copilot 订阅可选但需要它为 Language Model API 提供模型调用能力端到端 Vibe Coding本教程的理念是让 AI 编码助手生成绝大部分代码你只需要理解核心概念与架构然后用自然语言描述需求即可。第 1 章 VS Code 扩展开发是什么1.1 VS Code 扩展能做什么你每天都在使用 VS Code 扩展Prettier 格式化代码、GitLens 展示 Git 历史、GitHub Copilot 辅助写码。这些扩展本质上都是用 TypeScript/JavaScript 编写、通过 VS Code API 扩展编辑器的程序。而扩展的实际能力远超多数人的预期新增 UI 元素侧边栏面板、状态栏信息、自定义 Webview 页面处理文件与代码读取、修改、创建文件分析代码结构集成外部服务调用 API、连接数据库、集成 CI/CD扩展编辑器能力自定义语言支持、代码补全、诊断添加 AI 能力用 Chat Participant API 创建 AI 助手用 Language Model API 调用模型1.2 VS Code 扩展的核心架构VS Code 扩展运行在一个独立的Extension Host扩展宿主进程中与编辑器主进程隔离。这意味着即使某个扩展崩溃编辑器本身也不会受影响。一个典型扩展由四部分构成package.json清单扩展的身份证声明名称、入口文件、贡献点commands、menus、keybindings等extension.ts入口文件扩展的大脑导出activate()与deactivate()贡献点Contribution Points扩展在 package.json 中向 VS Code 贡献的能力命令、菜单项、快捷键、视图等VS Code API用于操作编辑器能力的 TypeScript API 集合VS Code 编辑器 │ ├── Extension Host扩展进程 │ ├── 你的扩展 │ │ ├── package.json - 声明我能做什么 │ │ ├── extension.ts - 实现怎么做 │ │ └── 其他模块 - 具体功能代码 │ ├── 其他扩展 A │ └── 其他扩展 B │ └── 编辑器主进程UI 渲染1.3 我们要构建什么扩展本教程构建的扩展名为AI Project Bot一个具备以下功能的 AI 项目助手功能说明项目模板侧边栏模板列表一键生成项目脚手架AI 对话VS Code Chat 面板中的project-bot参与者回答项目相关问题文件/片段聊天右键选中代码或文件发送给 AI 做分析/解释/重构多文件问答在资源管理器中多选文件让 AI 分析文件间的关系与逻辑快捷键自定义键位绑定快速触发常用操作1.4 教程路线图步骤耗时内容1. 创建扩展项目3 分钟脚手架生成项目理解核心文件2. 实现项目模板5 分钟用 TreeView 在侧边栏展示模板并生成项目3. 实现 AI Chat 参与者5 分钟通过 Chat Participant API 创建project-bot4. 实现文件/片段聊天与多文件问答5 分钟右键菜单 多选分析5. 添加快捷键与打磨体验3 分钟键盘快捷键与状态栏指示器6. 发布到 Marketplace可选打包并提交第 2 章 创建扩展项目3 分钟2.1 用脚手架生成项目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 # 快速上手指南可删除2.2 理解 package.json扩展的身份证package.json是 VS Code 扩展的核心文件。除了普通 npm 字段外它通过contributes声明扩展向 VS Code 贡献的一切能力{ name: ai-project-bot, displayName: AI Project Bot, description: AI project assistant - template generation, intelligent chat, multi-file QA, 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扩展贡献的全部能力命令、菜单、快捷键、视图等2.3 理解 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调用的命令2.4 启动调试按F5VS Code 会打开一个新的Extension Development Host窗口——一个加载了你的扩展的全新 VS Code 实例。在新窗口中按CtrlShiftP输入 Hello World看到弹出消息即表示扩展正常工作。调试技巧修改代码后在 Extension Development Host 中按CtrlShiftP-Developer: Reload Window可快速重载扩展无需重启整个窗口。第 3 章 实现项目模板5 分钟3.1 设计模板系统我们希望在 VS Code 侧边栏增加一个项目模板面板用户能浏览模板并一键生成项目骨架这用到 VS Code 的TreeView API。让 AI 实现以下需求请帮我在 ai-project-bot 中实现项目模板 1. 在 package.json 添加贡献点 - 新增 viewsContainers.activitybar 项id 为 project-bot标题 AI Project Bot - 在其下新增视图id 为 projectTemplates名称 Project Templates - 新增命令 ai-project-bot.createFromTemplate标题 Create Project from Template 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 函数 - 允许用户选择目标文件夹 - 按模板类型生成项目结构3.2 在 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: Project Templates } ] }, commands: [ { command: ai-project-bot.createFromTemplate, title: Create Project from Template, icon: $(add) } ], menus: { view/title: [ { command: ai-project-bot.createFromTemplate, when: view projectTemplates, group: navigation } ] } } }这段配置完成三件事在活动栏Activity Bar添加 AI Project Bot 图标入口在该入口下创建 Project Templates 视图在视图标题栏添加 按钮用于创建项目3.3 实现 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: React project built with Vite, category: Frontend, command: npm create vitelatest {{name}} -- --template react-ts }, { name: Vue 3 TypeScript, description: Vue 3 project built with Vite, category: Frontend, command: npm create vitelatest {{name}} -- --template vue-ts }, { name: Next.js App, description: Next.js App Router full-stack project, category: Frontend, command: npx create-next-applatest {{name}} --typescript --app }, { name: Express API, description: Express TypeScript REST API, category: Backend, command: npx create-express-api {{name}} }, { name: FastAPI Python, description: Python FastAPI backend project, category: Backend, 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}\nCommand: ${template.command} this.contextValue template this.command { command: ai-project-bot.createFromTemplate, title: Create Project, 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)) } }3.4 注册视图与创建命令在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: Choose a project template } ) if (!pick) return template pick.template } // 询问项目名称 const name await vscode.window.showInputBox({ prompt: Enter project name, placeHolder: my-awesome-project }) if (!name) return // 询问目标文件夹 const folder await vscode.window.showOpenDialog({ canSelectFolders: true, openLabel: Select target folder }) 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(Creating ${template.name} project: ${name}) } ) context.subscriptions.push(createCmd) }现在按 F5 调试活动栏出现 AI Project Bot展开模板列表点击任意模板即可创建项目。这里值得注意的实现细节是模板数据TEMPLATES数组把脚手架命令作为模板的一等公民字段创建流程通过showQuickPick、showInputBox、showOpenDialog三个对话框依次收集模板、项目名与目标目录最后在集成终端中执行cd 目录 脚手架命令这是一种轻量、无额外依赖的脚手架方案——你可以在src/templates/templateProvider.ts中随意增删模板条目来扩展模板库。第 4 章 实现 AI Chat 参与者5 分钟4.1 什么是 Chat Participant API从 VS Code 1.90 起扩展可以用Chat Participant API在 Chat 面板中创建自己的 AI 助手。用户输入project-bot help me analyze this project architecture你的扩展收到消息并返回模型生成的回答。核心概念Participant参与者你的助手在 Chat 面板中的身份通过name唤起Slash Commands斜杠命令参与者支持的快捷命令如/explain、/refactorLanguage Model API调用 VS Code 内置模型如 Copilot GPT-4oStream流式输出通过stream.markdown()逐步输出响应4.2 在 package.json 中声明 Chat Participant在contributes中添加{ contributes: { chatParticipants: [ { id: ai-project-bot.projectBot, name: project-bot, fullName: AI Project Bot, description: Your AI project assistant for code analysis, architecture explanation, and solution generation, isSticky: true } ] } }isSticky: true表示一旦选中该参与者后续消息默认发送给它无需每次输入project-bot。4.3 实现 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(No language model available. Please make sure GitHub Copilot is installed.) return } // 根据斜杠命令构造系统提示词 let systemPrompt You are a professional project development assistant. if (request.command explain) { systemPrompt You are a code explanation expert. Please explain user code in concise Chinese, including purpose, logic flow, and key design decisions. } else if (request.command refactor) { systemPrompt You are a code refactoring expert. Analyze user code and provide specific refactoring suggestions with improved code examples. } else if (request.command template) { systemPrompt You are a tech stack selection expert. Recommend suitable tech stacks and project templates based on user requirements. } // 构造消息 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: Explain code function and logic }, { name: refactor, description: Provide refactoring suggestions and improvements }, { name: template, description: Recommend suitable project templates and tech stacks } ] } // 注册追问建议 participant.followupProvider { provideFollowups: (result) { if (result.metadata?.command explain) { return [ { prompt: Can you draw a flowchart?, label: Generate flowchart }, { prompt: Any potential bugs here?, label: Check potential issues } ] } return [] } } context.subscriptions.push(participant) }在extension.ts中调用注册import { registerChatParticipant } from ./chat/chatParticipant export function activate(context: vscode.ExtensionContext) { // ... 前面的模板注册代码 ... registerChatParticipant(context) }现在在 Chat 面板输入project-bot /explain what does this code do?扩展会调用模型并生成解释。从实现上看这段代码展示了 Chat Participant 的三层能力组合slashCommandProvider定义可用的快捷命令并驱动不同的系统提示词followupProvider根据上一次调用的metadata.command返回上下文相关的追问建议主处理器通过vscode.lm.selectChatModels挑选模型并用sendRequest流式获取结果。第 5 章 文件/片段聊天与多文件问答5 分钟5.1 右键菜单把选中代码发送给 AI我们希望用户在编辑器中选中代码后能从右键菜单把代码发送给 AI。这用到 VS Code 的Context Menu上下文菜单贡献点{ contributes: { commands: [ { command: ai-project-bot.explainSelection, title: AI: Explain Selected Code }, { command: ai-project-bot.refactorSelection, title: AI: Refactor Selected Code } ], 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控制顺序5.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 // 构造带上下文的提示词 const prompt [ Please explain the following code (from ${fileName}, lines ${startLine}-${endLine}):, , selectedText, , Please explain: 1) what this code does 2) core logic 3) possible improvements ].join(\n) // 调用 Language Model API const models await vscode.lm.selectChatModels({ family: gpt-4o }) if (!models.length) { vscode.window.showErrorMessage(No language model available) return } // 在输出面板显示结果 const outputChannel vscode.window.createOutputChannel(AI Project Bot) outputChannel.show() outputChannel.appendLine(\n--- Code Explanation (${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) }5.3 多文件问答批量分析文件间关系这是最有价值的功能之一在资源管理器中多选文件一键让 AI 分析文件间的关系与逻辑。先在package.json添加资源管理器右键菜单{ contributes: { commands: [ { command: ai-project-bot.analyzeFiles, title: AI: Analyze Relationships of Selected Files } ], 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(Please select at least 2 files for analysis) 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 [ Please analyze relationships among these ${files.length} files:, , ...fileContents, , Please explain:, 1. Responsibilities of each file, 2. Dependency/call relationships among them, 3. Data flow (if any), 4. Architectural suggestions or potential issues ].join(\n) // 调用模型并展示结果 const models await vscode.lm.selectChatModels({ family: gpt-4o }) if (!models.length) { vscode.window.showErrorMessage(No language model available) return } const outputChannel vscode.window.createOutputChannel(AI Project Bot) outputChannel.show() outputChannel.appendLine(\n--- Multi-file Analysis (${files.length} files) ---\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: Analyze Relationships of Selected FilesAI 会读取所有选中文件并返回分析结果。注意命令处理函数的签名(clickedFile: vscode.Uri, selectedFiles: vscode.Uri[])——这是 VS Code 资源管理器上下文菜单的约定第一个参数是右键点击的文件第二个参数是当前全部选中项这正是一键分析的关键。第 6 章 快捷键与体验优化3 分钟6.1 自定义键盘快捷键快捷键是效率的关键。在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文件非只读多个条件用连接表示所有条件需同时满足。6.2 状态栏指示器在状态栏添加快捷入口让用户随时知道扩展正在运行// 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 Click to open AI Project Bot statusBar.command ai-project-bot.createFromTemplate statusBar.show() context.subscriptions.push(statusBar) }$(hubot)是 VS Code 内置图标Codicon的语法完整的图标库可在 Codicon 官方文档中查阅。第 7 章 发布到 Marketplace可选7.1 发布前准备VS Code 扩展使用vsce打包与发布请帮我安装 vscenpm install -g vscode/vsce发布前需要准备Azure DevOps 账户在 dev.azure.com 注册并创建组织Personal Access TokenPAT在 Azure DevOps 创建授权范围为Marketplace - ManagePublisher ID在 VS Code Marketplace 的管理页面创建发布者身份7.2 完善 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记录版本历史。7.3 打包与发布# 打包为 .vsix手动安装文件 vsce package # 发布到 Marketplace vsce publish打包后会得到ai-project-bot-0.0.1.vsix。你可以把这个文件发给朋友他们在 VS Code 中通过 Install from VSIX 即可安装。正式发布到 Marketplace 则执行vsce publish扩展通常在几分钟内可见。提示首次发布可能需要审核。确保 README 清晰、截图完整有助于加快审批。第 8 章 总结与进阶方向至此你已经从零构建了一个功能完整的 VS Code 扩展用 Yeoman 脚手架创建扩展项目理解package.json与extension.ts的职责用 TreeView API 实现侧边栏项目模板列表与一键创建项目用 Chat Participant API 创建project-botAI 助手包含斜杠命令与流式响应实现右键菜单的选中代码分析实现多文件关系分析添加自定义快捷键与状态栏指示器VS Code 扩展开发的想象空间巨大——你每天使用的那些实用扩展其底层技术正是你刚刚学到的这套 API 体系。进阶方向自定义 Webview 面板用 HTML/CSS/JS 构建完全自定义的 UI如可视化架构图、交互式代码审查界面Language Model Tools注册可供 AI 调用的自定义工具如查询数据库或执行 API 请求诊断与 CodeLens在代码行内显示 AI 建议、性能提示与安全警告自定义语言支持为 DSL 或特定配置格式提供语法高亮、自动补全与诊断远程开发集成让扩展在 SSH、容器与 WSL 环境中正常工作你的编辑器你的规则。参考资料VS Code Extension API 官方文档Chat Participant API 指南Language Model API 指南TreeView API 指南Webview API 指南VS Code 扩展发布指南Codicon 图标库本文档对应的英文原版位于 docs/en/stage-3/cross-platform/vscode-extension/index.md其他语言版本可参考 docs/zh-cn/stage-3/cross-platform/vscode-extension/index.md 等目录教程配套的演示截图位于 docs/zh-cn/stage-3/cross-platform/vscode-extension/images 目录。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考