Skip to content

Vscode中使用vibe-coding ​

Claude Code ​

🧰 第一部分:Claude Code 官方扩展的两种用法 ​

你可以根据自己的喜好和场景,选择以下两种方式之一来使用 Claude Code:

使用方式核心特点典型操作流程
VS Code 图形界面扩展更直观,适合日常编码
• 安装后,会在侧边栏出现一个“火花”图标✨ 。
• 通过图形化面板与AI对话,AI的修改会以代码差异对比的方式清晰展示,你可以逐行决定接受或拒绝。
• 能自动感知你在编辑器中打开的文件和选中的代码,提供精准的上下文。
1. 在 VS Code 扩展市场搜索并安装 Claude Code 扩展。
2. 点击侧边栏的✨图标打开对话面板。
3. 在面板中提问或下达指令,AI的修改会以差异对比形式呈现,确认后应用。
终端命令行工具更强大,适合复杂任务和自动化
• 作为一个全局的命令行工具 claude 使用。
• 可以运行在 VS Code 的内置终端中,功能与扩展互补。
• 支持丰富的子命令 (如 /init 初始化项目, /review 审查代码) 和脚本集成。
1. 确保已安装 Node.js (18+),然后在终端全局安装:npm install -g @anthropic-ai/claude-code 。
2. 在项目目录下,通过 claude 命令启动交互式对话。
3. 在终端中直接提问或使用 / 开头的命令执行特定操作。

总结一下:如果你喜欢在编辑器的侧边栏里点点鼠标就能完成工作,VS Code扩展最适合你;如果你更习惯键盘操作,或者需要把AI能力集成到脚本里,命令行工具会是你的好帮手。而且,这两个方式可以同时使用,互不冲突。

🔗 第二部分:如何配置 Claude Code 使用 Minimax 模型 ​

无论你选择哪种方式,想要让 Claude Code 调用 Minimax 的模型(比如强大的 MiniMax-M2.5 ),核心原理都是修改它的API调用地址和密钥,让它把请求发送到 Minimax 的接口上。

在开始之前,你需要先准备好:

  1. Minimax API Key:登录 Minimax开放平台,在控制台中创建并获取你的API密钥。
  2. 接口地址:根据你的网络环境选择对应的地址:
    • 国内用户请用:https://api.minimaxi.com/anthropic
    • 国际用户请用:https://api.minimax.io/anthropic

配置方法 A:如果你主要使用 VS Code 扩展 ​

这种配置方式最直接,通过修改 VS Code 的设置文件来完成。

  1. 打开设置:在 VS Code 中,按 Ctrl+Shift+P (Mac: Cmd+Shift+P) 打开命令面板,输入 Preferences: Open Settings (JSON) 并选择,打开你的 settings.json 文件。

  2. 添加配置:在 settings.json 文件的末尾(注意在最后一个大括号 } 之前),粘贴以下配置。请务必将 <MINIMAX_API_KEY> 替换为你自己的真实API密钥。

    json
    "claudeCode.environmentVariables": [
            {
                "name": "ANTHROPIC_BASE_URL",
                "value": "<https://api.minimaxi.com/anthropic>" // 国内用户
                // "value": "<https://api.minimax.io/anthropic>" // 国际用户请用此行
            },
            {
                "name": "ANTHROPIC_AUTH_TOKEN",
                "value": "<MINIMAX_API_KEY>" // 替换为你的真实API密钥
            },
            {
                "name": "API_TIMEOUT_MS",
                "value": "3000000"
            },
            {
                "name": "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC",
                "value": "1"
            },
            {
                "name": "ANTHROPIC_MODEL",
                "value": "MiniMax-M2.5"
            },
            {
                "name": "ANTHROPIC_DEFAULT_SONNET_MODEL",
                "value": "MiniMax-M2.5"
            }
            // ... 你可以根据需要添加其他模型的映射
        ]
  3. 保存并生效:保存 settings.json 文件。之后,当你打开 Claude Code 扩展面板时,它就会自动使用 Minimax 的模型了。

注意:在 VS Code 的设置中添加环境变量后,原有的系统环境变量(如 ANTHROPIC_AUTH_TOKEN)会被覆盖,以避免冲突。

配置方法 B:如果你主要使用 终端命令行工具 ​

这种方式通过在启动 claude 命令前设置临时的环境变量来实现。

  1. 打开终端:进入你的项目目录。

  2. 设置环境变量:在终端中依次执行以下命令,同样,记得替换 <MINIMAX_API_KEY>。

    bash
    # 设置API调用的基础地址(根据你的位置选择)
    export ANTHROPIC_BASE_URL="<https://api.minimaxi.com/anthropic>"  # 国内用户
    # export ANTHROPIC_BASE_URL="<https://api.minimax.io/anthropic>" # 国际用户请用此行
    
    # 设置你的Minimax API密钥
    export ANTHROPIC_AUTH_TOKEN="<MINIMAX_API_KEY>"
    
    # (可选)指定使用的模型,不设置的话默认也会用MiniMax-M2.5
    export ANTHROPIC_MODEL="MiniMax-M2.5"
  3. 启动 Claude Code:在当前终端中,直接运行 claude 命令即可。

    bash
    claude

    之后在这个终端会话中,所有的请求都会通过 Minimax 的模型来处理。

✨ 配置方法 C:使用图形化工具 CCswitch(推荐新手) ​

如果你觉得手动修改配置文件有点复杂,还有一个更简单的办法,就是使用一个叫 CCswitch 的开源小工具。

  1. 下载安装:在 CCswitch的GitHub页面 找到适合你系统的版本(Windows/Mac)并安装。
  2. 添加配置:打开 CCswitch,点击“+”号,选择预设的 MiniMax 供应商,然后在弹出的窗口中填入你的 Minimax API Key,并选择模型(如 MiniMax-M2.5)。
  3. 一键启用:保存配置后,回到 CCswitch 首页,点击“启用”按钮。它会自动帮你修改好所有必要的配置文件。之后你在终端里直接输入 claude 就可以使用 Minimax 模型了。

配置的优先顺序 ​

当你同时使用了多种配置方式时,可能会出现配置冲突的情况。Claude Code 会按照以下优先级来决定使用哪个配置:

优先级配置方式配置文件位置生效范围
🔴 最高终端环境变量终端会话中 export 设置仅当前终端会话
🟠 高CCSwitch~/.claude.settings.json (用户级别)全局生效,重启终端后
🟡 中VS Code settings.json工作区或用户级 settings.json仅 VS Code 扩展

简单来说:

  • 🟡 VS Code 扩展会读取用户级和工作区级的 settings.json
  • 🟠 命令行工具主要读取 ~/.claude.settings.json(CCSwitch 就是修改这个文件)
  • 🔴 环境变量最"强势",只要它设了,就会覆盖其他所有配置

实际使用建议

如果你用 CCSwitch 配置了 Minimax,但突然想临时切换回官方 API 测试一下,只需要在终端里手动设置环境变量即可,优先级最高,无需修改任何配置文件。测试完后关掉终端,环境变量自动失效,又会回到 CCSwitch 配置的状态。

💡 总结一下 ​

  • VS Code 扩展适合在图形界面中直观地使用,通过修改 settings.json 来配置。
  • 命令行工具更加强大和灵活,通过在终端中设置环境变量来配置。
  • CCswitch 是一个图形化的“开关”,可以帮你一键完成所有配置,对新手非常友好。

配置好之后,你就可以在 VS Code 里尽情体验 Minimax 模型带来的编程快感了。

MCP (Model Context Protocol) ​

简介 ​

MCP 是一种开放协议,让 AI 助手能够与外部工具和数据源无缝连接。通过 MCP,你可以让 Claude Code 访问文件系统、搜索代码库、执行命令等。

MCP 的核心用途 ​

功能说明
工具调用AI 可以调用外部工具(如文件系统、搜索、Git 等)
资源访问AI 可以读取外部资源(如文件内容、数据库等)
提示模板共享可复用的提示模板

配置位置 ​

虽然每个 MCP 服务器都需要手动编写一段 JSON 配置,但现在 VS Code 已经提供了图形化界面和统一的配置规范,让整个过程变得标准了很多。

目前主要有两种配置路径,体验差别很大:

🆚 新旧配置方式对比 ​

特性🚀 现代方式 (图形化界面)📝 传统方式 (JSON文件)
操作方式通过命令面板 (Cmd+Shift+P),搜索"MCP",点击"安装"或"添加 MCP 服务器",跟随向导提示操作。手动编辑项目或用户目录下的 .vscode/mcp.json 文件。
配置难度极低。界面引导输入,交互友好,像安装普通插件一样。中等。需要了解 JSON 格式,并准确填写每个服务器的特定字段。
安全性更高。敏感信息(如 API 密钥)会通过单独的输入框安全填写,不会明文保存在配置文件中。较低。密钥等敏感信息通常直接写在 JSON 文件里,有泄露风险。
适用场景日常使用,添加大部分常见 MCP 服务器。需要精细控制服务器参数(如环境变量、超时时间)的高级用户或开发场景。

值得一提的是,即使你选择了手动编辑 JSON 文件,VS Code 也提供了贴心的辅助功能。比如,当你的配置中定义了需要输入的信息(inputs 字段),编辑器界面会直接出现"输入"和"启动"按钮,引导你完成最后的设置。

并非所有插件都适用

VSCode 本身提供了官方的 MCP 客户端实现(.vscode/mcp.json),但插件必须主动适配这个官方客户端才会读取该文件。如果插件自己实现了一套独立的 MCP 管理逻辑,就不会读取 .vscode/mcp.json。

例如:早期的 Claude 插件使用自己的配置方式,不读取 .vscode/mcp.json。

详细的 Claude Code 插件 MCP 配置方法,请参阅:Claude Code - MCP 配置

🛠️ 配置文件的核心结构 ​

无论通过哪种方式,最终配置的核心逻辑都是一样的:

json
{
    "servers": {
        "给你的服务器起个好记的名字": {
            "type": "stdio",
            "command": "启动命令",
            "args": ["命令参数1", "命令参数2"],
            "env": {
                "API_KEY": "你的密钥"
            }
        }
    }
}

💡 实战示例:添加 GitHub MCP 服务器 ​

  • JSON 配置方式:手动创建或修改 .vscode/mcp.json,将 GitHub 官方提供的配置代码粘贴进去。
  • 图形化方式:在命令面板选择"安装 MCP 服务器",找到 GitHub,点击安装,VS Code 会自动引导你完成授权。

📚 统一的配置逻辑 ​

每个 MCP 服务器因为功能不同,需要填写的"启动命令"和"参数"是唯一的。配置时只需要关注:

  1. 启动命令:是用 npx、docker 还是 node?
  2. 命令参数:后面跟着什么样的参数?
  3. 环境变量:是否需要设置 API_KEY 之类的密钥?

常用 MCP 服务 ​

服务包名功能
文件系统@modelcontextprotocol/server-filesystem读写文件、列出目录
Git@modelcontextprotocol/server-gitGit 操作
GitHub@modelcontextprotocol/server-githubGitHub API
搜索@modelcontextprotocol/server-fetch网页内容获取

配置完成后,Claude Code 就能通过 MCP 调用这些工具扩展自己的能力。

在配置过程中如果遇到任何问题,比如找不到文件、填了密钥报错,随时可以再来问我,我们一起看看怎么解决~