Visual Studio Code 中 MCP 服务器的配置与应用指南

本文深入探讨了如何在 Visual Studio Code 中设置和利用模型上下文协议(MCP)服务器,从而显著增强 AI 辅助编码功能。它详细介绍了 MCP 的基础概念、配置方法、实际应用示例以及高级使用技巧,旨在帮助开发者更有效地集成和管理 AI 模型提供的工具,提升开发效率。

阅读时长: 8 分钟
共 3812字
作者: eimoon.com

MCP:VSCode 中 AI 辅助编程的新范式

Visual Studio Code (VSCode) 通过集成 Model Context Protocol (MCP) 服务器,极大地提升了开发者与 AI 编码助手(如 GitHub Copilot)的交互体验。MCP 是一项开放标准,旨在使 AI 模型能够通过一个统一的接口与外部工具和服务进行通信。在 VSCode 中,MCP 服务器通过允许您将兼容的服务器连接到 GitHub Copilot 的代理(Proxy)模式工作流,从而扩展其功能。

MCP 遵循客户端-服务器(Client-Server)架构。MCP 客户端(例如 VSCode)连接到 MCP 服务器,并代表 AI 模型请求操作。这些服务器通过定义明确的接口提供专门的工具(Tools),从而暴露特定功能。该协议本身定义了客户端和服务器之间通信的消息格式,包括工具发现、调用和响应处理。

举例来说,一个文件系统 VSCode MCP 服务器可以提供读取、写入或搜索文件和目录的工具;而 GitHub 的 MCP 服务器则能提供列出存储库、创建拉取请求(Pull Request)或管理议题(Issues)的工具。通过标准化这些交互,VSCode MCP 服务器生态系统消除了每个 AI 模型和工具之间进行自定义集成的需求,使得扩展 AI 助手的能力变得更加容易和高效。

集成 VSCode MCP 服务器的先决条件

在深入 VSCode MCP 服务器的设置之前,了解 VSCode 当前支持的 MCP 功能至关重要。VSCode 支持本地标准输入/输出(stdio)和服务器发送事件(Server-Sent Events, SSE)作为 MCP 服务器的传输方式。目前,在 MCP 规范的三种基本类型(工具、提示、资源)中,服务器仅能向 Copilot 的代理模式提供“工具”。

工具的列表和描述可以使用列表更改事件进行动态更新。VSCode 使用 MCP 文档中指定的根事件向服务器提供有关当前工作区文件夹的信息。

开始集成 VSCode MCP 服务器所需的先决条件包括:

  1. 安装了 GitHub Copilot 扩展的 Visual Studio Code。
  2. 对 JSON 配置的基本理解。
  3. 可以访问您希望集成的 MCP 兼容服务器。
  4. 您的 MCP 服务器将与之交互的任何服务所需的凭据(Credentials)。

添加与配置 MCP 服务器的多种方式

官方的 MCP 服务器存储库是查找展示 MCP 多功能性的参考、官方和社区贡献服务器的绝佳起点。随着这个生态系统的不断发展,您可以期待越来越多的服务器和工具可用于与您的项目集成。

有多种方法可以将 VSCode MCP 服务器添加到您的开发环境中:

  1. 工作区配置方法:在您的工作区中创建 .vscode/mcp.json 文件,以便与项目协作者共享配置。此方法非常适合项目特定的服务器配置。
  2. 命令面板方法:从命令面板(Command Palette)运行 MCP: Add Server 命令,并提供服务器信息以添加新的 MCP 服务器配置。您可以选择将其添加到工作区设置或用户设置。
  3. 用户设置方法:在 VSCode 用户设置中的 mcp 属性下指定服务器,以在所有工作区中启用 MCP 服务器。
  4. 自动发现方法:VSCode 可以自动检测并重用您在其他工具(如 Claude Desktop)中定义的 MCP 服务器。您可以使用 chat.mcp.discovery.enabled 设置启用自动发现。
  5. 命令行方法:使用 VSCode 命令行界面(CLI)与 -add-mcp 选项将 MCP 服务器添加到您的用户配置文件或工作区。
  6. URL 处理程序方法:VSCode 包含一个 URL 处理程序,您可以使用它通过构建特殊链接格式来安装 MCP 服务器。

VSCode MCP 服务器配置详解(JSON 格式)

VSCode MCP 服务器配置遵循特定的 JSON 格式,允许您定义服务器连接、参数和安全输入处理。以下是基本的结构:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "api-key",
      "description": "API Key",
      "password": true
    }
  ],
  "servers": {
    "ServerName": {
      "type": "stdio",
      "command": "command-to-start-server",
      "args": ["arg1", "arg2"],
      "env": {
        "ENV_VAR": "${input:api-key}"
      }
    }
  }
}

servers 字段包含了 MCP 服务器的列表,并遵循 Claude Desktop 的配置格式。每个服务器都用一个名称(作为键)和一个配置对象指定。VSCode 在 MCP 服务器列表中显示服务器名称。

对于本地运行的 stdio 连接,您需要指定:

  • type: 设置为 "stdio"
  • command: 启动服务器可执行文件的命令。
  • args: 传递给命令的参数数组。
  • env: 服务器的环境变量(Environment Variables)。
  • envFile: (可选) .env 文件的路径。

对于连接到远程服务器的 SSE 连接,您需要指定:

  • type: 设置为 "sse"
  • url: 服务器的 URL。
  • headers: 服务器的 HTTP 头(HTTP Headers)。

inputs 字段允许您定义配置值的自定义占位符,这有助于避免硬编码敏感信息。VSCode 会在服务器首次启动时提示您输入这些值,并安全地存储它们以供后续使用。

实用 VSCode MCP 服务器设置示例

以下是几个实用的 VSCode MCP 服务器配置示例:

示例 1:Perplexity MCP 服务器

此示例展示了如何配置一个 Perplexity MCP 服务器,通过 stdio 类型连接并使用环境变量传递 API Key。

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

示例 2:基于 Docker 的 MCP 服务器

通过 Docker 容器运行 MCP 服务器,可以实现更好的环境隔离和可移植性。

{
  "inputs": [
    {
      "type": "promptString",
      "id": "perplexity-key",
      "description": "Perplexity API Key",
      "password": true
    }
  ],
  "servers": {
    "Perplexity": {
      "type": "stdio",
      "command": "docker",
      "args": ["run", "-i", "--rm", "-e", "PERPLEXITY_API_KEY", "mcp/perplexity-ask"],
      "env": {
        "PERPLEXITY_API_KEY": "${input:perplexity-key}"
      }
    }
  }
}

示例 3:远程 MCP 服务器

此示例展示了如何连接到通过 SSE 传输的远程 MCP 服务器。

{
  "servers": {
    "my-remote-server": {
      "type": "sse",
      "url": "http://api.contoso.com/sse",
      "headers": { "VERSION": "1.2" }
    }
  }
}

在代理模式下利用 MCP 服务器工具

添加 MCP 服务器后,您可以在 GitHub Copilot 的代理模式下使用它提供的工具:

  1. 打开聊天视图(Windows, Linux: Ctrl+Alt+I; Mac: ⌃⌘I),并从下拉菜单中选择“代理模式”(Proxy Mode)。
  2. 单击“工具”(Tools)按钮查看所有已连接 MCP 服务器的可用工具列表。
  3. (可选)选择或取消选择您要使用的特定工具。您可以在搜索框中输入以搜索工具。
  4. 在聊天输入框中输入您的提示(Prompt),并注意工具如何根据需要自动调用。

默认情况下,当调用工具时,您需要先确认操作才能运行。此安全措施是必需的,因为工具可能在本地机器上运行,并可能执行修改文件或数据的操作。您可以使用“继续”(Continue)按钮的下拉选项自动确认当前会话、工作区或所有未来调用中特定工具的操作。

您还可以通过键入 # 后跟工具名称来在提示中直接引用工具。此技术适用于所有聊天模式(询问、编辑和代理模式)。

若要进行更精细的控制,您可以在运行工具之前通过选择工具名称旁边的箭头来验证和编辑工具输入参数,以查看其详细信息。

管理与排查 VSCode MCP 服务器连接问题

VSCode 提供了多种方式来管理您的 MCP 服务器连接:

  1. 从命令面板运行 MCP: List Servers 命令,以查看所有已配置的 MCP 服务器。
  2. 从服务器列表中,您可以根据需要启动、停止或重新启动服务器。
  3. 您可以查看服务器配置和服务器日志以诊断问题。
  4. 当您打开 .vscode/mcp.json 文件时,VSCode 会直接从编辑器中显示启动、停止或重新启动服务器的命令。

这些管理功能可确保您完全控制正在运行的 MCP 服务器以及它们的配置方式,从而轻松排除故障或根据需要调整设置。

当 VSCode 遇到 MCP 服务器问题时,它会在聊天视图中显示错误指示。要进行故障排除:

  1. 选择聊天视图中的错误通知,然后选择“显示输出”(Show Output)选项以查看服务器日志。
  2. 或者,从命令面板运行 MCP: List Servers,选择有问题的服务器,然后选择“显示输出”。
  3. 检查配置中是否正确提供了所有必需的参数。
  4. 验证服务器可执行文件是否可用,并可以使用指定的命令和参数运行。
  5. 确保任何必需的环境变量或 API 密钥都已正确设置。

常见问题包括:

  • 缺少或不正确的 API 密钥。
  • 远程服务器的网络连接问题。
  • 运行服务器命令时的权限问题。
  • 配置 JSON 中的语法错误。

构建自定义 VSCode MCP 服务器

对于希望进一步扩展 VSCode 功能的开发者来说,创建自己的 MCP 服务器是一个绝佳选择。VSCode 拥有开发 MCP 服务器所需的所有工具。虽然这些服务器可以用任何可以处理 stdout 通信的语言编写,但有几个官方 SDK 可用于简化开发:

  • TypeScript SDK
  • Python SDK
  • Java SDK
  • Kotlin SDK
  • C# SDK

开发 VSCode MCP 服务器时,重点是创建能够解决特定问题或自动化工作流中重复任务的工具。MCP 工具的良好候选包括:

  • 自定义项目脚手架(Scaffolding)。
  • 与内部 API 或服务的集成。
  • 专业的代码分析或转换。
  • 数据库交互。
  • 部署工作流。

您的自定义 VSCode MCP 服务器可以通过自动化任务和直接通过 Copilot 代理界面提供上下文协助,从而显著增强您的开发体验。

VSCode MCP 服务器的高级使用技巧

一旦您熟悉了基本的 VSCode MCP 服务器设置,您就可以探索更高级的技术:

控制工具使用

您有几种选择来控制工作流中使用的 MCP 工具:

  1. 在代理模式下,使用聊天视图中的“工具”按钮根据需要切换特定工具的开/关。
  2. 通过使用“添加上下文”(Add Context)按钮或键入 # 后跟工具名称,将特定工具添加到您的提示中。
  3. 为了更高级的控制,创建 .github/copilot-instructions.md 文件以通过特定指南微调工具使用。

环境变量管理

对于需要敏感信息(如 API 密钥)的工具:

  1. 在配置中使用输入变量以避免硬编码凭据。
  2. 考虑为本地开发使用环境变量文件(.env)。
  3. 对于团队环境,记录所需的变量,但让每个开发者设置自己的值。

组合多个服务器

您可以组合多个 VSCode MCP 服务器以创建强大的工作流:

  1. 添加用于本地操作的文件系统工具。
  2. 包含用于存储库管理的 GitHub 工具。
  3. 为您的特定领域或项目需求添加专用工具。
  4. 配置云服务工具以进行部署和基础设施管理。

通过这种方法,您可以构建一个全面的开发环境,在整个工作流中利用 AI 辅助。

结语:展望 VSCode MCP 服务器的未来

VSCode MCP 服务器生态系统代表了开发者工具的一个激动人心的前沿,它以标准化、可扩展的方式将 AI 功能带入您的编码工作流。随着 MCP 规范的不断发展和更多服务器的可用,我们可以期待更丰富的集成可能性。

通过掌握 VSCode MCP 服务器的设置和使用,您将自己置于 AI 辅助开发的前沿,借助可以显著提高生产力和代码质量的工具。无论您是使用现有服务器还是创建自己的服务器,MCP 架构都为下一代开发工具提供了灵活的基础。

在探索这个生态系统时,请记住 Model Context Protocol 周围的社区正在迅速发展。考虑为现有项目做出贡献或分享您的自定义服务器,以帮助构建这个新兴的 AI 辅助开发标准。

通过适当的设置和配置,VSCode MCP 服务器可以改变您与开发环境的交互方式,使复杂任务更简单,并帮助您专注于最重要的事情——编写出色的代码。

关于

关注我获取更多资讯

公众号
📢 公众号
个人号
💬 个人号
使用 Hugo 构建
主题 StackJimmy 设计