把 MCP Server 打包进 VS Code extension

大家好!我是韩老师。

本文是 MCP 系列文章的第六篇,之前的五篇是:

写在最前:如果你正好在用 Node.js 开发一个 MCP Server,那么,这篇文章将对你有用!

WHY

首先,你肯定要问,把 MCP Server 打包进 VS Code extension,有什么好处?

好处,有三:

  1. 在 VS Code 中,用户不需要任何配置,就可以直接安装 MCP Server。
  2. 用户不需要安装任何额外的工具来运行 MCP Server。甚至于,用户不需要安装 Node.js/npx。
  3. 整个 MCP Server + VS Code extension 的体积很小。以我的 Code Runner MCP Server 的 VS Code extension 为例,在没有使用 webpack 的情况下,整个体积都只有 4 MB。

HOW

你肯定想要知道,如何做到?

其实,很简单,三步就能搞定!

  1. 在你的 MCP Server 中,export 一个启动 Streamable Http MCP Server 的函数:
复制代码
export async function startMcpServer(transport: Transport, options?: HttpServerOptions): Promise<void | McpServerEndpoint> {
    if (transport === 'stdio') {
        return startStdioMcpServer();
    } else if (transport === 'http') {
        return startStreamableHttpMcpServer(options?.port);
    } else {
        throw new Error('Invalid transport. Must be either "stdio" or "http"');
    }
}
  1. 在 VS Code extension 中,引用你的 MCP Server 的 npm,然后启动 Streamable Http MCP Server,然后得到一个 localhost 的 MCP URL:
复制代码
import { startMcpServer } from "mcp-server-code-runner";

async function startHttpMcpServer(): Promise<string | undefined> {
    const result = await startMcpServer("http", { port: 3098 });

    return result ? result.url : undefined;
}
  1. 把这个 localhost 的 MCP URL,配置到 VS Code 的 settings.json 中:
复制代码
async function updateMcpUrlToVsCodeSettings(mcpUrl: string) {
    const configuration = vscode.workspace.getConfiguration();
    const mcpServers = configuration.get<any>("mcp.servers", {});
    mcpServers["code-runner-streamable-http-mcp-server"] = {
        type: "http",
        url: mcpUrl,
    };
    await configuration.update("mcp.servers", mcpServers, vscode.ConfigurationTarget.Global);
}

好了,大功告成!

原理其实也很简单:因为 VS Code extension,就是一个 Node.js 的程序。MCP Server 作为 VS Code extension 的一部分,一起运行在了 Extension Host 这个进程中。所以,不需要用户的机器上额外安装 Node.js/npx 了!

完整代码,完全开源,欢迎大家围观!

MCP Server:

https://github.com/formulahendry/mcp-server-code-runner

VS Code extension:

https://github.com/formulahendry/vscode-code-runner-mcp-server

大家也可以也可以在 VS Code Marketplace 搜索 Code Runner MCP Server 来直接试用:

注意需要使用最新的 VS Code Insider,版本号 >= 1.100
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner-mcp-server

相关推荐
唐老板9 小时前
MCP协议实战:从零写个Agent工具
ai编程·mcp
老实人阿三15 小时前
用 VS Code 和 Suno MCP 轻松生成背景音乐
mcp
花椒技术1 天前
Agent 不只会聊天:我们如何用 CLI 整理业务能力入口
agent·ai编程·mcp
ServBay2 天前
拒绝当二等公民,Windows 开发者如何无痛开启 Claude Code 本地全栈运维?
后端·ai编程·mcp
ServBay6 天前
Laravel Herd MCP 的替代,多语言与跨平台的 AI 本地开发选择
后端·ai编程·mcp
码哥字节6 天前
我把整个代码库喂给 Claude Code,工具超 50 个就静默丢失,这个坑太阴了
mcp·claude code·ai编程工具
Flynt6 天前
装上TypeScript 7.0 RC之后,最让我意外不是10倍提速
typescript·visual studio code
ServBay9 天前
打通 AI 编程本地运维边界,利用 MCP 协议简化环境与服务管理
后端·ai编程·mcp