Cabokit LogoCabokitAITutorial
入门
VS Code Codex Setup

如何在 VS Code 接入 Codex

从安装扩展、登录账号、打开 demo 项目,到第一次让 Codex Agent 阅读需求、输出计划并执行验证。适合第一次在 VS Code 中使用 Codex、AI Pair Programmer 或 LLM integration 工作流的用户,目标是先跑通一个可控、安全、能复查的 AI 编程流程。

10 分钟更新于 Cabokit

版本、账号与入口说明

本文按 2026-04-29 的 VS Code、OpenAI / ChatGPT 登录入口和 Codex 扩展使用流程整理。Codex 扩展名称、按钮文案、登录入口和 Agent 面板可能会随产品更新变化,实际界面以你当前 VS Code 和账号看到的版本为准。

VS Code 接入 Codex 通常需要可登录的 OpenAI 或 ChatGPT 账号。能否看到 Codex、Agent 或相关模型能力,还会受账号资格、订阅方案、组织策略、地区和产品开放状态影响。

如果扩展市场、登录入口或 Codex 面板和截图不一致,先确认 VS Code 已更新、扩展来自官方市场、账号已完成登录,再查看 OpenAI 官方文档或扩展说明。

不要从第三方压缩包、镜像站或来源不明的安装包安装所谓 Codex 扩展。需要登录账号的开发工具,应优先使用 VS Code 官方扩展市场和 OpenAI 官方入口。

什么是 Codex?它能做什么?

你可以把 Codex 理解成一个能接入 VS Code 的 AI 编程 Agent:它不是只回答问题的聊天窗口,而是可以结合当前项目上下文,帮你规划任务、修改文件、解释 diff,并给出验证步骤。

一句话理解

Codex 是 OpenAI 面向软件开发场景的 AI 编程能力。在 VS Code 中接入后,它可以在你授权的范围内阅读项目、理解需求、提出计划、生成或修改代码,并把改动结果交给你审查。

它主要能做什么

  • 阅读项目目录和关键文件
  • 解释代码、错误和需求背景
  • 先生成执行计划再修改代码
  • 创建或调整页面、组件和配置
  • 生成 diff 摘要和验证步骤
  • 辅助写测试、修 bug 和做小范围重构

这篇教程适合谁

适合第一次在 VS Code 中安装 Codex 扩展,并想完整跑通登录、提问和审查流程的用户。
适合用空 demo 项目练习 Codex Agent 工作流,而不是一开始就让 AI 修改生产仓库的用户。
如果你只是想申请 OpenAI API Key 或在服务端调用模型,应优先查看 API Key 配置教程,而不是把 API Key 填进 VS Code 扩展。

准备工作

安装最新版 VS Code官网
准备可登录的 OpenAI 或 ChatGPT 账号官网
创建一个空 demo 文件夹

How To

操作步骤

按顺序完成下面 5 个步骤,先确认入口和账号,再进行第一次安全可控的操作。

Step 01

安装 Codex 扩展

先打开 VS Code,进入左侧 Extensions 扩展面板,在搜索框输入 Codex。找到 Codex - OpenAI's coding agent 这类官方入口后再点击 Install,不要安装名称相似但来源不清楚的扩展。

  • 打开 VS Code
  • 进入左侧 Extensions 扩展面板
  • 搜索 Codex
  • 确认扩展名称和发布方
  • 点击 Install 并等待安装完成

Step 02

登录 OpenAI 或 ChatGPT 账号

安装完成后,打开 VS Code 里的 Codex 或 ChatGPT 入口,按提示在浏览器里完成 OpenAI 或 ChatGPT 授权。登录完成后回到 VS Code,确认右侧 Codex 面板已经识别当前账号。

  • 点击 VS Code 中的 Codex 或 ChatGPT 登录入口
  • 在浏览器中完成账号授权
  • 回到 VS Code
  • 确认 Codex 面板显示已登录
  • 企业账号先确认组织策略允许使用

Step 03

打开新建 demo 项目

第一次使用建议创建一个空 demo 文件夹,再用 VS Code 打开它。这样即使 Codex 生成或修改文件,也不会影响真实项目。打开后确认左侧是项目目录,中间是编辑区,右侧可以打开 Codex Agent 面板。

  • 创建一个空 demo 文件夹
  • 用 VS Code 打开该文件夹
  • 确认左侧能看到文件目录
  • 确认编辑区可以正常打开文件
  • 确认 Codex Agent 面板可用

Step 04

第一次跟 Codex Agent 对话

因为这是刚创建的空 demo 项目,第一次不要让 Codex 分析不存在的代码,也不要直接要求它大范围生成项目。更稳妥的方式是先说明目标,让 Codex 输出最小文件结构、页面模块和执行计划。

  • 打开右侧 Codex Agent 面板
  • 说明这是空 demo 项目
  • 先让 Codex 输出计划
  • 要求列出准备创建或修改的文件
  • 暂时不要授权大范围自动执行

第一次提问模板

这是一个刚创建的空 demo 项目。我想做一个 AI 教程页面,请先帮我规划最小文件结构、页面模块和实现步骤,不要立刻修改代码。

请基于上面的计划,先列出你准备创建或修改的文件,以及每个文件的用途。

如果要开始执行,请先从最小可运行页面开始,并告诉我完成后应该如何在浏览器里验证。

Step 05

先看计划,再允许修改

当你准备让 Codex 修改代码时,先要求它说明计划、影响文件和验证方式。确认范围合理后再允许执行。执行完成后检查 diff,必要时运行项目、测试或手动验证页面结果。

  • 先看计划和影响文件
  • 确认修改范围没有超出需求
  • 执行后检查 diff
  • 运行测试或手动验证
  • 不满意时要求 Codex 解释并小步修正

完成后你应该看到什么

如果下面几项都能完成,说明 VS Code 接入 Codex 的第一轮流程已经跑通,可以再逐步迁移到真实项目。

  • VS Code 能正常打开目标 demo 文件夹。
  • Codex 扩展已经安装,并能打开 Codex 或 Agent 面板。
  • OpenAI 或 ChatGPT 账号已经登录,面板可以正常提问。
  • Codex 能先输出计划、影响文件和验证方式,而不是直接大范围修改。
  • 执行后能看到新增文件、diff 或结果说明,并能通过运行项目或手动检查验证。

安全边界

第一次使用 Codex 时,不建议直接打开生产仓库或公司核心代码库。先用 demo 项目确认登录、提问、计划、执行、diff 审查和验证流程都能掌控,再逐步迁移到真实项目。

不要把 API Key、访问令牌、数据库连接串、客户数据、支付信息或内部文档直接贴给 Codex。涉及企业项目时,先确认组织策略、代码权限和数据边界。

让 Codex 修改代码前,要求它先输出计划、影响文件和验证方式;执行后重点检查 diff 是否超范围、是否引入安全风险、是否缺少测试或回滚方案。

下一步可以看什么

常见问题与排错

VS Code 接入 Codex 需要先创建项目吗?

不一定。但新手第一次使用时,建议先创建一个空 demo 文件夹,这样可以安全练习登录、提问、执行和 diff 审查流程。

Codex 扩展应该搜索哪个名称?

在 VS Code Extensions 面板搜索 Codex,并优先选择官方来源的 Codex 或 OpenAI coding agent 相关扩展。名称、入口和发布信息可能随版本变化,安装前要确认发布方。

第一次跟 Codex 对话应该问什么?

建议先说明这是一个空 demo 项目,让 Codex 规划最小文件结构、页面模块和实现步骤,不要一开始就生成大量代码。

VS Code 中看不到 Codex 面板怎么办?

先确认扩展已经安装并启用、VS Code 已重启、账号已完成登录。如果仍看不到入口,检查扩展说明、命令面板和账号权限。

Codex 需要 OpenAI API Key 吗?

在 VS Code 扩展中使用 Codex 通常按产品登录流程走,不应该把 API Key 随意填到不明来源的扩展或页面里。只有你的应用代码需要直接调用 OpenAI API 时,才需要单独创建并安全配置 API Key

第一次使用可以直接打开生产项目吗?

不建议。先用 demo 项目跑通流程,再在真实项目中从只读提问、小范围修改和人工审查开始。

正文结束

相关教程