如何设置 VS Code MCP Server (2026)

如何设置 VS Code MCP Server (2026)

Visual Studio Code 现在已支持模型上下文协议 (Model Context Protocol, MCP)，将赋予 Claude Code 和 Claude Desktop 强大能力的扩展性引入了全球最受欢迎的代码编辑器。通过 MCP server，您可以将 VS Code 中的 AI 助手连接到数据库、API、文件系统和自定义工具——为您的 AI 编程助手提供超越简单代码补全的超能力。

本指南将带您完成在 VS Code 中设置 MCP server、配置常用 server 以及构建自定义 server 的过程。

什么是 VS Code 中的 MCP？

模型上下文协议 (MCP) 是连接 AI 模型与外部工具及数据源的开放标准。VS Code 在 2026 年初采用了 MCP 支持，允许 GitHub Copilot、Continue.dev 和 Cline 等扩展使用 MCP server 来增强功能。

无 MCP	有 MCP
AI 仅能看到打开的文件	AI 可以查询数据库、API、文档
手动复制粘贴上下文	自动获取上下文
局限于代码补全	可以运行工具、抓取数据、搜索仓库
静态知识	动态、实时的信息

准备工作

• VS Code 1.99 或更高版本（MCP 支持于 2026 年初添加）。
• Node.js 18+ 用于运行 JavaScript/TypeScript MCP server。
• Python 3.10+ 用于运行 Python MCP server（可选）。
• 支持 MCP 的 AI 扩展：GitHub Copilot、Continue.dev、Cline 或 Roo Code。

方法 1：VS Code 原生 MCP 配置

VS Code 通过其设置原生支持 MCP server。这适用于 GitHub Copilot 以及其他集成了 VS Code MCP API 的扩展。

第 1 步：打开 MCP 设置

打开 VS Code 设置（Mac 上为 Cmd+,，Windows/Linux 上为 Ctrl+,）并搜索 "mcp"，或直接编辑 settings.json：

{
  "mcp.servers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/your/project"]
    }
  }
}

第 2 步：验证 Server

打开命令面板 (Cmd+Shift+P) 并运行：

MCP: List Servers

您应该能看到已配置的 server 及其状态列表。

项目级配置

对于特定项目的 MCP server，在项目根目录创建一个 .vscode/mcp.json 文件：

{
  "servers": {
    "project-db": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sqlite", "--db-path", "./database.sqlite"]
    },
    "project-docs": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "./docs"]
    }
  }
}

该文件可以提交到版本控制系统中，以便您的整个团队获得相同的 MCP 配置。

方法 2：在 Continue.dev 中使用 MCP

Continue.dev 是一款深受欢迎的开源 AI 扩展，具有出色的 MCP 支持。

第 1 步：安装 Continue

code --install-extension continue.continue

或者在 VS Code 扩展面板中搜索 "Continue"。

第 2 步：配置 MCP Server

编辑 ~/.continue/config.yaml（或项目级的 .continue/config.yaml）：

mcpServers:
  - name: filesystem
    command: npx
    args:
      - "-y"
      - "@modelcontextprotocol/server-filesystem"
      - "/path/to/project"

  - name: github
    command: npx
    args:
      - "-y"
      - "@modelcontextprotocol/server-github"
    env:
      GITHUB_TOKEN: "ghp_your_token"

  - name: postgres
    command: npx
    args:
      - "-y"
      - "@modelcontextprotocol/server-postgres"
      - "postgresql://user:pass@localhost:5432/mydb"

第 3 步：在聊天中使用 MCP 工具

打开 Continue 的聊天面板 (Cmd+L) 并提出利用 MCP 工具的问题：

在 GitHub 仓库中搜索所有标记为 "bug" 的未解决 issue

查询数据库，查找在过去 7 天内注册的用户

Continue 将自动使用适当的 MCP 工具来完成请求。

方法 3：在 Cline 中使用 MCP

Cline 是另一款流行的 VS Code 扩展，具有深度的 MCP 集成和智能体 (agentic) 能力。

第 1 步：安装 Cline

code --install-extension saoudrizwan.claude-dev

第 2 步：配置 MCP Server

Cline 从 VS Code 设置或其自身的设置文件中读取 MCP 配置。打开 Cline 的设置面板并导航到 MCP 部分，或添加到您的 VS Code settings.json：

{
  "cline.mcpServers": {
    "brave-search": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/brave-search-mcp"],
      "env": {
        "BRAVE_API_KEY": "your-brave-api-key"
      }
    },
    "memory": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-memory"]
    }
  }
}

适用于 VS Code 的常用 MCP Server

以下是开发工作流中最有用的 MCP server：

1. Filesystem Server

允许 AI 在指定目录中读取和写入文件。

{
  "filesystem": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
  }
}

使用场景： 让 AI 读取工作区之外目录中的配置文件、文档或代码。

2. GitHub Server

访问 GitHub 仓库、issue、pull request 和代码搜索。

{
  "github": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-github"],
    "env": {
      "GITHUB_TOKEN": "ghp_your_token"
    }
  }
}

使用场景： “查找上个月修改了 auth 模块的所有 PR。”

3. PostgreSQL / SQLite Server

直接从 AI 聊天中查询数据库。

{
  "postgres": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-postgres", "postgresql://localhost:5432/mydb"]
  }
}

使用场景： “显示 users 表的模式”或“昨天下了多少个订单？”

4. Brave Search Server

在您的 AI 助手中进行网页搜索。

{
  "brave-search": {
    "command": "npx",
    "args": ["-y", "@anthropic-ai/brave-search-mcp"],
    "env": {
      "BRAVE_API_KEY": "your-key"
    }
  }
}

使用场景： “搜索最新的 React 19 迁移指南。”

5. Memory Server

跨会话持久化的记忆。

{
  "memory": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-memory"]
  }
}

使用场景： “记住我们的 API 所有端点都使用 snake_case”——AI 将在未来的会话中记住这一点。

6. Puppeteer / Browser Server

控制无头浏览器进行测试和爬取。

{
  "puppeteer": {
    "command": "npx",
    "args": ["-y", "@anthropic-ai/puppeteer-mcp"]
  }
}

使用场景： “打开 localhost:3000 并截取仪表板页面的屏幕截图。”

Server 对比表

Server	主要用途	设置难度	是否免费
Filesystem	文件访问	简单	是
GitHub	仓库管理	简单	是
PostgreSQL	数据库查询	简单	是
SQLite	本地数据库查询	简单	是
Brave Search	网页搜索	简单	有免费额度
Memory	持久化上下文	简单	是
Puppeteer	浏览器控制	中等	是
Slack	团队沟通	中等	是
Linear	问题追踪	中等	是

为 VS Code 构建自定义 MCP Server

有时现有的 server 无法覆盖您的使用场景。以下是构建自定义 server 的方法。

示例：API 文档 Server

该 server 为您的 AI 提供访问项目 API 文档的权限：

// api-docs-mcp/index.js
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
import fs from "fs";
import path from "path";

const server = new McpServer({
  name: "api-docs",
  version: "1.0.0",
});

const DOCS_DIR = process.env.DOCS_DIR || "./docs/api";

// 工具：搜索 API 文档
server.tool(
  "search_api_docs",
  "搜索 API 文档中的端点、参数或概念",
  {
    query: z.string().describe("搜索词或端点路径"),
  },
  async ({ query }) => {
    const files = fs.readdirSync(DOCS_DIR).filter(f => f.endsWith(".md"));
    const results = [];

    for (const file of files) {
      const content = fs.readFileSync(path.join(DOCS_DIR, file), "utf-8");
      if (content.toLowerCase().includes(query.toLowerCase())) {
        results.push({ file, content: content.substring(0, 2000) });
      }
    }

    if (results.length === 0) {
      return { content: [{ type: "text", text: "未找到匹配的文档。" }] };
    }

    const text = results.map(r => `## ${r.file}\n${r.content}`).join("\n\n---\n\n");
    return { content: [{ type: "text", text }] };
  }
);

// 工具：列出所有 API 端点
server.tool(
  "list_api_endpoints",
  "列出所有已记录的 API 端点",
  {},
  async () => {
    const files = fs.readdirSync(DOCS_DIR).filter(f => f.endsWith(".md"));
    const endpoints = [];

    for (const file of files) {
      const content = fs.readFileSync(path.join(DOCS_DIR, file), "utf-8");
      const matches = content.match(/^##\s+(GET|POST|PUT|DELETE|PATCH)\s+(.+)$/gm);
      if (matches) {
        endpoints.push(...matches.map(m => m.replace("## ", "")));
      }
    }

    return {
      content: [{ type: "text", text: endpoints.join("\n") || "未找到端点。" }],
    };
  }
);

// 资源：完整 API 文档
server.resource(
  "docs://api/full",
  "完整的 API 文档",
  async () => {
    const files = fs.readdirSync(DOCS_DIR).filter(f => f.endsWith(".md"));
    const fullDocs = files
      .map(f => fs.readFileSync(path.join(DOCS_DIR, f), "utf-8"))
      .join("\n\n---\n\n");

    return { content: [{ type: "text", text: fullDocs }] };
  }
);

const transport = new StdioServerTransport();
await server.connect(transport);

初始化项目：

mkdir api-docs-mcp && cd api-docs-mcp
npm init -y
npm install @modelcontextprotocol/sdk zod

在 package.json 中添加 "type": "module"，然后在 VS Code 中注册：

{
  "api-docs": {
    "command": "node",
    "args": ["/path/to/api-docs-mcp/index.js"],
    "env": {
      "DOCS_DIR": "/path/to/your/project/docs/api"
    }
  }
}

故障排除

问题	解决方案
Server 未出现	重启 VS Code。检查配置中的 JSON 语法错误。
"Command not found"	确保 Node.js 在您的 PATH 中。尝试使用 npx 的完整路径。
Server 启动时崩溃	在终端手动运行 server 命令以产看错误输出。
聊天中工具不可用	验证您的 AI 扩展是否支持 MCP。检查扩展设置。
Server 响应缓慢	某些 server（如数据库）依赖外部服务。检查连通性。
环境变量未设置	使用 MCP 配置中的 env 字段，而不是系统环境变量。

最佳实践

1. 使用项目级配置。 将 .vscode/mcp.json 放在您的仓库中，以便团队共享相同的设置。
2. 限制文件访问。 仅记录 filesystem server 访问其需要的目录。
3. 保护凭据。 为 API 密钥使用环境变量，切勿硬编码。
4. 从官方 server 开始。 @modelcontextprotocol/server-* 包经过良好测试。
5. 先在终端测试。 在连接到 VS Code 之前，先独立运行 MCP server。

总结

VS Code 中的 MCP 支持将 AI 编程助手从简单的自动补全工具转变为智能体，它们可以查询数据库、搜索文档、管理仓库并与您的整个开发栈进行交互。设置仅需几分钟，而生产力的提升却是巨大的。

如果您的开发工作流涉及 AI 生成媒体（如图像、视频或数字人），免费试用 Hypereal AI —— 35 个积分，无需信用卡。其 REST API 可轻松与任何 MCP server 或 VS Code 扩展集成，以便在开发过程中生成媒体内容。