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. 启动命令:是用 npxdocker 还是 node
  2. 命令参数:后面跟着什么样的参数?
  3. 环境变量:是否需要设置 API_KEY 之类的密钥?

常用 MCP 服务

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

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

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