Claude Code 多 IDE 使用教程

前置说明

重要提示

  • 本教程适用于通过 TokenPan 中转服务使用 Claude Code 的用户
  • 操作前请确保已完成 Claude Code 配置教程 中的基础配置
  • 注意:Claude 扩展会直接使用终端中的环境变量和配置(如 $ANTHROPIC_API_KEY 等),请确保终端环境已正确配置。

概述

本教程将指导您在 VSCodeCursorTrae 三种常用编辑器中接入并使用 Claude Code 及其相关模型。

一、在 VSCode 中使用

VSCode 是目前全球使用人数最多、最受开发者欢迎的代码编辑器。

在 VSCode 中,Claude Code 通过官方扩展的形式深度集成,开发者无需离开编辑器即可直接调用 Claude 的编码辅助能力。

1. 安装官方扩展

方式一:CLI 自动安装(推荐)

在 VSCode 的集成终端中运行一次 claude,CLI 会自动检测宿主环境并安装配套的 Claude Code 扩展:

bash
# 打开 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 能力,最稳妥的方式是终端:

bash
# 1. 打开 Trae 内置终端
# 2. 切换到项目目录
cd your_project

# 3. 启动 claude
claude

所有功能(Plan Mode、/init/review、MCP、Hooks、Subagents)都可正常使用。

2. 通过 VSIX 安装 Claude Code 扩展(可选)

若希望复用 VSCode 扩展的快捷键和 diff 集成:

  1. VSCode Marketplace 下载 Claude Code 扩展的 .vsix 文件
  2. Trae 扩展面板 → 从 VSIX 安装
  3. 重启 Trae

注意

部分 VSCode 专属 API 在 Trae 中可能不完全兼容,若遇到问题请回退到终端方式。

3. 添加自定义模型(接入 Trae 原生 AI)

把 Anthropic Claude 模型挂入 Trae 的 Chat / Builder 面板:

步骤 1:打开模型配置

Trae 设置 → 模型 / Models添加自定义模型 / Add Custom Model

步骤 2:填写供应商信息

如果您在终端中已经配置过相关环境变量,可以通过以下指令获取对应的参数:

bash
echo $ANTHROPIC_BASE_URL
echo $ANTHROPIC_API_KEY

填写相关信息:

text
Provider:       OpenAI(兼容协议)
API Base URL:   https://yyken.com/v1/chat/completions
API Key:        sk-*************
Model Name:     claude-opus-4-6

步骤 3:批量添加模型

重复上一步,依次添加常用模型:

bash
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. 安装扩展

bash
# 方式一:在 Cursor 集成终端运行 claude,自动安装扩展
claude

# 方式二:扩展面板搜索 "Claude Code" 手动安装

安装后重启 Cursor,快捷键、面板等行为与 VSCode 基本一致。

2. 添加自定义模型

Cursor 原生支持通过 OpenAI 兼容协议接入第三方模型,把中转的 Claude 模型挂入 Cursor Chat / Composer:

步骤 1:打开模型配置

CursorSettingsModels(或 Cmd+, → 搜索 Models)。

步骤 2:填写 OpenAI 兼容配置

  1. 勾选 Override OpenAI Base URL,填写中转服务地址:
bash
Base URL:  https://yyken.com/v1
  1. OpenAI API Key 中填入您的 TokenPan API Key。
  2. Model NamesAdd model,添加要使用的 Claude 模型 ID:
bash
claude-opus-4-6
  1. 保存后在 Chat / Composer 的模型下拉框中即可切换使用。

提示

若要同时保留 Claude Code CLI 的 Agentic 能力(Slash 命令、Hooks、MCP 等),请继续在 Cursor 集成终端中使用 claude 命令;Cursor 自定义模型与 Claude Code CLI 互不影响。

四、常见问题

扩展无法识别 CLI

解决方案:

bash
# 升级到最新版
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 支持的模型名称一致