尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

VS Code Copilot集成:MCP与GitHub Copilot

VS Code Copilot集成:MCP与GitHub Copilot 摘要VS Code Copilot集成MCP Server的完整配置流程涵盖GitHub Copilot MCP支持、工具调用配置和AI编程增强让开发者在VS Code中无缝使用MCP工具链。第40篇 VS Code Copilot集成 MCP与GitHub Copilot标签: MCP, VS Code, GitHub Copilot, MCP集成, AI编程上周有个朋友跑来跟我吐槽说他在 Claude Desktop 里用 MCP 调了一个数据库查询工具体验很好结果回到 VS Code 里用 GitHub Copilot 的时候就想这玩意儿能不能也接 MCP我说你算是问对人了我前阵子刚在项目里把这条路趟了一遍中间踩了两个特别隐蔽的坑今天就跟你们好好聊聊。从一个真实的场景说起我们团队的项目有一套内部的 API 文档系统每个接口的参数、返回值、错误码都存在一个内部服务里。以前用 Copilot 写代码的时候遇到不确定的接口参数我得切到浏览器查文档再切回来写代码。来回切换特别打断思路。后来我想如果能让 Copilot 直接调一个 MCP Server 去查 API 文档那岂不是可以在聊天窗口里直接问这个接口的入参是什么然后拿到准确结果我就开始研究 VS Code 里 GitHub Copilot 的 MCP 支持。说实话一开始我以为这功能特别复杂结果发现配置起来比想象的简单但坑也是真的多。VS Code 中 MCP 支持的现状GitHub Copilot 在 VS Code 里的 MCP 支持是通过chat.mcp这组配置项实现的。从 2025 年中期开始VS Code 正式支持在 Chat 面板的 Agent 模式下调用 MCP Server 暴露的工具。核心机制是这样的VS Code 内部实现了一个 MCP Client它会在你启动 Agent 模式对话的时候根据配置文件去启动对应的 MCP Server 子进程然后通过 stdio 跟 Server 通信。Copilot 拿到你的问题后会判断需不需要调 MCP 工具需要的话就自动调不需要就用普通的方式回答。这里有个关键点MCP 工具只在 Agent 模式下可用Ask 模式不会触发 MCP 调用。我一开始不知道这个在 Ask 模式里折腾了半天心想这 MCP 怎么一点反应都没有。配置文件编写VS Code 的 MCP 配置写在settings.json里具体是chat.mcp.serverSampling这个字段。下面是一个完整的配置示例我用的是一个高德地图 MCP Server 和一个自定义的 API 文档查询 Server。// settings.json 中的 MCP 配置 { // MCP 服务器配置区域所有 MCP Server 都放在这里 chat.mcp.serverSampling: { mcpServers: { // 高德地图 MCP Server用于地理信息查询 amap-maps: { // command 指定启动命令Windows 下用 cmd command: cmd, // args 是传给 command 的参数这里用 npx 启动高德 MCP Server args: [ /c, npx, -y, amap/amap-maps-mcp-server ], // env 传入 MCP Server 需要的环境变量 env: { AMAP_MAPS_API_KEY: 你的高德API_KEY } }, // 自定义的 API 文档查询 MCP Server api-docs: { // 用 node 启动我们写的 JS 文件 command: node, args: [ C:/mcp-servers/api-docs-server/index.js ], env: { API_DOCS_BASE_URL: https://internal-docs.mycompany.com } } } }, // 自动启动 MCP Server 的策略 // newAndOutdated 表示遇到新的或过期的配置就自动启动 chat.mcp.autostart: newAndOutdated }配置写好后重启 VS Code 或者重新加载窗口CtrlShiftP 输入 Reload Window然后在 Chat 面板里把模式切到 Agent。这时候你打开聊天窗口右下角的小图标应该能看到已经连接上的 MCP Server 和它们暴露的工具列表。工具调用验证配置好了之后怎么验证 MCP 工具确实能被调用呢我写了一个特别简单的 MCP Server 来做测试它只暴露一个工具就是返回当前时间。这个 Server 用 TypeScript 写的逻辑非常简单。// time-server.ts - 一个极简的 MCP Server只暴露一个时间查询工具// 依赖: npm install modelcontextprotocol/sdkimport{Server}frommodelcontextprotocol/sdk/server/index.js;import{StdioServerTransport}frommodelcontextprotocol/sdk/server/stdio.js;import{CallToolRequestSchema,// 工具调用请求的 schemaListToolsRequestSchema,// 工具列表请求的 schema}frommodelcontextprotocol/sdk/types.js;// 创建 MCP Server 实例指定名称和版本constservernewServer({name:time-server,// Server 名称会显示在 VS Code 的 MCP 面板里version:1.0.0,},{capabilities:{tools:{},// 声明此 Server 支持工具能力},});// 注册 tools/list 处理器当客户端请求工具列表时触发server.setRequestHandler(ListToolsRequestSchema,async(){return{tools:[{name:get_current_time,// 工具名称description:获取当前系统时间返回 ISO 格式字符串,// 工具描述inputSchema:{type:object,properties:{timezone:{type:string,description:时区例如 Asia/Shanghai,},},},},],};});// 注册 tools/call 处理器当客户端调用工具时触发server.setRequestHandler(CallToolRequestSchema,async(request){const{name,arguments:args}request.params;// 根据工具名做分发if(nameget_current_time){// 获取时区参数默认用本地时区consttimezone(argsas{timezone?:string})?.timezone||local;constnownewDate();// 返回工具调用结果content 是一个数组return{content:[{type:text,text:当前时间 (${timezone}):${now.toISOString()},},],};}// 未知工具返回错误thrownewError(未知工具:${name});});// 使用 stdio 传输层启动 ServerconsttransportnewStdioServerTransport();awaitserver.connect(transport);把这段代码保存为time-server.ts然后在 settings.json 里加上对应的配置。// 在 settings.json 的 mcpServers 中添加 time-server: { command: npx, args: [ tsx, C:/mcp-servers/time-server/time-server.ts ] }然后在 Agent 模式的 Chat 窗口里输入现在几点了你会看到 Copilot 自动调用了get_current_time这个工具然后基于返回的时间给你回复。如果看到工具被调用了说明你的 MCP 配置没问题。Chat 模式调用 MCP 工具的完整流程实际用起来的时候整个调用流程是这样的。第一步你在 Chat 窗口输入问题比如帮我查一下从北京到上海的驾车距离。第二步Copilot 分析你的问题发现高德地图 MCP Server 有一个计算距离的工具可以用。第三步VS Code 的 MCP Client 向 MCP Server 发送tools/call请求参数是 Copilot 生成的。第四步MCP Server 执行实际的 API 调用拿到结果后返回给 Client。第五步Copilot 拿到工具返回的结果组织成自然语言回复给你。整个过程中你不需要做任何额外操作Copilot 自己判断该不该用工具、用哪个工具。这就是 MCP 在 VS Code 里最大的价值它让 Copilot 从一个只会写代码的助手变成了一个能操作外部系统的 Agent。与 Claude Desktop 对比我在 Claude Desktop 和 VS Code Copilot 里都用了同样的 MCP Server体验差别还是挺明显的。对比维度VS Code CopilotClaude Desktop配置位置settings.json 中 chat.mcp.serverSamplingclaude_desktop_config.json配置格式mcpServers 对象mcpServers 对象基本一致触发方式仅 Agent 模式可用默认可用自动启动需配置 chat.mcp.autostart默认自动启动工具可见性右下角图标可查看工具列表对话框上方可查看多 Server 支持支持可同时配置多个支持可同时配置多个上下文集成可直接在代码编辑中使用结果纯对话场景调试便利性输出面板有 MCP 日志日志在 ~/Library/Logs稳定性偶尔有 Server 不启动的情况相对稳定环境变量传递通过 env 字段传入通过 env 字段传入从我的使用体验来看Claude Desktop 在 MCP 的稳定性和易用性上确实更成熟一些毕竟 Anthropic 是 MCP 协议的提出者。但 VS Code Copilot 的优势在于它跟代码编辑器的深度集成工具返回的结果可以直接在代码中使用不用在两个应用之间来回复制。独家踩坑经验 MCP Server 在 Windows 下启动失败的坑这个坑我踩了整整一个下午特别恶心。事情是这样的我在 Windows 上配置了一个 MCP Servercommand 填的是npxargs 填的是[-y, amap/amap-maps-mcp-server]。配置写好后切到 Agent 模式发现右下角的 MCP 图标里这个 Server 始终是灰色的表示没启动成功。我一开始以为是 API Key 写错了检查了好几遍没问题。又以为是 npx 没装好在终端里手动跑了npx -y amap/amap-maps-mcp-server跑得好好的。后来我去翻 VS Code 的输出面板Output 面板选 MCP 频道发现报了一个错大意是找不到 npx 这个命令。这就很诡异了终端里能跑的命令VS Code 里怎么就找不到了折腾了半天我才搞明白Windows 下 VS Code 启动子进程的时候PATH 环境变量跟你 PowerShell 里的 PATH 不完全一样。特别是如果你用 nvm 管理 Node 版本nvm 的路径可能没被 VS Code 正确继承。解决办法有两种。第一种把 command 从npx改成cmdargs 前面加上/c npx。// Windows 下推荐的写法 amap-maps: { command: cmd, args: [ /c, npx, -y, amap/amap-maps-mcp-server ], env: { AMAP_MAPS_API_KEY: 你的key } }第二种用 npx 的绝对路径。你可以在终端里执行where npx拿到完整路径然后填到 command 里。// 用绝对路径的写法 amap-maps: { command: C:\\Program Files\\nodejs\\npx.cmd, args: [ -y, amap/amap-maps-mcp-server ], env: { AMAP_MAPS_API_KEY: 你的key } }我最后用的是第一种方案因为更通用。但说实话这个坑真的很隐蔽因为 VS Code 的错误提示太含糊了只在 Output 面板里有一行小字你在 Chat 窗口里根本看不到任何报错。还有一个相关的坑如果你配置了chat.mcp.autostart为newAndOutdated但你的 Server 启动失败了VS Code 不会在 Chat 窗口里告诉你它只是默默地把那个 Server 标记为不可用。你必须主动去 Output 面板看日志才知道出了什么问题。所以我的建议是配置完 MCP Server 之后第一件事就是去 Output 面板看一眼有没有报错。完整可运行项目 智能代码审查助手最后给大家分享一个我在项目里实际用的完整方案。这是一个基于 MCP 的智能代码审查助手它能读取 Git 变更内容结合自定义规则给出审查意见。这个项目包含一个 MCP Server用 TypeScript 写和对应的 VS Code 配置。Server 暴露三个工具获取 Git diff、获取文件内容、查询审查规则。// code-review-server.ts - 智能代码审查 MCP Server// 依赖: npm install modelcontextprotocol/sdk simple-gitimport{Server}frommodelcontextprotocol/sdk/server/index.js;import{StdioServerTransport}frommodelcontextprotocol/sdk/server/stdio.js;import{CallToolRequestSchema,ListToolsRequestSchema,}frommodelcontextprotocol/sdk/types.js;importsimpleGitfromsimple-git;import{readFileSync}fromfs;import{join}frompath;// 初始化 Git 操作实例指向当前工作目录constgitsimpleGit(process.cwd());// 创建 MCP ServerconstservernewServer({name:code-review-server,version:1.0.0,},{capabilities:{tools:{},},});// 审查规则实际项目中可以从数据库或配置文件读取constREVIEW_RULES[{id:rule-001,rule:函数参数超过5个时需要重构,severity:warning,},{id:rule-002,rule:禁止使用 any 类型,severity:error,},{id:rule-003,rule:API 调用必须有错误处理,severity:error,},{id:rule-004,rule:注释率不低于30%,severity:warning,},];// 注册工具列表处理器server.setRequestHandler(ListToolsRequestSchema,async(){return{tools:[{// 工具1: 获取 Git 暂存区的 diffname:get_git_diff,description:获取 Git 暂存区的代码变更内容返回 diff 字符串,inputSchema:{type:object,properties:{staged:{type:boolean,description:是否只获取暂存区的变更默认 true,},},},},{// 工具2: 读取指定文件内容name:read_file,description:读取项目中指定路径的文件内容,inputSchema:{type:object,properties:{path:{type:string,description:文件相对路径例如 src/index.ts,},},required:[path],},},{// 工具3: 查询代码审查规则name:get_review_rules,description:获取所有代码审查规则列表,inputSchema:{type:object,properties:{},},},],};});// 注册工具调用处理器server.setRequestHandler(CallToolRequestSchema,async(request){const{name,arguments:args}request.params;constargObjargsasRecordstring,unknown;switch(name){caseget_git_diff:{// 根据参数决定获取暂存区还是工作区的 diffconststagedargObj?.staged!false;// 调用 simple-git 获取 diffconstdiffstaged?awaitgit.diff([--cached]):awaitgit.diff();return{content:[{type:text,// 如果没有变更返回提示信息text:diff||没有检测到代码变更,},],};}caseread_file:{constfilePathargObj?.pathasstring;try{// 拼接完整路径并读取文件constfullPathjoin(process.cwd(),filePath);constcontentreadFileSync(fullPath,utf-8);return{content:[{type:text,text:content,},],};}catch(err){// 文件读取失败时返回错误信息return{content:[{type:text,text:读取文件失败:${(errasError).message},},],isError:true,};}}caseget_review_rules:{// 返回所有审查规则格式化为 JSON 字符串return{content:[{type:text,text:JSON.stringify(REVIEW_RULES,null,2),},],};}default:thrownewError(未知工具:${name});}});// 启动 ServerconsttransportnewStdioServerTransport();awaitserver.connect(transport);对应的 VS Code 配置如下。// settings.json 配置 { chat.mcp.serverSampling: { mcpServers: { code-review: { command: cmd, args: [ /c, npx, tsx, C:/mcp-servers/code-review-server.ts ] } } }, chat.mcp.autostart: newAndOutdated }配置好之后你在 Agent 模式的 Chat 窗口里输入帮我审查一下当前 Git 变更的代码Copilot 就会自动调用get_git_diff拿到变更内容调用get_review_rules拿到审查规则然后逐条对照分析最后给出审查意见。我在项目里用了一个月最大的感受是它确实能减少人工审查的工作量。以前每次提交代码前要自己检查一遍规则现在直接在 Chat 窗口问一句就行。不过也有个问题如果 diff 特别大Copilot 有时候会漏掉一些规则需要你追问一句还有没有其他问题。小结这篇文章我们聊了 VS Code 里 GitHub Copilot 的 MCP 支持从配置文件编写到工具调用验证再到完整的代码审查项目。核心要点有几个。第一MCP 配置写在settings.json的chat.mcp.serverSampling里格式跟 Claude Desktop 基本一致。第二MCP 工具只在 Agent 模式下可用Ask 模式不触发。第三Windows 环境下启动 MCP Server 最好用cmd /c的方式避免 PATH 找不到的问题。第四配置完一定要去 Output 面板看日志这是排查 MCP 问题最快的方式。下一篇我们换个方向聊聊怎么通过桥接让 ChatGPT 也能用上 MCP那个方案会更复杂一些但思路特别有意思。相关推荐TRAE集成在TRAE中使用MCP工具ChatGPT集成通过桥接让ChatGPT使用MCPMCP协议全景Host、Client、Server架构详解
返回列表