Claude Code 多 IDE 使用教程
前置说明
重要提示
- 本教程适用于通过 TokenPan 中转服务使用 Claude Code 的用户
- 操作前请确保已完成 Claude Code 配置教程 中的基础配置
- 注意:Claude 扩展会直接使用终端中的环境变量和配置(如
$ANTHROPIC_API_KEY等),请确保终端环境已正确配置。
概述
本教程将指导您在 VSCode、Cursor、Trae 三种常用编辑器中接入并使用 Claude Code 及其相关模型。
一、在 VSCode 中使用
VSCode 是目前全球使用人数最多、最受开发者欢迎的代码编辑器。
在 VSCode 中,Claude Code 通过官方扩展的形式深度集成,开发者无需离开编辑器即可直接调用 Claude 的编码辅助能力。
1. 安装官方扩展
方式一:CLI 自动安装(推荐)
在 VSCode 的集成终端中运行一次 claude,CLI 会自动检测宿主环境并安装配套的 Claude Code 扩展:
# 打开 VSCode 集成终端(Ctrl+`),执行:
claude
方式二:Marketplace 手动安装
在 VSCode 扩展面板(Cmd+Shift+X)搜索 Claude Code,点击 Install 后重启 VSCode。
2. 核心操作
| 操作 | 快捷键 / 方式 |
|---|---|
| 唤起 Claude 面板 | Cmd+Esc(macOS)/ Ctrl+Esc(Win/Linux) |
| 以当前选区为上下文提问 | 选中代码后打开面板,自动注入 |
| 引用某个文件 | 输入框中使用 @文件名 |
| 查看改动 | 原生 diff 视图,逐块 Accept / Reject |
| 打开终端模式 | VSCode 集成终端直接运行 claude |
二、在 Trae 中使用
Trae 是字节基于 VSCode 内核打造的 AI IDE,其官方市场没有收录 Claude Code 扩展,但兼容 VSCode 的扩展系统。在 Trae 中使用 Claude Code 的方式有以下几种。
1. 终端中直接使用 claude CLI
要获得 Claude Code 的完整 Agentic 能力,最稳妥的方式是终端:
# 1. 打开 Trae 内置终端
# 2. 切换到项目目录
cd your_project
# 3. 启动 claude
claude
所有功能(Plan Mode、/init、/review、MCP、Hooks、Subagents)都可正常使用。
2. 通过 VSIX 安装 Claude Code 扩展(可选)
若希望复用 VSCode 扩展的快捷键和 diff 集成:
- 从 VSCode Marketplace 下载 Claude Code 扩展的
.vsix文件 - Trae 扩展面板 → 从 VSIX 安装
- 重启 Trae
注意
部分 VSCode 专属 API 在 Trae 中可能不完全兼容,若遇到问题请回退到终端方式。
3. 添加自定义模型(接入 Trae 原生 AI)
把 Anthropic Claude 模型挂入 Trae 的 Chat / Builder 面板:
步骤 1:打开模型配置
Trae 设置 → 模型 / Models → 添加自定义模型 / Add Custom Model。
步骤 2:填写供应商信息
如果您在终端中已经配置过相关环境变量,可以通过以下指令获取对应的参数:
echo $ANTHROPIC_BASE_URL
echo $ANTHROPIC_API_KEY
填写相关信息:
Provider: OpenAI(兼容协议)
API Base URL: https://yyken.com/v1/chat/completions
API Key: sk-*************
Model Name: claude-opus-4-6
步骤 3:批量添加模型
重复上一步,依次添加常用模型:
claude-opus-4-6
claude-sonnet-4-6
claude-haiku-4-5-20251001
步骤 4:切换使用
保存后在 Trae 的 Chat / Builder 顶部模型下拉框中切换所需模型。
提示
这种方式是把 Claude 作为模型接入 Trae 的原生 AI,不等同于 Claude Code 的 Agentic 能力。如需完整功能,请配合方式 1(终端 claude)使用。
三、在 Cursor 中使用
Cursor 是一款以 AI 编程为核心卖点、基于 VSCode 内核打造的商业编辑器,内置了自己的 AI Chat 和 Composer 功能。
需要注意的是,Cursor 的自定义模型功能(即将第三方模型接入 Chat / Composer)仅对 Pro 及以上订阅用户开放,免费版无法使用此功能。如果您只是通过终端运行 claude CLI,则不受此限制。
1. 安装扩展
# 方式一:在 Cursor 集成终端运行 claude,自动安装扩展
claude
# 方式二:扩展面板搜索 "Claude Code" 手动安装
安装后重启 Cursor,快捷键、面板等行为与 VSCode 基本一致。
2. 添加自定义模型
Cursor 原生支持通过 OpenAI 兼容协议接入第三方模型,把中转的 Claude 模型挂入 Cursor Chat / Composer:
步骤 1:打开模型配置
Cursor → Settings → Models(或 Cmd+, → 搜索 Models)。
步骤 2:填写 OpenAI 兼容配置
- 勾选
Override OpenAI Base URL,填写中转服务地址:
Base URL: https://yyken.com/v1
- 在
OpenAI API Key中填入您的 TokenPan API Key。 - 在
Model Names中Add model,添加要使用的 Claude 模型 ID:
claude-opus-4-6
- 保存后在 Chat / Composer 的模型下拉框中即可切换使用。
提示
若要同时保留 Claude Code CLI 的 Agentic 能力(Slash 命令、Hooks、MCP 等),请继续在 Cursor 集成终端中使用 claude 命令;Cursor 自定义模型与 Claude Code CLI 互不影响。
四、常见问题
扩展无法识别 CLI
解决方案:
# 升级到最新版
npm install -g @anthropic-ai/claude-code@latest
# 确认 claude 在 PATH 中
which claude
# 重启 IDE
Cursor / Trae 自定义模型报错
- 确认 API Base URL 是否正确填写(
https://yyken.com/v1) - 确认协议类型匹配,优先使用 OpenAI 协议(兼容性更好)
- 检查 API Key 是否有效、额度是否充足
- 确认模型名称与 TokenPan 支持的模型名称一致