如何在 VS Code 和 GitHub Copilot 中集成 Codex (2026)

如何将 Codex 与 VS Code 及 GitHub Copilot 集成 (2026)

OpenAI 的 Codex CLI 和 GitHub Copilot 是 2026 年最强大的两款 AI 编程工具。Copilot 直接在编辑器中处理行内补全，而 Codex 则作为一个基于终端的编程代理，能够自主地读取、编写和重构整个文件。将两者结合使用，您可以同时获得两者的优势：编辑器中的实时建议以及终端中的自主任务执行。

本指南将带您完成在 VS Code 中设置这两款工具、配置它们协作运行，并介绍最大化提升生产力的实用工作流。

环境准备

在开始之前，请确保您具备以下条件：

要求	最低版本	备注
VS Code	1.96+	建议使用最新的稳定版
Node.js	18.0+	Codex CLI 运行必需
GitHub Copilot 订阅	已激活	个人版或企业版均可
OpenAI API 密钥	有效密钥	用于访问 Codex CLI
Git	2.40+	Codex 需要在 git 仓库中运行

第 1 步：在 VS Code 中安装 GitHub Copilot

如果您尚未安装 Copilot：

打开 VS Code
进入扩展面板 (Ctrl+Shift+X / Cmd+Shift+X)
搜索 "GitHub Copilot"
安装 GitHub Copilot 和 GitHub Copilot Chat
根据提示使用您的 GitHub 账号登录

通过打开任意代码文件进行验证。在键入时，您应该能看到灰色的提示文本。

配置 Copilot 设置

打开您的 VS Code 设置 (Ctrl+, / Cmd+,) 并调整以下关键设置：

{
  "github.copilot.enable": {
    "*": true,
    "yaml": true,
    "markdown": true,
    "plaintext": false
  },
  "github.copilot.advanced": {
    "length": 500,
    "temperature": 0.1
  }
}

设置较低的温度值 (0.1) 会产生更具确定性的建议，这对生产代码更好。

第 2 步：安装 OpenAI Codex CLI

Codex CLI 是一个可以自主执行编程任务的终端代理。进行全局安装：

npm install -g @openai/codex

将您的 OpenAI API 密钥设置为环境变量。将其添加到您的 shell 配置文件中（~/.bashrc、~/.zshrc 或等效文件）：

export OPENAI_API_KEY="sk-proj-your-api-key-here"

验证安装：

codex --version

配置 Codex CLI

Codex CLI 使用位于 ~/.codex/config.yaml 的配置文件。使用推荐设置创建它：

# ~/.codex/config.yaml
model: o4-mini
approval_mode: suggest

三种审批模式控制 Codex 的自主程度：

模式	行为	适用场景
`suggest`	显示建议的更改，需要手动批准	学习、代码审查
`auto-edit`	自动编辑文件，但在运行命令前询问	日常开发
`full-auto`	完全自主执行	可信的沙盒任务

在熟悉 Codex 的操作方式之前，建议先从 suggest 模式开始。

第 3 步：在 VS Code 集成终端中使用 Codex

最简单的集成方式是直接在 VS Code 集成终端中运行 Codex：

打开 VS Code 终端 (Ctrl+ / Cmd+)
进入您的项目目录
运行带有任务描述的 Codex 命令：

codex "Add input validation to the signup form in src/components/SignupForm.tsx"

Codex 将分析您的项目结构，读取相关文件并提出更改建议。在 suggest 模式下，它会在应用任何更改前向您显示差异 (diff)。

实用示例：添加错误处理

假设您有一个基础的 API 调用：

// src/api/users.ts
export async function fetchUsers() {
  const response = await fetch('/api/users');
  const data = await response.json();
  return data;
}

运行 Codex：

codex "Add proper error handling, retry logic, and TypeScript types to src/api/users.ts"

Codex 将提议类似如下的代码：

// src/api/users.ts
interface User {
  id: string;
  name: string;
  email: string;
}

interface FetchUsersResponse {
  users: User[];
  total: number;
}

export async function fetchUsers(retries = 3): Promise<FetchUsersResponse> {
  for (let attempt = 1; attempt <= retries; attempt++) {
    try {
      const response = await fetch('/api/users');

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const data: FetchUsersResponse = await response.json();
      return data;
    } catch (error) {
      if (attempt === retries) {
        throw new Error(
          `Failed to fetch users after ${retries} attempts: ${error instanceof Error ? error.message : 'Unknown error'}`
        );
      }
      await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
    }
  }
  throw new Error('Unreachable');
}

第 4 步：创建组合工作流

最高效的工作流是将 Copilot 用于行内编码，而将 Codex 用于更大规模的重构或脚手架任务。以下是推荐的工作流：

针对新功能

使用 Codex 构建功能结构脚手架：

codex "Create a new API route at src/app/api/webhooks/stripe/route.ts that handles Stripe checkout.session.completed events"

使用 Copilot 在编辑生成的代码文件时填充实现细节。

使用 Codex 添加测试：

codex "Write unit tests for the Stripe webhook handler in src/app/api/webhooks/stripe/route.ts"

针对 Bug 修复

使用 Copilot Chat 分析 Bug：
- 选中问题代码
- 按下 Ctrl+I / Cmd+I 打开行内聊天
- 提问：“为什么当输入数组为空时，这个函数可能会返回 undefined？”

使用 Codex 在相关文件中应用修复：

codex "Fix the null reference error in the user dashboard. The issue is that fetchUserProfile can return undefined but the Dashboard component doesn't handle that case."

第 5 步：配置 Codex 项目指令

在项目根目录创建一个 AGENTS.md 文件，为 Codex 提供特定的项目上下文：

# 项目指令

## 技术栈
- 使用 App Router 的 Next.js 15
- TypeScript 严格模式
- 使用 Tailwind CSS 进行样式设计
- 使用 Drizzle ORM 和 PostgreSQL
- 使用 tRPC 处理 API 路由

## 规范
- 使用具名导出，不使用默认导出
- 优先使用服务端组件；仅在必要时添加 "use client"
- 所有 API 响应均使用 src/lib/types.ts 中的 Result<T> 类型
- 错误处理使用 src/lib/errors.ts 中的 AppError 类

## 测试
- 使用 Vitest 进行单元测试
- 将测试文件置于源文件旁，命名为 *.test.ts
- 使用 MSW 进行 API 模拟 (Mocking)

Codex 会自动读取此文件并遵循指定的规范。

Copilot vs Codex：何时使用哪一个？

任务	使用 Copilot	使用 Codex
编写单个函数	是	大材小用
行内代码补全	是	否
多文件重构	否	是
构建新功能脚手架	部分支持	是
为现有代码编写测试	部分支持	是
带上下文的调试	Chat 表现出色	适合大型代码库
代码审查建议	Copilot Chat	是
跨文件的重复性更改	否	是 (使用 full-auto 模式)

常见问题排查

Copilot 建议未出现

# 检查 VS Code 中的 Copilot 状态
# 查看底部状态栏中的 Copilot 图标
# 如果显示警告，点击查看详情

# 常见修复方法：重新加载窗口
# 按下 Ctrl+Shift+P / Cmd+Shift+P > 输入 "Developer: Reload Window"

Codex CLI 无法读取文件

Codex 要求您的项目是一个 Git 仓库：

# 如果需要，初始化 git
git init
git add -A
git commit -m "Initial commit"

# 现在 Codex 就可以读取项目了
codex "Describe the project structure"

API 速率限制

如果您在使用 Codex 时达到 OpenAI 速率限制，可以配置模型：

# ~/.codex/config.yaml
model: o4-mini  # 消耗配额比 o3 少

成本考虑

工具	定价模式	大约成本
GitHub Copilot Individual	$10/月	固定
GitHub Copilot Business	$19/用户/月	固定
Codex CLI (o4-mini)	按 Token 付费	约 $0.50-2.00/任务
Codex CLI (o3)	按 Token 付费	约 $2.00-10.00/任务

对于大多数开发者来说，Copilot ($10/月) 加上运行在 o4-mini 上的 Codex (典型使用下 $15-30/月) 的组合提供了极佳的性价比。

结论

将 Codex CLI 与 VS Code 和 GitHub Copilot 集成，可以创建一个强大的 AI 辅助开发工作流。Copilot 处理时刻发生的代码建议，而 Codex 则解决更大规模的架构任务、重构和测试生成。关键在于发挥每个工具的长处，而不是强迫一个工具完成所有工作。

如果您正在构建需要 AI 驱动的多媒体生成（图像、视频、语音克隆或虚拟人）的应用程序，Hypereal AI 提供了您可以直接集成到代码库中的简单 API 端点。结合 Codex 和 Copilot 等工具，您可以在几分钟内（而不是几天）构建出完整的 AI 驱动功能。

如何将 Codex 与 VS Code 及 GitHub Copilot 集成 (2026)

本指南将带您完成在 VS Code 中设置这两款工具、配置它们协作运行，并介绍最大化提升生产力的实用工作流。

环境准备

在开始之前，请确保您具备以下条件：

要求	最低版本	备注
VS Code	1.96+	建议使用最新的稳定版
Node.js	18.0+	Codex CLI 运行必需
GitHub Copilot 订阅	已激活	个人版或企业版均可
OpenAI API 密钥	有效密钥	用于访问 Codex CLI
Git	2.40+	Codex 需要在 git 仓库中运行

第 1 步：在 VS Code 中安装 GitHub Copilot

如果您尚未安装 Copilot：

打开 VS Code
进入扩展面板 (Ctrl+Shift+X / Cmd+Shift+X)
搜索 "GitHub Copilot"
安装 GitHub Copilot 和 GitHub Copilot Chat
根据提示使用您的 GitHub 账号登录

通过打开任意代码文件进行验证。在键入时，您应该能看到灰色的提示文本。

配置 Copilot 设置

打开您的 VS Code 设置 (Ctrl+, / Cmd+,) 并调整以下关键设置：

{
  "github.copilot.enable": {
    "*": true,
    "yaml": true,
    "markdown": true,
    "plaintext": false
  },
  "github.copilot.advanced": {
    "length": 500,
    "temperature": 0.1
  }
}

设置较低的温度值 (0.1) 会产生更具确定性的建议，这对生产代码更好。

第 2 步：安装 OpenAI Codex CLI

Codex CLI 是一个可以自主执行编程任务的终端代理。进行全局安装：

npm install -g @openai/codex

将您的 OpenAI API 密钥设置为环境变量。将其添加到您的 shell 配置文件中（~/.bashrc、~/.zshrc 或等效文件）：

export OPENAI_API_KEY="sk-proj-your-api-key-here"

验证安装：

codex --version

配置 Codex CLI

Codex CLI 使用位于 ~/.codex/config.yaml 的配置文件。使用推荐设置创建它：

# ~/.codex/config.yaml
model: o4-mini
approval_mode: suggest

三种审批模式控制 Codex 的自主程度：

模式	行为	适用场景
`suggest`	显示建议的更改，需要手动批准	学习、代码审查
`auto-edit`	自动编辑文件，但在运行命令前询问	日常开发
`full-auto`	完全自主执行	可信的沙盒任务

在熟悉 Codex 的操作方式之前，建议先从 suggest 模式开始。

第 3 步：在 VS Code 集成终端中使用 Codex

最简单的集成方式是直接在 VS Code 集成终端中运行 Codex：

打开 VS Code 终端 (Ctrl+ / Cmd+)
进入您的项目目录
运行带有任务描述的 Codex 命令：

codex "Add input validation to the signup form in src/components/SignupForm.tsx"

Codex 将分析您的项目结构，读取相关文件并提出更改建议。在 suggest 模式下，它会在应用任何更改前向您显示差异 (diff)。

实用示例：添加错误处理

假设您有一个基础的 API 调用：

// src/api/users.ts
export async function fetchUsers() {
  const response = await fetch('/api/users');
  const data = await response.json();
  return data;
}

运行 Codex：

codex "Add proper error handling, retry logic, and TypeScript types to src/api/users.ts"

Codex 将提议类似如下的代码：

// src/api/users.ts
interface User {
  id: string;
  name: string;
  email: string;
}

interface FetchUsersResponse {
  users: User[];
  total: number;
}

export async function fetchUsers(retries = 3): Promise<FetchUsersResponse> {
  for (let attempt = 1; attempt <= retries; attempt++) {
    try {
      const response = await fetch('/api/users');

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const data: FetchUsersResponse = await response.json();
      return data;
    } catch (error) {
      if (attempt === retries) {
        throw new Error(
          `Failed to fetch users after ${retries} attempts: ${error instanceof Error ? error.message : 'Unknown error'}`
        );
      }
      await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
    }
  }
  throw new Error('Unreachable');
}

第 4 步：创建组合工作流

最高效的工作流是将 Copilot 用于行内编码，而将 Codex 用于更大规模的重构或脚手架任务。以下是推荐的工作流：

针对新功能

使用 Codex 构建功能结构脚手架：

codex "Create a new API route at src/app/api/webhooks/stripe/route.ts that handles Stripe checkout.session.completed events"

使用 Copilot 在编辑生成的代码文件时填充实现细节。

使用 Codex 添加测试：

codex "Write unit tests for the Stripe webhook handler in src/app/api/webhooks/stripe/route.ts"

针对 Bug 修复

使用 Copilot Chat 分析 Bug：
- 选中问题代码
- 按下 Ctrl+I / Cmd+I 打开行内聊天
- 提问：“为什么当输入数组为空时，这个函数可能会返回 undefined？”

使用 Codex 在相关文件中应用修复：

codex "Fix the null reference error in the user dashboard. The issue is that fetchUserProfile can return undefined but the Dashboard component doesn't handle that case."

第 5 步：配置 Codex 项目指令

在项目根目录创建一个 AGENTS.md 文件，为 Codex 提供特定的项目上下文：

# 项目指令

## 技术栈
- 使用 App Router 的 Next.js 15
- TypeScript 严格模式
- 使用 Tailwind CSS 进行样式设计
- 使用 Drizzle ORM 和 PostgreSQL
- 使用 tRPC 处理 API 路由

## 规范
- 使用具名导出，不使用默认导出
- 优先使用服务端组件；仅在必要时添加 "use client"
- 所有 API 响应均使用 src/lib/types.ts 中的 Result<T> 类型
- 错误处理使用 src/lib/errors.ts 中的 AppError 类

## 测试
- 使用 Vitest 进行单元测试
- 将测试文件置于源文件旁，命名为 *.test.ts
- 使用 MSW 进行 API 模拟 (Mocking)

Codex 会自动读取此文件并遵循指定的规范。

Copilot vs Codex：何时使用哪一个？

任务	使用 Copilot	使用 Codex
编写单个函数	是	大材小用
行内代码补全	是	否
多文件重构	否	是
构建新功能脚手架	部分支持	是
为现有代码编写测试	部分支持	是
带上下文的调试	Chat 表现出色	适合大型代码库
代码审查建议	Copilot Chat	是
跨文件的重复性更改	否	是 (使用 full-auto 模式)

常见问题排查

Copilot 建议未出现

# 检查 VS Code 中的 Copilot 状态
# 查看底部状态栏中的 Copilot 图标
# 如果显示警告，点击查看详情

# 常见修复方法：重新加载窗口
# 按下 Ctrl+Shift+P / Cmd+Shift+P > 输入 "Developer: Reload Window"

Codex CLI 无法读取文件

Codex 要求您的项目是一个 Git 仓库：

# 如果需要，初始化 git
git init
git add -A
git commit -m "Initial commit"

# 现在 Codex 就可以读取项目了
codex "Describe the project structure"

API 速率限制

如果您在使用 Codex 时达到 OpenAI 速率限制，可以配置模型：

# ~/.codex/config.yaml
model: o4-mini  # 消耗配额比 o3 少

成本考虑

工具	定价模式	大约成本
GitHub Copilot Individual	$10/月	固定
GitHub Copilot Business	$19/用户/月	固定
Codex CLI (o4-mini)	按 Token 付费	约 $0.50-2.00/任务
Codex CLI (o3)	按 Token 付费	约 $2.00-10.00/任务

对于大多数开发者来说，Copilot ($10/月) 加上运行在 o4-mini 上的 Codex (典型使用下 $15-30/月) 的组合提供了极佳的性价比。

开始使用 Hypereal 构建

如何将 Codex 与 VS Code 及 GitHub Copilot 集成 (2026)

环境准备

第 1 步：在 VS Code 中安装 GitHub Copilot

配置 Copilot 设置

第 2 步：安装 OpenAI Codex CLI

配置 Codex CLI

第 3 步：在 VS Code 集成终端中使用 Codex

实用示例：添加错误处理

第 4 步：创建组合工作流

针对新功能

针对 Bug 修复

第 5 步：配置 Codex 项目指令

Copilot vs Codex：何时使用哪一个？

常见问题排查

Copilot 建议未出现

Codex CLI 无法读取文件

API 速率限制

成本考虑

结论

相关文章

如何从零开始构建 MCP Server (2026)

Claude Code 入门指南与最佳实践 (2026)

如何使用 Claude Code 编写更好的代码 (2026)

立即开始构建

开始使用 Hypereal 构建

如何将 Codex 与 VS Code 及 GitHub Copilot 集成 (2026)

环境准备

第 1 步：在 VS Code 中安装 GitHub Copilot

配置 Copilot 设置

第 2 步：安装 OpenAI Codex CLI

配置 Codex CLI

第 3 步：在 VS Code 集成终端中使用 Codex

实用示例：添加错误处理

第 4 步：创建组合工作流

针对新功能

针对 Bug 修复

第 5 步：配置 Codex 项目指令

Copilot vs Codex：何时使用哪一个？

常见问题排查

Copilot 建议未出现

Codex CLI 无法读取文件

API 速率限制

成本考虑

结论

相关文章

如何从零开始构建 MCP Server (2026)

Claude Code 入门指南与最佳实践 (2026)

如何使用 Claude Code 编写更好的代码 (2026)

立即开始构建