在 WebStorm 中整合 Codex 工作流程
· 閱讀時間約 3 分鐘
什麼是 Codex？
Codex 是 OpenAI 提供的程式碼生成助手，能解讀自然語言並輸出程式碼、指令或文字。本文示範如何在 WebStorm 中透過 Codex CLI 建立一個以對話驅動的工作流程。
為什麼要在 IDE 中使用 Codex？
WebStorm 已經提供完善的 TypeScript/React 體驗，但若再結合 Codex CLI，就能以對話方式生成模板、整理文件或批次修改檔案。這讓日常的重複性動作（例如建立部落格、填寫 front matter、插入多國語系內容）都能在同一個 IDE 視窗完成。
提示
Codex 維持在同一個版本最容易除錯，建議專案以 package.json script 管理，例如 "codex": "npx codex"，避免團隊成員版本不一致。
安裝與初始設定
- 先在系統層級安裝 Codex CLI：
npm install -g @openai/codex-cli - 在專案根目錄建立或更新
.context/（例如docusaurus-guidelines.md），把前置規範寫入，並於每次執行前指示 Codex 先閱讀。 - 若想用固定指令呼叫 Codex，可在
package.json中加入腳本（底層仍呼叫全域codex或npx codex）：{
"scripts": {
"codex": "codex",
"codex:plan": "codex --plan"
}
}
在 WebStorm 綁定 Codex 指令
- 打開 Run/Debug Configurations，新增 npm 或 Shell Script。
- 指定 Script 為
codex，Working directory 指向專案根目錄。 - 勾選 Activate tool window 讓結果出現在 Run 面板，方便複製貼上。
- 若想要快速輸入指令，可在 Keymap → Plugins → External Tools 為
codex配快捷鍵，例如 Ctrl + Shift + ;。
透過以上設定，就能在任意檔案按一次快捷鍵，立即呼叫 Codex 完成編輯或回覆。
常見工作流程
- 撰寫部落格：執行
npm run codex -- "create blog on webstorm"，Codex 會依照.context中的規範與當天日期產生檔案，再由你在 WebStorm 內調整。 - 批次重構：在終端切換到目標資料夾，讓 Codex 讀取檔案後輸入具體需求，例如「將所有 fetch 換成 axios」。
- Docs QA：透過
codex --plan整理多步驟修改，把輸出貼進.mdx檔案，並利用 WebStorm Diff 介面快速檢查。做法是先在終端執行npm run codex:plan -- \"<需求描述>\"，依序執行計畫並將 Codex 產生的內容貼回對應文件，最後用 Diff 檢查每一步是否符合預期。
疑難排解
- 終端無法解析 codex 指令：確認 WebStorm 使用的 Node 版本與系統一致，或在設定中的 Shell path 改成
/bin/zsh -l。 - CLI 無法寫入檔案：在 Codex 命令前加入
CODEx_SANDBOX=workspace-write（依專案需求）或檢查 repository 權限。 - 輸出語言錯誤：把「預設使用繁體中文」寫在
.context，並提醒 Codex 每次編輯前重新閱讀該檔案。
善用這套流程，就能在 WebStorm 中持續保持專注，同時享受到 Codex 的自動化與解題效率。