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
相关推荐
●VON9 小时前
鸿蒙 PC Markdown 编辑器自动化测试:Playwright、ohosTest 与构建门禁
华为·编辑器·harmonyos·鸿蒙
云泽80811 小时前
VSCode入门指南:从认识、安装到语言插件配置全解析
ide·vscode·编辑器
●VON12 小时前
鸿蒙 PC Markdown 编辑器质量流水线:Web 构建、回归与 Release 门禁
前端·华为·编辑器·harmonyos·鸿蒙
acheding12 小时前
File System Access API 实战:让网页真正读写本地文件
前端·javascript·vue.js·编辑器·markdown
acheding12 小时前
把 CodeMirror 6 调教成 Markdown 编辑器:扩展、装饰与门面
javascript·vue.js·编辑器·markdown
●VON12 小时前
鸿蒙 PC Markdown 编辑器文件系统:Core File Kit 与安全保存
安全·华为·编辑器·harmonyos·鸿蒙
m0_6174939412 小时前
PyCharm 新手避坑指南:一文解决“项目列表消失”与“模块导入报错”两大玄学问题
ide·python·pycharm
●VON13 小时前
鸿蒙 PC Markdown 编辑器性能工程:中文输入与 10MiB 文档
华为·架构·编辑器·harmonyos·鸿蒙
爱吃提升13 小时前
VSCode AI编程万能提示词模板(适配Copilot/Codeium/Continue/豆包AI)
vscode·copilot·ai编程