企业官网建设流程全解析

用 easy-vibe 三步法构建 VS Code 扩展：从零打造 AI 项目助手 AI Project Bot

【免费下载链接】easy-vibe💻 vibe coding 101｜The 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 总览。

开始之前，请确认环境满足以下最低要求：

端到端 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 项目助手：

1.4 教程路线图

第 2 章 创建扩展项目（3 分钟）

2.1 用脚手架生成项目

VS Code 官方提供基于 Yeoman 的脚手架工具。你可以直接让 AI 助手执行以下步骤：

请帮我安装 VS Code 扩展脚手架工具并创建项目： 1. 安装 Yeoman 与 generator-code：npm 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 Q&A", "version": "0.0.1", "engines": { "vscode": "^1.90.0" }, "activationEvents": [], "main": "./out/extension.js", "contributes": { "commands": [], "menus": {}, "keybindings": [], "viewsContainers": {}, "views": {}, "chatParticipants": [] } }

关键字段说明：

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：注册一个可从命令面板（Ctrl+Shift+P）调用的命令

2.4 启动调试

按F5，VS Code 会打开一个新的Extension Development Host窗口——一个加载了你的扩展的全新 VS Code 实例。在新窗口中按Ctrl+Shift+P，输入 "Hello World"，看到弹出消息即表示扩展正常工作。

调试技巧：修改代码后，在 Extension Development Host 中按Ctrl+Shift+P->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" } ] } } }

这段配置完成三件事：

1. 在活动栏（Activity Bar）添加 "AI Project Bot" 图标入口
2. 在该入口下创建 "Project Templates" 视图
3. 在视图标题栏添加 "+" 按钮用于创建项目

3.3 实现 TreeDataProvider

TreeDataProvider 是 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 vite@latest {{name}} -- --template react-ts' }, { name: 'Vue 3 + TypeScript', description: 'Vue 3 project built with Vite', category: 'Frontend', command: 'npm create vite@latest {{name}} -- --template vue-ts' }, { name: 'Next.js App', description: 'Next.js App Router full-stack project', category: 'Frontend', command: 'npx create-next-app@latest {{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.TreeDataProvider<TemplateItem> { 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、/refactor
• Language Model API：调用 VS Code 内置模型（如 Copilot GPT-4o）
• Stream（流式输出）：通过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-bot@1" }, { "command": "ai-project-bot.refactorSelection", "when": "editorHasSelection", "group": "ai-project-bot@2" } ] } } }

关键配置说明：

• when: "editorHasSelection"：仅在存在选中文本时显示菜单
• group: "ai-project-bot@1"：菜单的分组与排序（@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) }

使用方法：在资源管理器中按住Ctrl（Mac 为Cmd）多选文件，右键选择 "AI: Analyze Relationships of Selected Files"，AI 会读取所有选中文件并返回分析结果。注意命令处理函数的签名(clickedFile: vscode.Uri, selectedFiles: vscode.Uri[])——这是 VS Code 资源管理器上下文菜单的约定：第一个参数是右键点击的文件，第二个参数是当前全部选中项，这正是一键分析的关键。

第 6 章 快捷键与体验优化（3 分钟）

6.1 自定义键盘快捷键

快捷键是效率的关键。在package.json中添加：

{ "contributes": { "keybindings": [ { "command": "ai-project-bot.explainSelection", "key": "ctrl+shift+e", "mac": "cmd+shift+e", "when": "editorTextFocus && editorHasSelection" }, { "command": "ai-project-bot.refactorSelection", "key": "ctrl+shift+r", "mac": "cmd+shift+r", "when": "editorTextFocus && editorHasSelection" }, { "command": "ai-project-bot.createFromTemplate", "key": "ctrl+shift+n", "mac": "cmd+shift+n", "when": "" } ] } }

when条件说明：

多个条件用&&连接，表示所有条件需同时满足。

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打包与发布：

请帮我安装 vsce：npm install -g @vscode/vsce

发布前需要准备：

1. Azure DevOps 账户：在 dev.azure.com 注册并创建组织
2. Personal Access Token（PAT）：在 Azure DevOps 创建，授权范围为Marketplace -> Manage
3. Publisher 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 扩展：

1. 用 Yeoman 脚手架创建扩展项目，理解package.json与extension.ts的职责
2. 用 TreeView API 实现侧边栏项目模板列表与一键创建项目
3. 用 Chat Participant API 创建@project-botAI 助手，包含斜杠命令与流式响应
4. 实现右键菜单的选中代码分析
5. 实现多文件关系分析
6. 添加自定义快捷键与状态栏指示器

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 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe