Vibe Coding 实战用 AI 从零构建 VS Code 智能项目助手插件 AI Project Bot【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇技术指南来自 Easy Vibevibe coding 101 课程跨平台开发模块完整讲解如何从零构建一个名为AI Project Bot的 VS Code 智能项目助手插件包含一键生成项目模板的侧边栏、基于 Chat Participant API 的project-botAI 对话、针对选中代码/多文件的 AI 分析、自定义快捷键以及打包发布到 VS Code Marketplace 的完整闭环。读完本文你将掌握 VS Code 扩展开发的核心骨架package.json贡献点、extension.ts生命周期、TreeView、Chat Participant、Language Model API、vsce 打包并能用自然语言让 AI 编程助手Cursor / Trae / Claude Code帮你生成绝大部分代码。一、VS Code 插件能做什么你每天都在使用 VS Code 插件Prettier 负责格式化代码GitLens 展示 Git 历史GitHub Copilot 辅助写代码。这些插件本质上都是用 TypeScript/JavaScript 编写、通过 VS Code API 扩展编辑器的程序。插件的能力远超多数人的想象新增 UI 元素侧边栏面板、状态栏信息、自定义 Webview 页面处理文件与代码读取、修改、创建文件解析代码结构集成外部服务调用 API、连接数据库、接入 CI/CD扩展编辑器能力自定义语言支持、代码补全、诊断注入 AI 能力通过 Chat Participant API 构建智能助手通过 Language Model API 调用模型二、插件的底层架构Extension Host 与贡献点VS Code 插件运行在独立的Extension Host扩展宿主进程中与编辑器主进程隔离。这意味着即使某个插件崩溃也不会拖垮整个编辑器主界面。一个典型插件由四个部分组成package.json清单插件的身份证声明名称、入口文件、贡献点commands、menus、keybindings等extension.ts入口文件插件的大脑导出activate()和deactivate()贡献点Contribution Points插件向 VS Code 贡献的能力命令、菜单、快捷键、视图等VS Code API用于驱动编辑器能力的 TypeScript 接口集合VS Code 编辑器 │ ├── Extension Host插件进程 │ ├── 你的插件 │ │ ├── package.json - 声明我能做什么 │ │ ├── extension.ts - 实现我怎么做 │ │ └── 其他模块 - 具体功能代码 │ ├── 插件 A │ └── 插件 B │ └── 编辑器主进程UI 展示三、我们要构建什么AI Project Bot本教程将构建一个名为AI Project Bot的智能项目助手插件具备以下能力功能描述项目模板侧边栏模板列表一键生成项目结构AI 对话VS Code Chat 中的project-bot参与者用于项目问答文件/代码片段对话右键选中代码或文件发送给 AI 分析/解释/重构多文件问答在资源管理器中多选文件让 AI 分析关联与逻辑快捷键自定义键盘快捷键快速触发常用操作本课全程践行Vibe Coding 理念大部分代码由 AI 编程助手生成你只需要理解核心概念和结构然后用自然语言描述需求即可。前置环境要求Node.js 环境版本 18.0VS Code 编辑器版本 1.90你的 AI 编程助手Cursor / Trae / Claude Code可选GitHub Copilot 订阅用于访问 Language Model API课程路线图创建插件项目3 分钟用脚手架工具创建项目理解核心文件实现项目模板5 分钟用 TreeView 在侧边栏展示模板并创建项目实现 AI Chat 参与者5 分钟通过 Chat Participant API 创建project-bot实现文件/片段对话与多文件问答5 分钟右键菜单 多选添加快捷键与体验优化3 分钟键盘快捷键与状态栏提示发布到市场可选打包与提交四、创建插件项目3 分钟4.1 使用官方脚手架VS Code 官方提供 Yeoman 脚手架工具。让 AI 助手帮你执行请帮我安装 VS Code 插件脚手架工具并创建项目 1. 安装 Yeoman 和生成器npm install -g yo generator-code 2. 运行 yo code 并选择 - 类型New Extension (TypeScript) - 名称ai-project-bot - 标识符ai-project-bot - 描述智能项目助手 - 创建模板、智能对话、多文件问答 - 包管理器npm 3. 进入项目目录并安装依赖生成的项目结构ai-project-bot/ ├── .vscode/ │ ├── launch.json # 调试配置F5 启动调试 │ └── tasks.json # 构建任务 ├── src/ │ └── extension.ts # 插件入口文件 ├── package.json # 插件清单最重要的文件 ├── tsconfig.json # TypeScript 配置 └── vsc-extension-quickstart.md # 快速上手指南可删除4.2 package.json插件的身份证package.json是 VS Code 插件的核心文件。除了常规 npm 字段它还通过contributes声明插件向 VS Code 贡献的一切{ name: ai-project-bot, displayName: AI Project Bot, description: 智能项目助手 - 创建模板、智能对话、多文件问答, 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所有贡献功能命令、菜单、快捷键、视图等4.3 extension.ts插件的大脑打开src/extension.ts你会看到两个核心函数import * as vscode from vscode // 插件激活时调用首次执行命令、打开特定文件等 export function activate(context: vscode.ExtensionContext) { console.log(AI Project Bot activated!) // 注册命令、视图、Chat 参与者等 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调用的命令4.4 启动调试按F5VS Code 会打开一个新的Extension Development Host窗口——这是一个加载了你的插件的新版 VS Code 实例。在新窗口按CtrlShiftP输入 Hello World看到弹窗即表示插件已生效。调试技巧修改代码后在 Extension Development Host 窗口中按CtrlShiftP-Developer: Reload Window可快速重载插件。五、实现项目模板TreeView 侧边栏5 分钟5.1 设计模板系统目标是在 VS Code 侧边栏添加项目模板面板让用户浏览模板并一键创建项目结构。这使用TreeView API。让 AI 执行请帮我在 ai-project-bot 中实现项目模板 1. 在 package.json 添加贡献点 - 新增 activitybar 的 viewsContainers 元素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 函数 - 允许用户选择目标文件夹 - 根据模板类型创建项目结构5.2 在 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 视图在视图标题栏添加 按钮用于创建项目5.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: 基于 Vite 的 React 项目, category: Frontend, command: npm create vitelatest {{name}} -- --template react-ts }, { name: Vue 3 TypeScript, description: 基于 Vite 的 Vue 3 项目, category: Frontend, command: npm create vitelatest {{name}} -- --template vue-ts }, { name: Next.js App, description: Next.js App Router 全栈项目, 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 后端项目, 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)) } }这里需要注意两个细节模板数据统一用{{name}}占位符预留项目名最后通过template.command.replace({{name}}, name)注入实际名称每个模板节点通过command属性绑定了点击行为用户单击模板项即可触发创建命令。5.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: 选择一个项目模板 } ) 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 调试你会在活动栏看到 AI Project Bot。展开模板列表点击任意模板即可创建项目。该命令的完整流程是可选选择模板 → 输入项目名 → 选择目标目录 → 在终端执行脚手架命令——这里特意使用createTerminal把npx create-vite等脚手架命令放进用户可见的终端让用户能看到真实执行过程而不是黑盒创建。六、实现 AI Chat 参与者5 分钟6.1 什么是 Chat Participant API从 VS Code 1.90 起插件可以在 Chat 面板中创建自己的 AI 助手Chat Participant API。当用户输入project-bot help me analyze this project architecture时你的插件会收到消息并返回由模型生成的响应。核心概念参与者Participant你的助手在 Chat 面板中的身份通过名称调用斜杠命令Slash Commands参与者支持的快捷命令如/explain、/refactorLanguage Model API调用 VS Code 内置的模型例如 Copilot GPT-4o流式输出Stream通过stream.markdown()逐步输出响应6.2 在 package.json 中声明 Chat Participant{ contributes: { chatParticipants: [ { id: ai-project-bot.projectBot, name: project-bot, fullName: AI Project Bot, description: 你的智能项目助手用于分析代码、解释架构和生成方案, isSticky: true } ] } }isSticky: true表示一旦选中该参与者后续消息默认都发给它无需每次都输入project-bot。6.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(没有可用的语言模型。请确认已安装 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: 这里有没有潜在的错误, 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 这段代码是做什么的你的插件就会调用模型并生成解释。七、选中代码对话与多文件问答5 分钟7.1 右键菜单发送选中的代码给 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控制顺序7.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 [ 请解释以下代码来自 ${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 结果输出到Output Channel而不是 Chat 面板说明一个重要的工程取舍右键快捷分析场景追求低摩擦、不打断工作流直接在当前界面展示结果而需要多轮追问的深度分析则适合放进 Chat 面板。7.3 多文件问答批量分析文件关系这是本插件最强大的功能之一在资源管理器中多选文件让 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(请至少选择两个文件进行分析) 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: 分析选中文件的关系。插件会读取所有选中文件的内容并返回分析结果。注意这里用vscode.workspace.fs.readFileVS Code 的跨平台文件系统 API而非 Node.js 的fs这保证了插件在远程开发、容器等场景下也能正常工作。八、快捷键与用户体验优化3 分钟8.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文件不是只读的多个条件用连接表示必须全部满足。8.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 点击打开 AI Project Bot statusBar.command ai-project-bot.createFromTemplate statusBar.show() context.subscriptions.push(statusBar) }$(hubot)是 VS Code 内置的图标语法基于 Codicon 图标库createStatusBarItem的第二个参数100是优先级数值越大越靠右决定状态栏项的相对位置。九、发布到 VS Code Marketplace可选9.1 发布准备VS Code 插件的打包与发布使用vsce工具请帮我安装 vscenpm install -g vscode/vsce发布前需要准备Azure DevOps 账号注册并创建组织dev.azure.com个人访问令牌PAT在 Azure DevOps 中创建权限选择Marketplace - Manage发布者 IDPublisher ID在 VS Code Marketplace 管理页面创建发布者身份9.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市场描述和CHANGELOG.md版本历史。9.3 打包与发布# 打包为 .vsix手动安装文件 vsce package # 发布到市场 vsce publish打包后你会得到ai-project-bot-0.0.1.vsix文件。可以把这个文件发给朋友他们在 VS Code 中通过 Install from VSIX 即可安装。正式发布则运行vsce publish插件通常几分钟内上线。提示首次发布可能需要审核。确保 README 清晰、截图完整以加快审批速度。十、总结与进阶方向恭喜你已经从零构建了一个功能完整的 VS Code 插件。回顾一下你掌握的能力用 Yeoman 脚手架创建插件项目理解package.json和extension.ts的分工用 TreeView API 实现侧边栏项目模板列表和一键创建项目用 Chat Participant API 创建project-botAI 助手包括斜杠命令和流式响应实现右键选中代码分析实现多文件关系分析添加自定义快捷键和状态栏提示整个插件的技术链路可以概括为VS Code 贡献点package.json→ 命令注册extension.ts→ TreeView / Chat Participant / 右键菜单 → 模型调用Language Model API→ 结果展示Chat / Output Channel / 通知→ vsce 打包分发VS Code 插件开发的想象力非常广阔。你每天使用的那些实用插件背后的技术正是你刚刚学会的这些。进阶方向自定义 Webview 面板用 HTML/CSS/JS 构建完全自定义的 UI如可视化架构图、交互式代码审查界面Language Model Tools注册可被 AI 调用的自定义工具如查询数据库或执行 API 请求诊断与 CodeLens直接在编辑器中展示 AI 建议、性能提示和安全警告自定义语言支持为特定 DSL 或配置格式提供语法高亮、补全和诊断远程开发集成让插件在 SSH、容器和 WSL 环境中工作请牢记 Vibe Coding 的核心方法论理解架构骨架用自然语言描述需求让 AI 生成实现你负责验收与迭代。编辑器是你的规则由你定。参考资料本课对应 Easy Vibe 课程的跨平台开发模块vibe coding 101更多相关内容可继续阅读仓库中的 跨平台开发索引 与 进阶开发总览。教程各章节的架构图、运行截图与配置示例见 vscode-extension 图片资源相关 API 使用可对照 VS Code 官方文档中的 Extension API、Chat Participant API、Language Model API、TreeView API、Webview API 以及插件发布指南。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考