VS Code Copilot Chat 扩展开发指南:环境搭建、TSX 提示词框架、分层架构与 Agent 模式源码级解析 VS Code Copilot Chat 扩展开发指南环境搭建、TSX 提示词框架、分层架构与 Agent 模式源码级解析【免费下载链接】vscodeVisual Studio Code项目地址: https://gitcode.com/GitHub_Trending/vscode6/vscode本文基于 GitHub Copilot Chat 扩展的官方贡献指南 CONTRIBUTING.md系统讲解如何搭建 Copilot Chat 扩展的本地开发环境、编写与运行单元/集成/仿真三层测试、使用 TSX 提示词框架构建 LLM 请求以及理解扩展的分层架构、运行时划分、Agent 模式与工具系统的源码组织方式。读完后你将具备在 VS Code 源码树内调试 Copilot Chat 扩展、修改其提示词与工具、并让其与 Code OSS 联动的完整实践能力。一、创建高质量的 Issue在动手开发前贡献指南首先规范了问题反馈流程先查已有 Issue新建 Issue 前应先在 VS Code 的 open issues 中检索确认问题或功能请求是否已存在尤其要浏览标记为 feature-request 的高热请求。若已存在用 reaction 表示支持、 表示反对代替 1 评论。一个 Issue 只描述一个问题不要在同一个 Issue 里罗列多个 bug 或功能请求除非输入完全相同也不要把自己的问题作为评论挂在别人的 Issue 下。使用内置报告工具VS Code 帮助菜单中的Report Issue会自动附带 VS Code 版本、已安装扩展和系统信息并搜索相似 Issue。每个 Issue 应包含以下信息VS Code 与 copilot-chat 扩展的版本操作系统涉及的 LLM 模型如适用可复现的步骤1... 2... 3...期望结果与实际结果截图、动画或视频能演示问题的代码片段或提示词注意GIF 等媒体文件中的代码无法复制需以文本形式提供或一个开发者可直接拉取的代码仓库Dev Tools 控制台错误Help Toggle Developer Tools 打开二、开发环境要求与首次搭建环境要求Node 22.x当前仓库 package.json 中engines.node声明为22.14.0两者一致Python 3.10 且 3.12Git Large File StorageLFS——运行测试需要WindowsVisual Studio Build Tools 2019 —— 用于 node-gyp 构建首次搭建步骤Windows 上需以管理员身份在 PowerShell 执行Set-ExecutionPolicy Unrestrictednpm installnpm run get_token对应脚本 getToken.mts之后即可通过CmdShiftBWindows 为CtrlShiftB运行构建任务或直接启动 Launch Copilot Extension - Watch Mode 调试配置。提示如果 Launch Copilot Extension - Watch Mode 不工作可改用 Launch Copilot Extension 调试配置。说明在 WSL 下按 VS Code 官方的 Selfhosting-on-Windows-WSL 文档流程同样支持。三、三层测试体系单元、集成与仿真单元测试Node 环境npm run test:unit该脚本在 package.json 中定义为vitest --run --poolforks即在 Node.js 中以 Vitest 运行。若测试报错先确认 Node 版本正确且 git lfs 已安装git lfs pull可验证。集成测试VS Code 内npm run test:extension仿真测试Simulation Tests仿真测试会真实访问 Copilot API 端点、调用 LLM属于昂贵计算。为应对 LLM 的随机性每条测试运行 10 次所有运行结果快照保存在基线文件 baseline.json 中它记录了测试套件在任一时点的质量水位。由于 LLM 结果既随机又昂贵仓库在 test/simulation/cache 目录中内置了缓存层使重跑仿真测试更快且确定。相关命令npm run simulate # 运行仿真测试 npm run simulate-require-cache # 校验缓存是否已生成 npm run simulate-update-baseline # 接受本地新基线并更新 baseline 文件贡献者注意PR 在缓存未填充时会失败。npm run simulate会在test/simulation/cache/layers中创建新的缓存层但填充缓存必须由 VS Code 团队成员在其开发机上完成社区成员若提交 PR 附带了新缓存层PR 会失败需由团队成员删除并在自己的机器上重建。此外PR 中如有未提交的 baseline 变更同样会失败——若你本地看到测试结果变化并想接受新基线运行npm run simulate-update-baseline并把该变更纳入提交。四、复用 VS Code 仓库的base/common工具Copilot Chat 团队希望沿用 microsoft/vscode 仓库中的base/common工具如async.ts、strings.ts、map.ts而不是手动复制维护。为此提供了脚本 copySources.ts脚本末尾维护了一份从 vscode 仓库复制的模块清单需要新模块时将其加入清单并执行npx tsx script/setup/copySources.ts前提是 copilot 仓库与 vscode 仓库为同级目录脚本会把模块从 vscode 仓库复制到本仓库的src/util/vs目录当前仓库中该目录已存在见 src/util/vssrc/util/vs被标记为只读——对被复制源码的修改应回到 vscode 主仓库中完成。五、TSX 提示词框架把 Prompt 当组件写这是本文最核心的技术部分。Copilot Chat 开发了一套基于 TSX 的提示词组合框架解决两个问题动机按 token 预算动态组合请求消息。普通字符串拼接出的 prompt 一旦组合完成就难以编辑TSX 提示词把消息表示为组件树每个节点带有priority概念上类似zIndex数值越大优先级越高。当某个 intent 声明的消息超出 token 预算时prompt 渲染器会从最终发送给 Copilot API 的ChatMessage数组中剪掉优先级最低的消息并保持其余消息的声明顺序。这种树形结构也为未来更复杂的提示词管理如提示词变体实验、子树递归摘要留出了空间。提示词对功能所有者透明且可复用。每个 intent 完整拥有并控制发给 Copilot API 的System、User、Assistant消息既保证了安全规则、上下文种类与会话历史的可见性又便于复用SafetyRules等公共提示词片段。快速上手第一步定义根 TSX 提示词组件继承PromptElement实现同步的render方法返回要发送的聊天消息interface CatPromptProps extends BasePromptElementProps { query: string; } export class CatPrompt extends PromptElementCatPromptProps, void { render() { return ( SystemMessage Respond to all messages as if you were a cat. /SystemMessage UserMessage {this.props.query} /UserMessage / ); } }第二步用PromptRenderer渲染并接入 intent 调用。PromptRenderer.render产出适合经ChatMLFetcher发给 Copilot API 的 system/user/assistant 消息数组class CatIntentInvocation implements IIntentInvocation { constructor(private readonly accessor: ServicesAccessor, private readonly endpoint: IChatEndpoint, ) {} async buildPrompt({ query }: IBuildPromptContext, progress: vscode.Progressvscode.ChatResponseProgressPart | vscode.ChatResponseReferencePart, token: vscode.CancellationToken): PromiseRenderPromptResult { // Render the CatPrompt prompt element const renderer new PromptRenderer(this.accessor, this.endpoint, CatPrompt, { query }); return renderer.render(progress, token); } }常用组件SystemMessage、UserMessage、AssistantMessage内部文本会被转换为 OpenAI API 对应的消息类型SafetyRules通常应包含在SystemMessage中确保功能符合 Responsible AI 规范提示词组件可以返回其他提示词组件全部由渲染器递归渲染。异步预计算若提示词需要异步工作如 VS Code 扩展 API 调用、额外的 chunk 重排序请求可在可选的异步prepare方法中预计算状态prepare先于render执行准备好的状态会传回同步的render方法。两条渲染规则要注意字符串字面量中的换行符渲染时不会被保留必须显式用内置br /声明当两条同优先级的提示词消息因超出 token 预算而面临驱逐时先声明者不能驱逐后声明者声明的提示词消息子树。六、代码结构分层、目录与运行时分层Layers层指由可用环境 API 定义的运行时目标与 VS Code 主仓库一致层可用能力可依赖的层common纯 JavaScript 及内置 API可用 VS Code API 的类型但不运行时访问—vscodeVS Code API 运行时访问commonnodeNode.js API 与模块common、nodevscode-nodeVS Code Node.js APIcommon、vscode、nodeworkerWeb Worker APIcommonvscode-workerVS Code Web Worker APIcommon、vscode、worker顶层目录约定src/util跨模块通用工具代码。该目录下的文件可被 VS Code 外部运行的测试加载应从vscodeTypes模块导入基础类型测试环境会 shim 掉它且不能导入./platform或./extensionsrc/platform用于实现扩展的服务遥测、配置、搜索等可导入./utilsrc/extension所有功能实现的大文件夹可导入./util与./platformtest测试代码可导入base/但不能导入extension/。双运行时node.js 与 web workerCopilot Chat 同时支持 node.js 扩展宿主与 web worker 扩展宿主既能跑在桌面端也能跑在无远端连接的 Web 环境serverless。因此构建两个形态的扩展当前仓库中两个入口均已存在src/extension/extension/vscode-node/extension.ts运行在 node.js 扩展宿主src/extension/extension/vscode-worker/extension.ts运行在 web worker 扩展宿主。原则上应让同一份代码在两种宿主中运行运行时特化代码应是例外。以下用法不受 web worker 宿主支持直接使用 node.js API如require、process.env、fs使用未构建为 web 版本的 node 模块依赖 web 上不支持的其他扩展例如vscode.Git扩展。从源码运行扩展node直接使用 Launch Copilot Extension 启动配置web确保package.json中有入口browser: ./dist/web运行npm run web对应vscode-test-web --headless --extensionDevelopmentPath. .浏览器打开http://localhost:3000在 VS Code 中将隐藏设置chat.experimental.serverlessWebEnabled设为true首次设置后需重载。Contributions 与 Services与 VS Code 一样Copilot 扩展通过 contributions 与 services 让组件相互隔离又协同提供/消费服务。注册文件按运行时划分当前仓库中以下文件均存在vscode/contributions.ts两种宿主均可运行的 contributionsvscode-node/contributions.ts仅 node.js 宿主vscode-worker/contributions.ts仅 web worker 宿主vscode/services.ts、vscode-node/services.ts、vscode-worker/services.ts同样按宿主划分的 services由主 instantiation service 自动装配。建议尽量把 services 与 contributions 放在vscode层使其在所有受支持运行时中可用。七、Agent 模式的关键源码贡献指南列出了 Agent 模式最相关的文件路径已按仓库根目录给出agentPrompt.tsx渲染 agent 提示词的主入口。从源码结构看该目录还包含 promptRegistry.ts 与针对不同模型的提示词变体如anthropicPrompts.tsx、geminiPrompts.tsx、openai/等印证了按模型定制 agent 提示词的实现方式defaultAgentInstructions.tsxagent 模式的系统提示词原文档链接的agentInstructions.tsx在当前源码树中对应此文件toolCallingLoop.ts驱动 agentic loop工具调用循环chatParticipants.ts注册 agent 模式及其他 chat participants以及来自 VS Code 的请求处理器。从源码结构看agent 模式本质上是一个注册给 VS Code 的chat participant主要使用标准 Chat API 加vscode.lm.invokeTool调用工具并在package.json中以标志位声明自己为 agent mode participant另有一些能力来自 VS Code 的 proposed API。注意代码库中部分 agent 一词可能指旧的 chat participantsworkspace、vscode等或经由 GitHub App 安装的 Copilot Extension agents阅读时要区分语境。八、工具Tools系统Copilot 注册了多种工具工具也可来自其他 VS Code 扩展或注册到 VS Code 的 MCP 服务器。VS Code 的工具选择器tool picker主要决定哪些工具被启用该集合随 ChatRequest 传给 agent部分编辑工具只对特定模型或基于配置/实验启用。agent 对最终请求中实际包含哪些工具拥有最终决定权相关逻辑位于 agentIntent.ts 的getTools中。开发新工具的关键位置工具通过 VS Code 标准的 Language Model Tool API 注册。内建工具的关键部分package.json工具描述与 JSON Schema 在此声明toolNames.ts面向模型的工具名src/extension/tools/node/工具实现所在目录。多数实现标准的vscode.LanguageModelTool接口因部分工具有额外自定义行为它们实现的是扩展接口ICopilotTool。在新增工具之前务必先阅读工具开发说明文档 docs/tools.md。Tree SitterTree Sitter 的 WASM 预编译产物现已迁移至 microsoft/vscode-tree-sitter-wasm 项目维护仓库内不再自行构建 WASM。九、排障阅读请求要查看 Copilot Chat 发出的请求细节执行命令Show Chat Debug View会显示一个树视图每个请求一条目可看到发给模型的 prompt、启用的工具、响应及其他关键信息。修改任何逻辑后务必先读一遍渲染出的 prompt确认其渲染结果符合预期右键 Export As... 可导出请求日志视图还会为单独的 tool call 建立条目并提供在 Simple Browser 中打开的 prompt-tsx 调试视图该日志对排查 agent 行为问题非常有帮助提 Issue 时附上会很受欢迎。但日志可能包含文件内容、终端输出等个人信息分享前务必审查内容。十、Proposed API 更新与engines.vscode日期规范当扩展使用的 VS Code proposed extension API 发生变更时package.json中的engines.vscode字段用于保证安装的扩展版本与 VS Code 版本兼容。当前仓库 package.json 中为vscode: ^1.137.0稳定版约束一旦采用任何 proposed API 变更无论是否向后兼容都必须把该字段更新为带日期的形式例如vscode: ^1.91.0-20240624——这确保扩展只会在支持新 API 的 VS Code 版本中安装并激活。必须与 VS Code 主仓库同步落地 API 变更扩展侧的 API 采用必须与 VS Code 侧的变更同时完成否则次日的 Insiders 构建将没有兼容的 Copilot Chat 扩展可用。典型的 API 变更示例重命名扩展使用的方法修改已有方法的参数为ChatResponseStream新增响应类型新增一个 API proposal在已有接口上新增方法。十一、与 Code OSS 联动运行桌面端在 Code OSS Desktop 中运行该扩展只需三步在vscode仓库顶层创建product.overrides.json写入以下 JSON 内容{ trustedExtensionAuthAccess: { github: [ github.copilot-chat ] } }在 Code OSS 中运行扩展启动配置。Web 端Code OSS for Web 不支持product.overrides.json技巧需要手动把defaultChatAgent属性的内容复制进src/vs/platform/product/common/product.ts即 VS Code 主仓库 product.ts 中的Object.assign(product, {...})块并附带trustedExtensionAuthAccess配置。完整示例Object.assign(product, { version: 1.102.0-dev, nameShort: Code - OSS Dev, nameLong: Code - OSS Dev, applicationName: code-oss, dataFolderName: .vscode-oss, urlProtocol: code-oss, reportIssueUrl: https://github.com/microsoft/vscode/issues/new, licenseName: MIT, licenseUrl: https://github.com/microsoft/vscode/blob/main/LICENSE.txt, serverLicenseUrl: https://github.com/microsoft/vscode/blob/main/LICENSE.txt, defaultChatAgent: { extensionId: GitHub.copilot, chatExtensionId: GitHub.copilot-chat, documentationUrl: https://aka.ms/github-copilot-overview, termsStatementUrl: https://aka.ms/github-copilot-terms-statement, privacyStatementUrl: https://aka.ms/github-copilot-privacy-statement, skusDocumentationUrl: https://aka.ms/github-copilot-plans, publicCodeMatchesUrl: https://aka.ms/github-copilot-match-public-code, manageSettingsUrl: https://aka.ms/github-copilot-settings, managePlanUrl: https://aka.ms/github-copilot-manage-plan, manageOverageUrl: https://aka.ms/github-copilot-manage-overage, upgradePlanUrl: https://aka.ms/github-copilot-upgrade-plan, signUpUrl: https://aka.ms/github-sign-up, provider: { default: { id: github, name: GitHub }, enterprise: { id: github-enterprise, name: GHE.com }, google: { id: google, name: Google }, apple: { id: apple, name: Apple } }, providerUriSetting: github-enterprise.uri, providerScopes: [ [ user:email ], [ read:user ], [ read:user, user:email, repo, workflow ] ], entitlementUrl: https://api.github.com/copilot_internal/user, entitlementSignupLimitedUrl: https://api.github.com/copilot_internal/subscribe_limited_user, chatQuotaExceededContext: github.copilot.chat.quotaExceeded, completionsQuotaExceededContext: github.copilot.completions.quotaExceeded, walkthroughCommand: github.copilot.open.walkthrough, completionsMenuCommand: github.copilot.toggleStatusMenu, chatRefreshTokenCommand: github.copilot.refreshToken, completionsAdvancedSetting: github.copilot.advanced, completionsEnablementSetting: github.copilot.enable, nextEditSuggestionsSetting: github.copilot.nextEditSuggestions.enabled }, trustedExtensionAuthAccess: { github: [ github.copilot-chat ] } });其中providerScopes声明了 OAuth 权限范围的分级仅 email、读用户信息、完整 repo/workflow 权限entitlementUrl用于查询用户 Copilot 权益各*Url字段指向管理计划、升级、签名等入口——理解这些字段有助于排查 Code OSS 中 Copilot 登录与配额显示异常的问题。十二、小结贡献者工作流速查目标命令 / 文件安装并获取 tokennpm install、npm run get_token本地调试node 宿主Launch Copilot Extension 启动配置本地调试web 宿主npm run web 隐藏设置chat.experimental.serverlessWebEnabled单元 / 集成 / 仿真测试npm run test:unit/npm run test:extension/npm run simulate同步 vscode 工具源码npx tsx script/setup/copySources.ts调试渲染出的 prompt命令 Show Chat Debug View新增工具package.json 声明 schema tools/node 实现 先读 docs/tools.md以上流程与路径均与当前仓库的实际目录结构extensions/copilot下的src/extension、test/simulation、script/setup等一致可直接据此在当前仓库内定位、阅读并验证每一处实现。【免费下载链接】vscodeVisual Studio Code项目地址: https://gitcode.com/GitHub_Trending/vscode6/vscode创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考