VSCode 配置 Roo Code / Cline MCP Server
侧边栏壁纸
  • 累计撰写 29 篇文章
  • 累计收到 1 条评论

VSCode 配置 Roo Code / Cline MCP Server

残月
2025-03-17 / 0 评论 / 693 阅读 / 正在检测是否收录...

m8cyb27v.png

最近 AI 使用 MCP Server 比较热门,下面是介绍如何在 Window 系统上的 VSCode 中配置 MCP 服务 的方法。

插件安装

如果你还没有安装 Cline/Roo Code 拓展,根据下述流程可以安装。
首先在 VSCode 左侧菜单点击拓展
m8cvp7t1.png
在搜索框搜索 ClineRoo Code (原名 Roo Cline)下面使用 Roo Code 作为演示
搜索后右下角会有蓝色安装(Install)按钮,点击安装

m8cvrwa5.png
安装完成后左边菜单栏会多一个火箭图标,代表拓展安装完成!

m8cvtj75.png

MCP Server 安装

点击左侧拓展图标后弹出下面的页面,点击图中红色框的按钮来配置MCP Server,Cline为第二张图。
m8cvw30h.png
m8cvzbpe.png

跳出界面后点击图中[1]编辑MCP配置(Configure MCP Servers)按钮,右侧[2]处会弹出配置文件,下面所有的插件都在这个 mcpServers 中进行配置。
m8cvx53q.png

官方有社区提供的MCP Server 点击下面的跳转
GitHub 官方MCP Server

m8cw4jok.png

Sequential Thinking MCP Server

这里我安装 Sequential Thinking 作为演示,在提供的社区MCP Server中找到 Sequential Thinking并点击蓝色链接。
文章下方会有给出的配置 JSON 这里将 npx 配置方式复制到 VSCode 打开的配置文件中。
m8cw69eq.png
如下所示

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

m8cw916y.png

这里因为时 Window 需要修改一下配置,将 command 改为 cmdargs 中添加 /cnpx 后保存。

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

保存后右侧就会显示刚刚写好的配置项。
m8cwecyn.png

如有报错请点击左侧文章标题跳转至安装错误修复

安装完成后右侧会显示个小绿灯。
自此 MCP Server 安装完成,你可以在项目中使用。
m8cy93l7.png

filesystem MCP Server

如果位置找不到请看第一个 MCP 安装方法

走网站上复制安装json,这里注意一下json中的 /Users/username/Desktop/path/to/other/allowed/dir 代表插件可以操作的目录,根据自己的要求进行配置截图中是我配置的。

如有报错请点击左侧文章标题跳转至安装错误修复

    "filesystem": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Desktop",
        "/path/to/other/allowed/dir"
      ]
    },

m8cyu784.png

安装错误修复

看一眼下面tips
表情 表情 表情

问题1

执行的时候提示没有这个命令(这个乱码意思)
m8d2d1d3.png

解决方法

npx 清除一下缓存可能需要安装

npx clear-npx-cache

m8d2gnsh.png

问题2

如果你安装的时候出现了类似 ${APPDATA} 找不到路径可用下面方法解决。
m8cy5mja.png

解决方法

原因可能是环境原因导致的在配置项中指明 APPDATA,这里Admin需要换成你的用户名,具体可到C:\User\中查看。
这里的set要加npx的上面,其他MCP遇到此问题也是一样的。

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

评论 (0)

取消