在 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。

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


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

  2. 打开工作区

    • 在 VSCode 中打开你的项目文件夹(工作区)。
  3. 创建配置文件

    • 在工作区根目录下创建 .vscode 文件夹(如果不存在)。
    • 在 .vscode 文件夹中创建 mcp.json 文件。
  4. 添加 MCP Server 配置

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

json

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,因为它们可能在你的机器上运行任意代码。

  1. 通过命令面板添加 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 会自动应用配置。

  1. 配置用户设置(全局)

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

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

json

json 复制代码
{
  "mcp": {
    "servers": {
      "my-mcp-server": {
        "type": "stdio",
        "command": "npx",
        "args": ["-y", "@modelcontextprotocol/server-example"]
      }
    }
  }
}
  1. 保存后,配置将应用于所有工作区。

  1. 验证和使用 MCP Server

  2. 检查服务器状态

    • 运行命令 MCP: List Servers(通过命令面板)。
    • 查看已配置的服务器列表,确认服务器状态(绿色小灯表示运行正常)。
  3. 使用代理模式

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

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

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

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

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

json

json 复制代码
{
  "mcpServers": {
    "sequential-thinking": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@modelcontextprotocol/server-sequential-thinking"]
    }
  }
}
  • 环境变量:确保环境变量(如 APPDATA)正确设置。例如:

json

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 包。

  1. 故障排查
  • 服务器未运行
    • 检查聊天视图中的错误通知,点击"显示输出"查看日志。
    • 运行 MCP: List Servers,选择服务器并查看输出日志。
  • 命令失败
    • 确认 command 和 args 正确,尝试在终端手动运行命令以调试。
    • 确保所需工具(如 npx、docker)已安装。
  • 连接问题
    • 如果使用 sse 连接,检查服务器 URL 是否正确且端口未被占用。
  • 配置错误

  1. 示例:配置 GitHub MCP Server

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

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

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[](https://code.visualstudio.com/docs/copilot/chat/mcp-servers)


注意事项

  • 安全性:仅从可信来源安装 MCP Server,审查配置和代码,避免泄露敏感信息。
  • 性能:MCP Server 可能占用系统资源,建议根据需要选择工具。
  • 更新:MCP 生态系统正在快速发展,定期检查 VSCode 和 MCP Server 的更新。
相关推荐
2301_803554521 小时前
vim,gcc/g++,makefile,cmake
linux·编辑器·vim
MonkeyKing_sunyuhua2 小时前
VSCode + Cline AI辅助编程完全指南
ide·人工智能·vscode
炒空心菜菜3 小时前
MapReduce 实现 WordCount
java·开发语言·ide·后端·spark·eclipse·mapreduce
未来之窗软件服务4 小时前
医院药品展示大屏:开启多维度服务与管理新窗口—仙盟创梦IDE
ide·智慧大屏幕·信发系统·仙盟创梦ide
ykjhr_3d4 小时前
解锁课程编辑器之独特风姿
编辑器
threelab5 小时前
12.three官方示例+编辑器+AI快速学习webgl_buffergeometry_indexed
学习·编辑器·webgl
smileNicky5 小时前
在 VSCode 中运行 Vue.js 项目
ide·vue.js·vscode
Growthofnotes6 小时前
VSCode中Node.js 使用教程
ide·vscode·node.js
遗憾皆是温柔7 小时前
MyBatis—动态 SQL
java·数据库·ide·sql·mybatis