Kilo Code 扩展开发实战从 VS Code Extension Quickstart 到 AI 编码代理插件的构建与调试【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode本篇技术指南以 Kilo 开源仓库中packages/kilo-vscode/vsc-extension-quickstart.md这份 VS Code 官方扩展快速入门文档为骨架结合仓库内真实的扩展实现AI 编码代理 Kilo Code的源码、构建脚本与测试体系系统讲解 VS Code 扩展的目录结构、F5 调试、热重载、API 探索、测试运行与打包发布全流程。读完本文你将掌握一套可落地的 VS Code 扩展开发工作流并理解一个生产级扩展如何组织命令、Webview 与构建产物。扩展工程里都有什么manifest 与激活入口快速入门文档开篇即点明一个 VS Code 扩展工程的两个核心文件package.json与src/extension.ts。以本仓库的 kilo-vscode 扩展清单 为例可以直观看到二者的职责分工package.jsonmanifest 文件声明扩展的标识、命令、键位、菜单、配置项与激活事件。文档中强调示例插件在这里注册一条命令并定义其标题与命令名VS Code 仅凭这些声明即可在命令面板中展示命令此时还不需要加载插件本体——这是 VS Code 扩展轻量启动的关键设计。src/extension.ts主文件提供命令的具体实现。文件导出activate函数扩展在首次激活例如执行命令时被调用内部通过registerCommand把命令 ID 与实现函数绑定。Kilo Code 的 入口文件 严格遵循这一模式activate(context: vscode.ExtensionContext)在启动时注册十余类能力——Webview 侧边栏KiloProvider、Agent Managerworktree 与会话管理、KiloClaw 聊天面板、自动补全Autocomplete、提交信息生成、代码操作与终端右键菜单等。仓库的激活事件package.json声明为onStartupFinished与onUri即窗口启动完成或收到深链 URI 时激活保证命令、键位、自动补全与 URI 深链即开即用而 CLI 后端并不在激活时立即拉起而是等 Webview 连接时才懒加载——从源码注释可以确认这一懒启动策略。环境准备三件推荐扩展快速入门文档要求安装三个推荐扩展它们分别覆盖扩展开发的不同环节扩展 ID作用amodio.tsl-problem-matcher为 TypeScript 编译任务提供问题匹配器让tsc报错直接显示在 VS Code 的问题面板ms-vscode.extension-test-runner官方扩展测试运行器用于发现并执行**.test.ts测试dbaeumer.vscode-eslintESLint 集成在编辑期即时提示代码风格与潜在错误在 Kilo Code 工程中npm run lintpackage.json正是通过eslint --cache ... src webview-ui对扩展主进程与 Webview 两侧代码做静态检查与文档建议的 ESLint 扩展形成编辑器内即时反馈 命令行兜底的双层保障。立即运行F5 一键启动调试宿主文档给出的第一条上手路径是按F5打开一个加载了你的扩展的新 VS Code 窗口扩展开发宿主按CtrlShiftPmacOS 为CmdShiftP打开命令面板输入Hello World执行示例命令在src/extension.ts中设置断点调试在调试控制台Debug Console查看扩展的输出日志。仓库的 launch.ts 脚本 将这一流程工程化bun script/launch.ts会自动完成依赖检查缺依赖时执行bun install --frozen-lockfile、执行bun run build:launch构建、自动探测 VS Code 可执行文件macOS / Linux / Windows 各有候选路径列表也可通过--app-path或环境变量VSCODE_EXEC_PATH指定再以--extensionDevelopmentPathroot参数拉起开发宿主。它还在 launch.ts 中为隔离实例写入一套默认 settings.json关闭遥测、关闭自动更新、关闭 AI 功能等避免开发实例污染日常使用的 VS Code 配置。值得注意的细节是ensureCommandsSkipShellextension.ts会把 Agent Manager 的导航命令写入terminal.integrated.commandsToSkipShell使这些快捷键在终端获得焦点时依然生效——这正是扩展开发中声明命令 运行时补齐宿主配置的典型组合拳。修改与重载让改动即时生效文档给出两种迭代方式修改src/extension.ts后从调试工具栏点击重启Relaunch让扩展在新进程中重新加载或者按CtrlR/CmdR重载 VS Code 窗口加载最新代码。对于大型扩展Kilo Code 还提供 watch 模式package.json 中npm run watch并行启动watch:esbuild构建扩展与全部 Webview 产物与watch:tsctsc --noEmit --watch类型检查。构建脚本 esbuild.js 展示了真实扩展构建的复杂度除src/extension.ts主进程入口外还要并行打包 7 个 Webview 前端agent-manager、kiloclaw、marketplace、diff-viewer、documents、diff-virtual、webview、Shiki 语法高亮 Worker 与 Markdown Worker同时通过solidDedupePlugin强制 monorepo 中所有solid-js引用解析到同一副本避免createContext/useContext失效——这些都是在快速入门模板之上生产级扩展必须解决的问题。探索 VS Code API从类型定义开始文档建议直接阅读node_modules/types/vscode/index.d.ts以获取完整的扩展 API 签名。这一习惯在 Kilo Code 中同样成立扩展主进程与 Webview 之间通过vscode.WebviewPanel/postMessage通信types/vscode中WebviewPanelSerializer面板序列化器等接口被大量用于窗口重启后恢复 Agent Manager、KiloClaw、Tab 面板等见 extension.ts。查看类型声明远比记忆 API 更可靠这是扩展开发最实用的探索手段。运行测试测试运行器与测试目录约定文档给出的测试流程为安装 Extension Test Runner 扩展通过Tasks: Run Task运行 watch 任务否则测试可能无法被发现在活动栏打开 Testing 视图点击 Run Test或使用快捷键Ctrl/Cmd ; A在 Test Results 视图查看输出修改src/test/extension.test.ts或新建测试文件——测试运行器只识别匹配**.test.ts命名模式的文件并允许在test文件夹下自由建目录组织测试。Kilo Code 的测试体系远不止单测其 tests 目录 可归纳为四层单元测试tests/unit/下数百个*.test.ts覆盖 Agent Manager 生命周期、终端路由、会话恢复、worktree diff、i18n 等模块通过npm run test:unitbun test tests/unit/ --dots执行集成测试npm test走vscode-test对应vscode/test-electron在真实扩展宿主中跑src/test下的扩展测试端到端 / 可访问性测试tests/accessibility.spec.ts等 Playwright 用例npm run test:a11y验证侧边栏、设置面板、模型选择器等关键 UI 的可访问性视觉回归测试tests/visual-regression.spec.ts通过 Playwright 截图对比npm run test:visual快照更新用test:visual:update。无论哪种层级**.test.ts命名约定都与快速入门文档一致这也是 VS Code 官方测试运行器能够自动发现用例的前提。更进一步打包、发布与持续集成快速入门文档的收尾部分给出三条生产化路径打包Bundling减小扩展体积并提升启动速度。Kilo Code 使用 esbuild 将整个扩展含依赖打包为单个dist/extension.jsmain字段指向该产物生产构建bundle:production启用语法与空白压缩并刻意关闭标识符混淆以避免aws-sdk等依赖在 CJS 模式下被重命名导致运行时错误esbuild.js 中有明确注释说明。发布Publishing打包成 VSIX 并上传 VS Code 扩展市场。仓库的launch.ts支持--mode vsix先bunx vsce package --no-dependencies --skip-license生成 VSIX再调用code --install-extension安装到隔离目录发布流水线由仓库根目录的github/工作流与 script/publish.ts 承接。持续集成CI自动化构建与测试。仓库的package.json预置了build:check并行执行类型检查、Webview 类型检查、lint 与打包、pretest编译 构建 lint等脚本可直接挂入 CI 阶段。结合文档的模板说明与仓库的工程实践可以从这条路径中提炼一个生产级扩展的完整生命周期manifest 声明 → 懒激活入口 → F5 调试 → watch 热重载 → 分层测试 → esbuild 打包 → VSIX 发布 → CI 固化。对任何想要把 VS Code 扩展从Hello World推进到可交付状态的开发者Kilo Code 仓库AGENTS.md、esbuild.js、launch.ts都是一份可对照阅读的成熟范本。【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考