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