VSCode 配置 Claude + Codex 完整教程

文章目录

    • 前置说明
    • [一、VSCode 配置 Claude(官方 Claude Code 插件)](#一、VSCode 配置 Claude(官方 Claude Code 插件))
      • [1. 安装插件](#1. 安装插件)
      • [2. 两种认证配置方式](#2. 两种认证配置方式)
      • [3. 基础使用](#3. 基础使用)
    • [二、VSCode 配置 OpenAI Codex(两种方案)](#二、VSCode 配置 OpenAI Codex(两种方案))
      • [方案1:OpenAI 官方 Codex 插件(推荐,需 Copilot Pro+)](#方案1:OpenAI 官方 Codex 插件(推荐,需 Copilot Pro+))
        • [1. 安装](#1. 安装)
        • [2. 登录授权](#2. 登录授权)
        • [3. 内置 AI 代理切换(VSCode 原生 Chat)](#3. 内置 AI 代理切换(VSCode 原生 Chat))
      • [方案2:第三方通用插件(CodeGPT / Cline,自备 OpenAI API Key)](#方案2:第三方通用插件(CodeGPT / Cline,自备 OpenAI API Key))
    • [三、Claude + Codex 共存使用方法](#三、Claude + Codex 共存使用方法)
    • 四、常见报错与排错
      • [Claude Code 问题](#Claude Code 问题)
      • [Codex 问题](#Codex 问题)

前置说明

  1. Claude :Anthropic 官方插件 Claude Code,原生支持项目级代码编辑、多文件修改、长上下文
  2. Codex :OpenAI 官方 Codex - OpenAI's coding agent,依赖 GitHub Copilot Pro+ 订阅,也可第三方插件通过 OpenAI API Key 接入
  3. 版本要求:VSCode ≥ 1.98.0,低于该版本先升级编辑器

VSCode下载安装教程:https://blog.csdn.net/2501_93482674/article/details/162992812

一、VSCode 配置 Claude(官方 Claude Code 插件)

1. 安装插件

  1. 快捷键打开扩展面板:
    • Windows/Linux:Ctrl+Shift+X
    • Mac:Cmd+Shift+X
  2. 搜索 Claude Code ,发布者为 Anthropic(官方,千万不要装第三方同名插件)
  3. 点击安装,安装完成后执行重载窗口:Ctrl+Shift+P → 输入 Developer: Reload Window

2. 两种认证配置方式

方式A:网页账号登录(海外直连,无中转)
  1. 点击右上角 ✦ Spark 图标打开 Claude 面板
  2. 选择 Sign in with Anthropic,跳转浏览器登录 Anthropic 账号
  3. 授权后自动绑定,无需手动填 Key
方式B:API Key + 中转地址(国内用户推荐)
  1. 打开设置 JSON:Ctrl+Shift+PPreferences: Open User Settings (JSON)
  2. 粘贴以下配置,替换 sk-xxx 和中转 BaseURL:
json 复制代码
"claudeCode.environmentVariables": [
    {
        "name": "ANTHROPIC_API_KEY",
        "value": "sk-你的中转密钥"
    },
    {
        "name": "ANTHROPIC_BASE_URL",
        "value": "https://中转服务商地址/v1"
    },
    {
        "name": "ANTHROPIC_MODEL",
        "value": "claude-3.5-sonnet"
    }
]
  1. 保存文件,完全关闭 VSCode 重新打开即可生效

3. 基础使用

  1. 打开聊天面板:右上角星星图标 / 快捷键 Ctrl+Alt+C
  2. 上下文用法:输入 @ 引用项目文件/选中代码,支持多文件批量修改
  3. 两种模式:
    • Chat:仅问答,不修改文件
    • Agent:自动读写文件、执行终端命令,修改前预览 Diff

二、VSCode 配置 OpenAI Codex(两种方案)

方案1:OpenAI 官方 Codex 插件(推荐,需 Copilot Pro+)

1. 安装
  1. 扩展面板搜索 Codex - OpenAI's coding agent(发布者 OpenAI)
  2. 安装后重载窗口,左侧出现 Codex 图标
2. 登录授权
  1. 点击侧边 Codex 图标 → Sign in with ChatGPT/GitHub Copilot
  2. 浏览器跳转 GitHub 授权,绑定 Copilot Pro+ 订阅
  3. 首次打开项目必须选择 Trust Workspace,否则无文件读写权限
3. 内置 AI 代理切换(VSCode 原生 Chat)
  1. 打开 VSCode AI 聊天:Ctrl+Alt+I
  2. 点击顶部 New Chat,下拉选择 Codex 会话类型,直接调用 Codex 编码代理

方案2:第三方通用插件(CodeGPT / Cline,自备 OpenAI API Key)

适合无 Copilot 订阅、自有 OpenAI API Key/中转接口

  1. 安装插件:搜索 CodeGPTCline
  2. 配置参数(以 CodeGPT 为例):
    • Provider:OpenAI
    • API Key:sk-xxx
    • Base URL:官方 https://api.openai.com/v1 / 中转地址
    • Model:gpt-4o-codex / gpt-4(Codex 底层编码模型)
  3. 保存设置,侧边栏打开 AI 面板即可生成/重构代码

三、Claude + Codex 共存使用方法

  1. 两个插件独立运行,互不冲突,分别有各自侧边栏入口
  2. VSCode 原生 AI Chat 面板可一键切换代理:
    • Local:本地 Claude / Codex 插件会话
    • Cloud:云端官方代理
  3. 分工建议:
    • Claude:大型项目重构、多文件批量修改、长文档阅读
    • Codex:算法编写、代码补全、单元测试、前端组件生成

四、常见报错与排错

Claude Code 问题

  1. 插件图标不显示:执行 Reload Window 或重装插件
  2. API 401/认证失败:检查 Key、中转 BaseURL 是否带 /v1 后缀
  3. 无法读取项目文件:设置中开启 claudeCode.allowWorkspaceAccess

Codex 问题

  1. 登录无权限:必须开通 GitHub Copilot Pro+
  2. API 调用超时:使用中转服务替换官方地址
  3. Agent 无法修改文件:右键文件夹 → Trust Workspace
相关推荐
一木 之林2 小时前
手搓家庭服务器:二手装机、Docker部署、端口映射与frp内网穿透
服务器·人工智能·git·编辑器
xieliyu.4 小时前
前端基础:常见CSS选择器用法
前端·css·笔记·vscode
别动我齐刘海19 小时前
ROS2 Jazzy + C++ 实战路线——基础学习2
c++·人工智能·vscode·python·学习·机器学习·机器人
东木月1 天前
PyCharm 集成 Claude Code 插件:安装、配置与使用指南
python·pycharm·编辑器
boke112百科1 天前
WordPress经典编辑器【插入至文章】按钮怎么调到右上角?
编辑器·wordpress·wordpress教程·经典编辑器
AI编码进化论1 天前
云IDE介绍:环境模板化、Agent上云,云IDE该怎么选
开发语言·ide·人工智能·团队开发·ai编程
郝学胜-神的一滴1 天前
C++20模板元编程 05:吃透变参模板,解锁编译期万能参数能力
服务器·开发语言·c++·windows·vscode
我要见SA姐12 天前
DeepSeek Harness 开源贡献手记:从 Issue 到 Merge 的完整旅程
ide·vscode·python·自动化·编辑器
ndsc_d2 天前
VS Code 接入 Pixso MCP 实战:配置、安装 AI Skill 与设计稿转代码
vscode·ai·设计·pixso·skill·mcp·设计稿转代码
千里马学框架2 天前
Android 17 成功编译运行差异部分更新
vscode·开发工具·车载开发·aosp源码·安卓17·aosp17·编译源码