在 Visual Studio Code (VSCode) 中配置 MCP（Model Context Protocol）

前提条件

1. 安装 VSCode：确保已安装最新版本的 VSCode（建议使用 1.99 或以上版本，支持 MCP）。
2. 安装 GitHub Copilot 扩展：MCP 通常与 GitHub Copilot 的代理模式（Agent Mode）结合使用，确保已安装并登录 GitHub Copilot。
3. 启用 MCP 支持：在 VSCode 设置中，确保 chat.mcp.enabled 已启用（默认启用）。
4. 安装必要工具：根据 MCP Server 的运行需求，可能需要安装 Node.js、Python 或 Docker 等工具。

---

配置 MCP Server 的步骤

1. 选择配置方式

VSCode 提供了三种方式来添加 MCP Server：

• 工作区设置：通过在工作区创建 .vscode/mcp.json 文件配置，适合团队共享。
• 用户设置：通过 VSCode 的用户设置（settings.json）配置，适用于所有工作区。
• 自动发现：启用自动发现功能，检测其他工具（如 Claude Desktop）中定义的 MCP Server。

以下以最常用的 工作区设置 为例，介绍如何配置。

---

2. 创建 .vscode/mcp.json 文件

3. 打开工作区：

   • 在 VSCode 中打开你的项目文件夹（工作区）。

4. 创建配置文件：

   • 在工作区根目录下创建 .vscode 文件夹（如果不存在）。
   • 在 .vscode 文件夹中创建 mcp.json 文件。

5. 添加 MCP Server 配置：

   • 编辑 mcp.json，添加 MCP Server 的配置。以下是一个示例配置，用于添加 Perplexity MCP Server：

json

{"inputs": [{"type": "promptString","id": "api-key","description": "Perplexity API Key","password": true}],"servers": {"perplexity": {"type": "stdio","command": "npx","args": ["-y", "@modelcontextprotocol/server-perplexity"],"env": {"PERPLEXITY_API_KEY": "${input:api-key}"}}}
}

说明：

• inputs：定义启动服务器时需要输入的变量（如 API 密钥），VSCode 会在首次启动时提示输入，并安全存储。
• servers：定义 MCP Server 的配置。
  • type：连接类型，通常为 stdio（标准输入/输出）或 sse（服务器发送事件）。
  • command：运行服务器的命令（如 npx、docker 或自定义命令）。
  • args：命令的参数，指定要运行的 MCP Server 包。
  • env：环境变量，用于传递 API 密钥等敏感信息。

注意：

• 确保 command 和 args 指向的 MCP Server 包已正确安装（通过 npm install -g 或本地安装）。
• 仅使用来自可信来源的 MCP Server，因为它们可能在你的机器上运行任意代码。

---

3. 通过命令面板添加 MCP Server

如果你不想手动编辑 mcp.json，可以使用 VSCode 的命令面板：

1. 打开命令面板：
   • 按 Ctrl+Shift+P（或 Cmd+Shift+P on Mac）。
2. 输入并选择 MCP: Add Server。
3. 选择 MCP Server 类型（如 Perplexity、GitHub 等）。
4. 提供服务器信息（如命令、参数、环境变量）。
5. 选择存储位置：
   • Workspace Settings：将配置添加到 .vscode/mcp.json。
   • User Settings：将配置添加到全局 settings.json。
6. 保存后，VSCode 会自动应用配置。

---

4. 配置用户设置（全局）

如果你希望 MCP Server 在所有工作区生效，可以编辑用户设置：

1. 打开 VSCode 设置：
   • 按 Ctrl+,（或 Cmd+, on Mac）打开设置界面。
   • 或者通过命令面板运行 Preferences: Open Settings (JSON)。
2. 编辑 settings.json，添加以下内容：

json

{"mcp": {"servers": {"my-mcp-server": {"type": "stdio","command": "npx","args": ["-y", "@modelcontextprotocol/server-example"]}}}
}

1. 保存后，配置将应用于所有工作区。

---

5. 验证和使用 MCP Server

6. 检查服务器状态：

   • 运行命令 MCP: List Servers（通过命令面板）。
   • 查看已配置的服务器列表，确认服务器状态（绿色小灯表示运行正常）。

7. 使用代理模式：

   • 确保 GitHub Copilot 的代理模式已启用（在设置中启用 chat.agent.enabled）。
   • 打开聊天视图，选择 Agent 模式。
   • 输入任务，代理会自动调用 MCP Server 提供的工具（如文件操作、API 调用等）。

8. 管理工具：

   • 在聊天视图中点击“工具”图标，启用或禁用特定工具。
   • 使用 # 引用特定工具，如 #github 调用 GitHub MCP Server 的工具。

---

6. 针对 Windows 的额外注意事项

在 Windows 系统中，某些 MCP Server 配置可能需要调整：

• 命令修改：将 command 从 npx 改为 cmd，并在 args 中添加 /c 和 npx。示例：

json

{"mcpServers": {"sequential-thinking": {"command": "cmd","args": ["/c", "npx", "-y", "@modelcontextprotocol/server-sequential-thinking"]}}
}

• 环境变量：确保环境变量（如 APPDATA）正确设置。例如：

json

{"mcpServers": {"sequential-thinking": {"command": "cmd","args": ["/c", "set APPDATA=C:\\Users\\YourUsername\\AppData\\Roaming&&", "npx", "-y", "@modelcontextprotocol/server-sequential-thinking"]}}
}

• 安装依赖：确保 Node.js 已安装，并通过 npm install -g 安装所需的 MCP Server 包。

---

7. 故障排查

• 服务器未运行：
  • 检查聊天视图中的错误通知，点击“显示输出”查看日志。
  • 运行 MCP: List Servers，选择服务器并查看输出日志。
• 命令失败：
  • 确认 command 和 args 正确，尝试在终端手动运行命令以调试。
  • 确保所需工具（如 npx、docker）已安装。
• 连接问题：
  • 如果使用 sse 连接，检查服务器 URL 是否正确且端口未被占用。
• 配置错误：
  • 使用 VSCode 的 IntelliSense 检查 mcp.json 的语法错误。
  • 参考官方配置格式文档：https://code.visualstudio.com/docs/editor/mcp

---

8. 示例：配置 GitHub MCP Server

以下是一个配置 GitHub MCP Server 的示例：

1. 获取 GitHub 个人访问令牌：
   • 登录 GitHub，进入 Settings > Developer settings > Personal access tokens > Fine-grained tokens。
   • 创建令牌，设置必要的权限（如访问仓库）。
   • 复制生成的令牌。
2. 配置 mcp.json：

json

{"mcpServers": {"github": {"command": "cmd","args": ["/c", "npx", "-y", "@modelcontextprotocol/server-github"],"env": {"GITHUB_PERSONAL_ACCESS_TOKEN": "your_token_here"}}}
}

1. 保存并验证：
   • 运行 MCP: List Servers，确保 GitHub 服务器显示为绿色。
   • 在代理模式下输入 #github list repositories，测试服务器功能。

---

推荐的 MCP Server

以下是一些常用的 MCP Server，供参考：

• @modelcontextprotocol/server-filesystem：提供文件系统操作工具。
• @modelcontextprotocol/server-github：管理 GitHub 仓库、拉取请求等。
• @modelcontextprotocol/server-perplexity：集成 Perplexity AI 搜索功能。
• @executeautomation/playwright-mcp-server：支持浏览器自动化。

探索更多服务器：https://github.com/modelcontextprotocol

---

注意事项

• 安全性：仅从可信来源安装 MCP Server，审查配置和代码，避免泄露敏感信息。
• 性能：MCP Server 可能占用系统资源，建议根据需要选择工具。
• 更新：MCP 生态系统正在快速发展，定期检查 VSCode 和 MCP Server 的更新。