【MCP 全栈教程】第 37 篇在 VS Code 中集成 MCP Server本系列定位从协议原理到 Server 开发、Client 开发、再到各大平台实战集成系统化掌握 MCPModel Context Protocol全栈技术体系。本篇你将学到掌握 VS Code 中 MCP Server 的两种配置方式settings.json与mcp.json理解 VS Code MCP Client 与 GitHub Copilot 的协作机制在开发工作流中集成代码搜索、文档查询、数据库访问等 MCP 工具学会调试 MCP Server 连接问题与查看日志一句话总结VS Code 将 MCP 工具无缝融入编辑器工作流让 AI 编程助手的能力边界从代码补全扩展到工程全链路。一、VS Code 对 MCP 的支持概述VS Code 是目前生态最丰富的代码编辑器它从 2025 年开始原生集成 MCP Client 能力。这意味着你可以在编辑器内部直接使用 MCP Server 提供的 Tools、Resources 和 Prompts而无需切换到外部应用。VS Code 的 MCP 集成有几个显著特点特点说明双配置入口settings.json用户/工作区级和.vscode/mcp.json项目级Copilot 协作MCP 工具可直接被 GitHub Copilot Chat 调用传输支持STDIO本地和 Streamable HTTP远程语言无关Python、TypeScript、Go 等任何语言的 Server 均可接入工作区隔离不同项目可配置不同的 Server 集合二、配置方式一settings.jsonsettings.json是 VS Code 最核心的配置文件。MCP 相关配置写在mcp.servers字段下。2.1 打开 settings.json操作系统快捷方式macOSCmd Shift P→ 输入Preferences: Open User Settings (JSON)Windows/LinuxCtrl Shift P→ 输入Preferences: Open User Settings (JSON)2.2 配置结构{mcp:{servers:{filesystem:{type:stdio,command:npx,args:[-y,modelcontextprotocol/server-filesystem,${workspaceFolder}]},remote-api:{type:http,url:https://api.example.com/mcp}}}}字段说明字段类型说明typestring传输类型stdio或httpcommandstringSTDIO 模式下的启动命令argsstring[]STDIO 模式下的参数列表envobjectSTDIO 模式下的环境变量urlstringHTTP 模式下的 Server 端点地址headersobjectHTTP 模式下的自定义请求头2.3 变量替换VS Code 支持在配置中使用预定义变量这对于多项目环境非常实用变量含义${workspaceFolder}当前工作区根目录路径${userHome}用户主目录${env:VAR_NAME}系统环境变量{mcp:{servers:{filesystem:{type:stdio,command:npx,args:[-y,modelcontextprotocol/server-filesystem,${workspaceFolder}/src]},db-server:{type:stdio,command:uvx,args:[mcp-server-postgres],env:{DATABASE_URL:${env:DATABASE_URL}}}}}}三、配置方式二.vscode/mcp.json对于需要在团队间共享的 MCP 配置推荐使用项目级的.vscode/mcp.json文件。该文件放在项目根目录的.vscode文件夹下可以提交到版本控制系统。3.1 创建 mcp.json在项目根目录下创建.vscode/mcp.json{servers:{docs-search:{type:stdio,command:python,args:[tools/mcp_docs_server.py],env:{DOCS_ROOT:./docs}},github:{type:http,url:https://mcp.github.example.com/sse,headers:{Authorization:Bearer ${env:GITHUB_TOKEN}}}}}3.2 settings.json vs mcp.json 对比维度settings.json.vscode/mcp.json作用范围用户级或工作区级项目级版本控制通常不提交可提交团队共享变量支持完整支持完整支持优先级工作区 用户项目文件优先适用场景个人偏好配置团队工程约定两种方式可以并存。当同名 Server 同时出现在两处时项目级mcp.json优先。四、与 GitHub Copilot 的协作VS Code 的 MCP 集成最强大的地方在于MCP 工具可以直接被 GitHub Copilot Chat 调用。这意味着你在 Copilot 对话中提到的操作Copilot 可以自动选择合适的 MCP 工具来执行。4.1 工作原理用户在 Copilot Chat 输入请求 ↓ Copilot 分析意图匹配可用工具 ↓ 从 MCP Server 发现的 Tools Copilot 内置能力中选优 ↓ 调用 MCP Tool → 获取结果 → 生成回复4.2 实际对话示例配置了 filesystem 和 database Server 后你可以在 Copilot Chat 中这样交互你的输入Copilot 可能调用的 MCP 工具“分析 src/ 目录下所有 Python 文件的依赖关系”search_filesread_file“查询数据库中最近 7 天的订单数据并生成报告”execute_sql“读取 API 文档并生成接口调用示例代码”read_resource Copilot 代码生成“搜索代码库中使用 deprecated API 的地方”search_filesgrep_pattern4.3 在 Chat 中显式引用工具你可以在 Copilot Chat 中使用#符号显式引用某个 MCP Server 或工具强制 Copilot 使用它帮我用 #filesystem 搜索所有包含 TODO 的文件然后用 #db-server 查询这些文件对应的任务状态这种显式引用方式在 Copilot 自动路由不够准确时非常有用。五、开发工作流中的 MCP 工具下面介绍几种在开发工作流中最常用的 MCP Server 类型及其配置方式。5.1 代码搜索 Server代码搜索是开发中最频繁的操作之一。一个配置良好的搜索 Server 可以让 Copilot 基于真实代码库回答问题而不是凭空生成。{mcp:{servers:{code-search:{type:stdio,command:uvx,args:[mcp-server-ripgrep,--root,${workspaceFolder}]}}}}5.2 文档查询 Server将项目文档或 API 文档暴露为 MCP ResourcesCopilot 可以在编写代码时实时参考最新文档{mcp:{servers:{docs:{type:stdio,command:npx,args:[-y,modelcontextprotocol/server-filesystem,${workspaceFolder}/docs,${workspaceFolder}/api-spec]}}}}5.3 数据库访问 Server开发调试时经常需要查询数据库通过 MCP Server 可以让 Copilot 直接执行查询并分析结果{mcp:{servers:{database:{type:stdio,command:uvx,args:[mcp-server-postgres,--connection-string,${env:DATABASE_URL}]}}}}5.4 常用开发 MCP Server 速查表Server 名称类型核心能力推荐场景filesystem文件系统读写、搜索、目录浏览通用文件操作ripgrep search代码搜索高速正则搜索大型代码库检索postgres / sqlite数据库SQL 执行、模式查询数据库开发调试git版本控制提交历史、分支差异代码审查fetch网络请求URL 内容抓取文档获取、API 测试sequential-thinking推理辅助结构化思维链复杂问题分解六、调试配置VS Code 提供了完善的 MCP 调试工具这是它相比其他 Host 应用的优势之一。6.1 MCP 状态面板通过CtrlShiftPmacOS 为CmdShiftP打开命令面板输入MCP: List Servers可以查看所有已配置 Server 的连接状态状态含义RunningServer 正常运行Starting正在启动中Error启动失败或运行异常Stopped已手动停止6.2 查看日志每个 MCP Server 的输出日志可以在 VS Code 的输出面板中查看打开输出面板CtrlShiftUmacOS 为CmdShiftU在右侧下拉菜单中选择对应的 MCP Server查看 stderr 输出和 JSON-RPC 消息6.3 重启 Server修改 Server 配置或代码后需要重启 Server 才能生效命令面板 → MCP: Restart Server → 选择目标 Server6.4 在 VS Code 中调试自定义 Server如果你正在开发自己的 MCP Server可以直接用 VS Code 的调试器启动它。创建.vscode/launch.json{version:0.2.0,configurations:[{name:Debug MCP Server (Python),type:debugpy,request:launch,module:my_mcp_server,console:internalConsole,env:{MCP_LOG_LEVEL:DEBUG}},{name:Debug MCP Server (TypeScript),type:node,request:launch,runtimeArgs:[--nolazy,-r,ts-node/register,src/index.ts],console:internalConsole}]}然后在mcp.json中将该 Server 的command指向调试模式。更实用的方式是用两个 VS Code 窗口一个窗口运行和调试 Server 代码另一个窗口通过 MCP 配置连接到该 Server 进行测试。6.5 常见问题排查表问题原因解决方案Server 显示 Errorcommand 不存在或路径错误检查 npx/python 是否在 PATH 中或使用绝对路径Copilot 不调用 MCP 工具工具描述不够清晰优化 Tool 的description字段连接 HTTP Server 失败认证头缺失或证书问题检查headers配置和网络代理环境变量未生效变量名拼写错误在终端中echo $VAR_NAME验证工具执行超时Server 处理耗时过长检查 Server 端是否需要优化或增加超时配置七、安全注意事项在 VS Code 中使用 MCP 时需特别注意以下几点风险点说明建议敏感数据泄露Server 可能读取并向 LLM 发送敏感文件配置合理的文件访问白名单环境变量暴露env中的密钥可能被日志记录避免在代码中打印完整 env第三方 Server 信任远程 HTTP Server 可能不可信仅连接可信来源的 Server项目级配置风险.vscode/mcp.json可能引入恶意配置审查团队共享的配置文件本篇小结知识点要点配置方式settings.json用户/工作区和.vscode/mcp.json项目级Copilot 协作MCP 工具自动被 Copilot Chat 调用支持#显式引用开发工作流工具代码搜索、文档查询、数据库访问、Git 操作变量替换${workspaceFolder}、${env:VAR}等预定义变量调试MCP 状态面板、输出日志、launch.json 调试自定义 Server安全文件白名单、环境变量保护、第三方 Server 审查下篇预告第 38 篇在 Cursor 中集成 MCP Server讲解 Cursor 编辑器的 MCP 配置方式以及如何将 MCP 工具融入 AI 编程工作流。如果本篇内容对你有帮助欢迎点赞收藏有任何疑问欢迎在评论区交流。
