IDE 扩展入门

返回 Codex 教学总目录

读完能做到什么

IDE 是能编辑程式、浏览档案与执行工具的工作介面；扩充套件把 Codex 放在旁边，让选取内容能直接成为上下文。它不会因为你只选取十行，就保证代理只能修改十行。任务范围仍要在需求提示词写清楚，档案存取由权限控制。图中 01 是选取上下文，02 是指定修改，03 是比较与验收。

开始之前：安装官方扩充套件

Windows、macOS、Linux 都先开启已安装的 VS Code，在侧边 Extensions 搜寻 Codex，核对发行者 OpenAI 与识别码 openai.chatgpt，再按 Install。也可由文末官方 IDE 页前往安装入口。不要只靠相似图示辨识。完成后若提示重新载入视窗，先保存档案再操作；看到已安装只证明扩充套件存在，还要开启它并完成登入。

用侧边 Codex 图示开启；若图示没出现，开 View → Command Palette，搜寻 Codex: Open Codex Sidebar。Windows／Linux 的命令面板快捷键是 Ctrl＋Shift＋P，macOS 是 Command＋Shift＋P。依扩充套件画面登入，核对帐号和工作区。CLI 与扩充套件可能共用快取认证，登出前先确认对其他工作的影响。

Cursor、Windsurf 等相容编辑器也有官方列出的入口，但本篇以 VS Code 的可重现操作为主；Xcode 和 JetBrains 使用各自整合，不要将 VS Code 的安装识别码当成它们的设定步骤。Windows 的 VS Code 若开的是 WSL 视窗，先核对视窗环境与终端机路径，所需工具须在WSL 环境可用。

步骤一：打开故障练习副本

下载Small Steps 练习档，解压后把 broken 资料夹复制成 codex-ide-lab，保留 expected 作为独立参考。用 File → Open Folder 开启 codex-ide-lab，核对档案总管内有 index.html、style.css、app.js、core.mjs、core.test.mjs。信任提示只对你确认过来源的练习副本处理；不要把整个下载目录设成这次专案。

用 Terminal → New Terminal 开整合终端机。Windows 原生用 Get-Location，macOS／Linux 用 pwd，确认就在 codex-ide-lab。这个练习需要可执行的 Node.js，先查 node --version，再跑下列测试。预期三个测试群组中筛选那组失败、其余通过；这是刻意留下的错误，不要一开始就删掉失败测试或改预期值。

node --test core.test.mjs

步骤二：把选取范围带入 Codex

打开 core.mjs，选取 visibleTasks 整个函式，再用命令面板中「加入目前 Codex 任务」的动作附上选取范围；官方命令识别码为 chatgpt.addToThread。接著开 core.test.mjs，用加入整个档案的命令 chatgpt.addFileToThread 附上测试。画面名称依语言与版本而异，可到键盘快捷键设定搜寻识别码以确认对应命令；识别码不是终端机指令。不要只因档案开在分页，就认定它已附上。送出前核对输入框的档名、范围与附件，排除同名的另一份副本。

Explain the selected visibleTasks function in core.mjs and the failing filter assertion in core.test.mjs. Do not edit yet. Identify which tasks should appear for All, Active and Completed, and quote the predicate that causes the mismatch. Confirm the working folder before answering.

第一个要求只做理解。回复应指出 completed 分支错用了 !task.completed，因此显示未完成项目。若它只说「筛选逻辑可能有问题」，追问具体分支与测试；若说已修正，先确认有没有超出这次唯读要求。开启的档案有助带入上下文，但你仍需核对它是否真的看到需要的函式与错误。

步骤三：给予精确修改范围

Fix only the Completed filter in core.mjs so completed tasks appear. Keep the public function signatures and existing tests unchanged. Preserve All and Active behavior, task order, and input arrays. Run node --test core.test.mjs and report the actual result. Show the final diff and any remaining limitation.

在同一个 Codex 任务送出这段；若需要批准命令，先看工作目录与执行内容是否符合练习。完成后合格的核心变更是 completed 分支使用 task.completed，不能把 active 分支一起改错，也不能改测试让错误合理化。由 Codex 报告测试通过后，仍在自己的整合终端机重跑一次，保留独立验证。

export function visibleTasks(tasks, filter) {
  if (filter === "active") return tasks.filter((task) => !task.completed);
  if (filter === "completed") return tasks.filter((task) => task.completed);
  return tasks;
}

这段是参考成果，用来比对，不是要求你先贴上再宣称 Codex 修好了。原故障注解若仍说 predicate 错误，应在同一函式清理失效注解，避免留下误导。除此之外不需要改版面、安装依赖或新增后端。三个测试群组全部通过是必要条件，实际 diff 是否符合范围也要一起判断。

画面显示已改，测试却仍失败时

先储存档案，再看整合终端机的工作目录。编辑器中尚未储存的文字，与终端机测试读取的硬碟档案可能不同；另一份同名副本也可能让你看对了画面却测错了档案。核对 core.mjs 的完整路径、储存状态与测试目录后，再跑原测试。如果三者都正确仍失败，把完整错误与目前差异交给 Codex，不要改测试预期或重装扩充套件。选取／附加内容是提供上下文，储存与实际执行则需要各自确认。

步骤四：检查差异与使用结果

若练习副本已有 Git，从 Source Control 看修改的档案；没有 Git 时也可在档案总管用 Select for Compare／Compare with Selected 对照保留的 broken 与修正版 core.mjs。不要为看 diff 就提交正式专案。比较应集中在筛选条件与失效注解，core.test.mjs 不应被改成容许错误结果。

开启 codex-ide-lab 的本机预览后，先保留你想留下的旧练习纪录；同一浏览器网址可能仍有上一课的资料。展开 About this exercise，按 Reset practice data，再把 Show 选成 All tasks，确认清单为空。这只重设练习资料，不会还原程式档案。 接著新增 Read、Build，将 Read 勾为完成；All 应显示两项，Active 只有 Build，Completed 只有 Read。重新整理后再选 Completed，Read 仍应存在；清单为空时切换筛选也不应出现错误。预览方式与三平台命令见第一个小专案。本篇以 localhost 练习资料验证，不把 localhost 网址当成已部署网站。

故障排除、还原与下一步

扩充套件装了却找不到命令，先确认目前视窗启用的扩充套件与工作环境；WSL 视窗和本机视窗可能不同。选取内容没带入，确认附件、档名与范围，或明说 core.mjs 的 visibleTasks 并贴出必要片段。工具找不到 node，从同一个整合终端机核对，不以另一个系统终端机的成功代替。模型回复被中止时先查看 diff，再续问未完成项目，避免把已改好的部分重做。

想重做时只在练习副本把保留的 broken/core.mjs 复制回去，测试应再次出现原筛选失败；这是成功复原故障起点。不要用整个专案的强制重置掩盖其他未保存工作。本机已验证 broken 的预期失败、expected 的通过和参考画面；没有把参考版直接称作扩充套件实际产生的结果。下一步看修 Bug 流程、测试与 Review与Git 差异。

返回 Codex 教学总目录

阅读完整文字说明

Editor to Selection to Diff

• AI 工具
• 教程
• Codex