Codex 与 VS Code/Terminal 配合实战指南：让 AI 编程助手和编辑器高效协同

Codex CLI 是 OpenAI 开源的终端 AI 编程助手，它运行在命令行中，通过自然语言对话帮助你完成编码任务。而 VS Code 是目前最流行的代码编辑器，拥有强大的编辑、调试和扩展能力。很多开发者在使用 Codex 时会面临一个问题：如何在命令行工具和图形化编辑器之间高效切换？本文将深入探讨 Codex 与 VS Code/Terminal 的协同工作方式，帮你打造一套流畅的 AI 辅助开发工作流。

环境搭建：在 VS Code 中集成 Codex

首先确保你已经安装了 Codex CLI。如果还没有安装，可以通过以下方式快速完成：

# macOS / Linux
curl -fsSL https://github.com/openai/codex/raw/main/install.sh | bash

# Windows（在 Git Bash 或 WSL 中执行）
curl -fsSL https://github.com/openai/codex/raw/main/install.sh | bash

# 或者通过 npm 安装
npm install -g @openai/codex

安装完成后，执行认证：

codex login

Codex 会在浏览器中打开 OpenAI 的认证页面。完成登录后，你的 API 密钥会被自动保存到本地配置中。

接下来，打开 VS Code，使用快捷键 Ctrl + 打开集成终端。在 VS Code 的集成终端中，你可以直接运行 codex` 命令进入交互模式：

codex

成功进入后，你会看到 Codex 的 TUI（Terminal User Interface）界面，此时你就可以在 VS Code 的终端面板中与 Codex 对话了。

集成终端工作流：一套界面，两种工具

VS Code 的集成终端的最大优势在于——你不需要切换窗口就能同时使用编辑器和 AI 助手。以下是几种高效的搭配方式。

方式一：终端面板 + 编辑器双栏布局

将 VS Code 的终端面板拖拽到右侧，形成左侧代码、右侧终端的双栏布局。这样你可以在终端中向 Codex 提问，同时看到它在左侧项目文件中做出的修改。

实现步骤：

打开 VS Code，展开终端面板

右键点击终端标签 → "将面板移动到右侧"

调整面板宽度到合适位置（建议占 30%～40%）

在终端中启动 codex

这种布局非常适合实时观察 Codex 的操作——它修改代码时，左侧编辑器会自动刷新变更，你可以随时查看 diff。

方式二：分屏终端 + 编辑器并排

当你有多个任务并行时，可以创建多个终端实例：

点击终端面板右上角的 + 创建新的终端标签

在终端 1 中运行 codex 处理当前任务

在终端 2 中运行 git diff、npm test 等命令，无需打断 Codex 会话

# 终端1：Codex 会话
codex

# 终端2（新建终端标签）：运行测试/版本控制
npm run test
git diff --stat

方式三：非交互模式与 VS Code tasks 集成

Codex 的 exec 命令允许在非交互模式下执行任务，你可以将其集成到 VS Code 的 tasks 系统中。在项目根目录的 .vscode/tasks.json 中添加：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Codex: 代码审查",
      "type": "shell",
      "command": "codex",
      "args": [
        "exec",
        "审查当前修改的代码，指出潜在问题并提供改进建议"
      ],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "problemMatcher": []
    },
    {
      "label": "Codex: 生成单元测试",
      "type": "shell",
      "command": "codex",
      "args": [
        "exec",
        "为 ${file} 生成完整的单元测试文件"
      ],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "problemMatcher": []
    },
    {
      "label": "Codex: 修复 ESLint 错误",
      "type": "shell",
      "command": "codex",
      "args": [
        "exec",
        "修复当前项目的所有 ESLint 报错"
      ],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "problemMatcher": []
    }
  ]
}

配置完成后，按 Ctrl+Shift+P 打开命令面板，输入 "Run Task" 就能选择对应的 Codex 任务。这样你可以把常用的 Codex 操作变成一键执行的快捷键。

协同编辑策略：各取所长

Codex 和 VS Code 各有擅长领域，合理分工能让开发效率成倍提升。

Codex 擅长的任务

跨文件重构：当你需要同时修改多个文件时，告诉 Codex 需求，它会自动找出所有相关文件并逐一修改
样板代码生成：创建新模块、生成 CRUD 代码、配置数据库连接等重复性工作
项目级上下文理解：Codex 通过 AGENTS.md 理解整个项目的架构和约定，能给出符合项目风格的建议

示例——让 Codex 帮你初始化一个新功能模块：

# 在 Codex 会话中
帮我创建一个用户管理模块，包含以下文件：
- src/models/User.ts（TypeORM 实体，包含 id、name、email、createdAt）
- src/services/UserService.ts（CRUD 操作）
- src/controllers/UserController.ts（REST API 控制器）
- 参考项目中已有的 Post 模块的代码风格

VS Code 擅长的任务

精细化代码编辑：多光标编辑、代码格式化、Emmet 缩写展开等
可视化调试：断点调试、变量监视、调用堆栈查看
Git 图形化操作：可视化 diff 对比、冲突解决、历史浏览
代码导航：跳转到定义、查找引用、符号搜索

任务委托与审查：信任但要验证

Codex 可以自动执行代码修改，但你仍然需要审核它产生的变更。VS Code 的 Git 集成让这个审查过程非常高效。

工作流示例

# 步骤1：让 Codex 完成一个功能开发
# 在 Codex 对话中：
# "在 src/utils/helpers.ts 中添加一个深拷贝函数，并编写对应的测试"

# 步骤2：Codex 完成任务后，在终端2中查看变更
git diff --stat

此时在 VS Code 的 Source Control 面板中，你可以看到所有被修改的文件：

点击文件名，VS Code 会打开并排对比视图（inline diff），绿色表示新增、红色表示删除
逐行审核 Codex 的修改是否符合预期
对于不满意的修改，可以直接在编辑器中修正

# 步骤3：审核通过后运行测试
npm test

# 步骤4：如果不满意，让 Codex 重新修改
# 在 Codex 会话中继续对话：
# "深拷贝函数对 Date 对象的处理有问题，需要保留原始 Date 对象而不是将其转为字符串"

使用 AGENTS.md 减少审查负担

在项目中使用 AGENTS.md 可以让 Codex 更好地理解你的代码规范，从而减少审查时的修改量：

# AGENTS.md

## 代码风格
- 使用 2 空格缩进
- 函数名使用驼峰命名（camelCase）
- TypeScript 严格模式，所有函数必须有返回类型标注

## 测试要求
- 所有工具函数必须编写单元测试
- 使用 Vitest 作为测试框架
- 测试文件放在 __tests__ 目录下，命名格式为 *.test.ts

## Git 提交规范
- 使用约定式提交（Conventional Commits）：feat/fix/refactor/docs
- 提交信息使用中文

有了 AGENTS.md 的约束，Codex 生成的代码会更贴近你的项目规范，后续的手动修整工作也会大幅减少。

多终端并行工作流

在实际开发中，你经常需要同时处理多个任务。以下是两种高效的并行工作方式：

场景一：Codex 处理后端 + VS Code 编辑前端

在终端标签 1 中启动 Codex，让它处理后端 API 的实现：

```text
帮我实现用户注册接口，包含邮箱验证和密码加密
```

在 VS Code 编辑器中同步编写前端页面代码

当 Codex 完成后端代码时，刷新前端页面测试接口联调

场景二：Codex 异步执行长任务

Codex 的 exec 命令支持后台执行，适合处理耗时的批量操作：

# 在 VS Code 终端中以后台模式运行
codex exec "扫描整个项目，将 console.log 替换为项目统一的 logger.debug" &

任务在后台运行时，你可以继续在 VS Code 中编辑其他文件。完成后 Codex 会输出变更摘要，你用 VS Code 的 Source Control 面板统一审查即可。

场景三：使用 Codex 辅助 Code Review

当你从团队成员的 PR 中拉取了代码，在 VS Code 中查看变更时，可以让 Codex 帮你做初步审查：

codex exec "审查当前所有未提交的改动，重点关注：1. 安全漏洞 2. 性能问题 3. 边界条件处理 4. 代码风格一致性。给出结构化的审查报告"

Codex 会输出一份详细的审查报告，你可以对照着在 VS Code 的 diff 视图中逐条验证。

实战案例：用 Codex + VS Code 完成一个完整功能

下面通过一个真实案例，演示 Codex 和 VS Code 配合的完整流程。假设我们要在一个 Express.js 项目中实现"文件上传 + 图片压缩"功能。

第 1 步：需求分析（Codex）

在 VS Code 集成终端中启动 Codex 并描述需求：

我在开发一个 Express.js + TypeScript 的项目，需要添加文件上传功能，要求：
1. 支持图片上传（jpg/png/webp）
2. 上传后自动压缩（使用 sharp 库）
3. 压缩后生成缩略图（200x200）
4. 将文件存储到本地 uploads 目录
5. 返回原始图和缩略图的访问 URL

请先帮我分析需要创建哪些文件，给出实现方案，等我确认后再开始写代码。

第 2 步：审核方案（VS Code）

Codex 会在终端中输出详细的实现方案。你在 VS Code 编辑器中打开项目，对照现有代码结构审核方案的合理性。如果需要调整，直接在对话中提出：

方案基本没问题，但有一个改动：不要创建单独的 File 实体，我们项目不需要数据库存储文件信息，只需要文件系统存储即可。请按照这个调整开始实现。

第 3 步：代码生成（Codex）

Codex 开始生成代码。它会：

创建 src/middleware/upload.ts（multer 配置）
创建 src/services/imageProcessor.ts（sharp 压缩逻辑）
修改 src/routes/index.ts（添加上传路由）
安装必要的依赖

在 VS Code 编辑器中，你会实时看到新文件的创建和旧文件的修改。

第 4 步：精细调整（VS Code）

Codex 生成完成后，你在 VS Code 编辑器中审查代码并修改：

调整 multer 的文件大小限制从默认值改为 10MB
修改错误处理逻辑，添加更详细的错误信息
在路由中添加请求日志中间件

第 5 步：生成测试（Codex）

帮我在 __tests__ 目录下为 imageProcessor.ts 编写单元测试，使用 Vitest。
需要 mock sharp 库，测试图片压缩和缩略图生成逻辑。

第 6 步：运行测试（VS Code 终端）

npx vitest run __tests__/imageProcessor.test.ts

第 7 步：修复问题（Codex + VS Code 联动）

如果测试失败，你可以在 VS Code 终端中看到失败的详细信息，然后把错误日志直接发给 Codex：

imageProcessor 的测试报错了：
TypeError: sharp is not a function

看起来是 mocking 的方式有问题，请修复测试文件。

Codex 修复后，在 VS Code 中查看 diff 确认变更是否正确，然后重新运行测试。重复此流程直到所有测试通过。

第 8 步：提交代码（VS Code + Codex）

# 在终端中查看所有变更
git diff --stat

# 用 Codex 帮你生成规范的提交信息
codex exec "根据当前所有变更，生成一个符合 conventional commits 格式的中文提交信息"

# Codex 输出：feat: 添加文件上传与图片压缩功能

git add .
git commit -m "feat: 添加文件上传与图片压缩功能"

高级技巧

在 VS Code 中为 Codex 设置快捷键

可以在 VS Code 的 keybindings.json 中为常用 Codex 命令绑定快捷键：

// 文件 → 首选项 → 键盘快捷方式 → 打开键盘快捷方式（JSON）
[
  {
    "key": "ctrl+shift+c",
    "command": "workbench.action.terminal.sendSequence",
    "args": {
      "text": "codex exec '审查当前代码并提供改进建议'\n"
    }
  }
]

使用 VS Code 的终端配置文件

在 .vscode/settings.json 中为 Codex 创建专用的终端配置文件：

{
  "terminal.integrated.profiles.windows": {
    "Codex Terminal": {
      "path": "bash",
      "args": ["-c", "codex"]
    }
  },
  "terminal.integrated.profiles.linux": {
    "Codex Terminal": {
      "path": "bash",
      "args": ["-c", "codex"]
    }
  }
}

创建后，你可以从终端下拉菜单中直接选择 "Codex Terminal" 快速启动 Codex 会话。

利用 Codex Sandbox 保护宿主环境

当你在 VS Code 中让 Codex 执行不确定的代码时，建议开启沙盒模式：

codex --sandbox

沙盒模式下，Codex 的所有文件操作都在一个隔离的临时目录中进行，不会影响你的项目文件。确认代码安全后，再手动将其合并到项目中。

总结

Codex CLI 和 VS Code 不是替代关系，而是互补关系。Codex 强在理解需求、跨文件生成和自动化执行，而 VS Code 强在精细化编辑、可视化调试和 Git 管理。将两者结合起来，你可以：

用 Codex 做"粗活"：生成样板代码、跨文件重构、批量操作
用 VS Code 做"细活"：优化代码细节、断点调试、图形化 diff 审查
用集成终端连接两者：在同一窗口内无缝切换，保持开发节奏

掌握 Codex 与 VS Code 的协同工作方式后，你获得的不是一个更强的 AI 助手或一个更好的编辑器，而是一套完整的 AI 增强开发环境——让 AI 真正融入你的日常编码流程，而不是一个需要你刻意去"使用"的外挂工具。

*本文介绍了 Codex CLI 与 VS Code/Terminal 的配合使用方式。关于 Codex 的更多功能（AGENTS.md 配置、MCP 集成、Hooks 系统等），请参考 Codex 系列的其他文章。*