「ターミナルではなく、普段使っているエディタの中で Codex を動かしたい」という方には、Codex の VS Code 拡張 が最適解です。VS Code・Cursor・Windsurf など、VS Code 互換のエディタすべてで動きます。
この記事では、拡張機能のインストールから基本操作、効率化テクニックまでを 2026年最新版 で解説します。
なぜ VS Code 拡張が便利なのか
CLIと比べて、VS Code 拡張は次の点で優れています。
- 編集差分がエディタ上で即プレビューできる
- 開いているファイル・選択中コードを自動でコンテキストに含める
- 画像（スクショ・モックアップ）をドラッグ&ドロップで投入できる
- ファイル名タグ（
@filename）で対象ファイルを明示的に指定できる - Web検索が標準でオン（最新情報も拾える）
一方、CLIは長時間タスクや自動化に強いので、用途で使い分ける のが正解です。
インストール手順
VS Code 本体での手順
- VS Code を起動
- 左サイドバーの 拡張機能アイコン（四角が組み合わさったマーク）をクリック
- 検索バーに
Codexと入力 - 「Codex – OpenAI's coding agent」（出版元：OpenAI）をインストール
- 右下に通知が出るのでサインインボタンをクリック
- ブラウザが開き ChatGPT にログイン
これだけで使えるようになります。
Cursor / Windsurf での手順
これらは VS Code 互換なので、上と同じ手順で拡張ストアから検索→インストールでOK。
CLIと同じ認証を使う
すでに codex login でCLIにログインしている場合、拡張は同じ認証情報を自動で読み込む ことが多いです。サインインを求められなければそのまま使えます。
基本的な使い方
拡張をインストールすると、左サイドバーに Codex アイコン が追加されます。クリックするとサイドパネルが開き、対話できる入力欄が表示されます。
一番シンプルな使い方
- 編集したいファイルを開く
- Codex パネルに「このファイルにエラーハンドリングを追加して」と入力
- Enter で送信
- Codex が差分を提案 → エディタ上でプレビュー
- 「適用」 ボタンで反映、「却下」 で破棄
開いているファイルを自動でコンテキストに
エディタで開いているファイル・選択中のコード行は、自動でプロンプトに含まれる 仕様です。長々と説明しなくても、「これを直して」だけで通じます。
特定のファイルを指定する
プロンプト内で @filename.tsx のように打つと、ファイル名のサジェストが出てきます。明示的に対象を指定したいときに便利。
例：
@src/auth.ts と @src/session.ts を見て、整合性が取れているか確認して
差分プレビューの見方
Codex が編集を提案すると、エディタ上に 赤（削除）・緑（追加） の差分が表示されます。
- 承認：そのまま適用
- 却下：変更を破棄
- 部分適用：複数ファイルの一部だけ適用したい場合
ここで内容を吟味してから反映できるので、CLIより安全に使える のがエディタ拡張の強みです。
画像のドラッグ&ドロップ
Codex の VS Code 拡張は 画像入力対応。スクショ・モックアップ・手書きの図などをドラッグ&ドロップで添付できます。
使えるシーン
- デザインの再現：Figma のスクショを渡して「これをHTML/CSSで再現して」
- エラーの相談：エラー画面のスクショを渡して「これを直すには？」
- ホワイトボード写真：手書きのアーキ図を渡して「これを実装して」
複雑な状況を 言葉で説明するより画像で見せたほうが早い ときに革命的に便利です。
Web検索が標準でオン
Codex IDE 拡張は Web検索ツールが標準で有効 になっています。最新のライブラリ仕様や、最近のフレームワーク変更点も拾ってくれます。
> Next.js 16 の App Router 新機能を踏まえて、ルーティングをリファクタして
このような最新情報が絡む依頼でも、Web検索で補完してくれます。
効率化テクニック5選
1. ショートカットキーを覚える
| 操作 | ショートカット |
|---|---|
| Codex パネルを開く | Cmd + L (Mac) / Ctrl + L (Win) |
| 選択コードを Codex に送る | Cmd + I / Ctrl + I |
| 差分を承認 | Cmd + Enter |
| 差分を却下 | Esc |
これだけ覚えれば、ターミナルとの行き来が激減します。
2. 「インライン編集」を活用
コードを選択して Cmd + I を押すと、選択範囲だけを対象に編集 できます。「この10行をTypeScriptに移行」のようなピンポイント修正に最適。
3. プロジェクト指示書（AGENTS.md）と組み合わせる
拡張も AGENTS.md を自動で読み込む ため、プロジェクトルールが守られたコードを生成してくれます。
4. チャット履歴をブランチで分ける
長い相談は専用ブランチでまとめると、後から見直しやすい。「New chat」 ボタンで新規スレッドが作れます。
5. CLIと併用する
エディタで対話的に試行錯誤 → 確定したら CLI で一括処理、という流れが最強。同じ ChatGPT アカウントで両方ログインしておきます。
設定のおすすめ
VS Code の settings.json で以下を調整できます：
{
"codex.autoApproveSafeEdits": false,
"codex.contextIncludeOpenFiles": true,
"codex.model": "gpt-5.1-codex",
"codex.webSearch": "auto"
}
autoApproveSafeEdits を true にすると、コメント追加など安全な編集は自動承認されます。本番リポジトリでは false 推奨。
トラブルシューティング
拡張がサイドバーに出てこない
VS Code を再起動してください。設定の検索で codex と打って、ビューが有効になっているか確認。
「Sign in」ボタンを押しても反応しない
- VS Code を管理者権限で起動していると認証コールバックが届かないことがあります → 通常権限で起動
- ファイアウォール / VPN が干渉している可能性も
反応が遅い
- 開いているファイル数が多すぎる → 不要なファイルを閉じる
- 大きなファイルを含むワークスペース →
.gitignore系のパターンで対象を絞る
差分が適用できない
- ファイルが他のプロセスでロックされている
- 該当ファイルに編集中の変更がある（保存してから再試行）
Cursor で使うと挙動がおかしい
Cursor は VS Code フォークなので、稀に互換性問題が出ます。Cursor 公式の拡張対応情報を確認してください。
CLIとどう使い分けるか
| 使い分け | こっち |
|---|---|
| 対話的に試行錯誤したい | VS Code 拡張 |
| 長時間の自動タスク | CLI |
| 差分を丁寧に確認しながら進めたい | VS Code 拡張 |
| 画像を見せて頼みたい | VS Code 拡張 |
| シェルコマンドを多用する | CLI |
| CI/CD で自動実行 | CLI |
| ペアプロ感覚 | VS Code 拡張 |
両方インストールしておくのが王道です。
よくある質問（FAQ）
Q. ChatGPT Plus でも使えますか？
A. はい、Plus 以上のプランで全機能 が使えます。Free / Go は制限があります。
Q. JetBrains 系 IDE（IntelliJ など）でも使えますか？
A. 2026年時点では VS Code 互換のエディタのみ に対応。JetBrains 対応は将来的にアナウンスされる可能性があります。
Q. プロジェクトのコードはOpenAIに送られますか？
A. 編集対象のコードはOpenAIサーバーに送信されます。Business・Enterprise プランなら学習に使われない契約。Plus/Pro は設定で学習オプトアウト可能。
Q. 複数のワークスペースで同時に使えますか？
A. はい、それぞれのワークスペースで独立してチャットセッションを持てます。
Q. オフラインで動きますか？
A. 動きません。常時インターネット接続が必要です。
まとめ
Codex VS Code 拡張は、普段のエディタにAIエージェントを乗せる という体験を提供してくれます。CLIと比べてビジュアルで差分確認できる安心感があり、画像入力やWeb検索も強力です。
次に読むなら、CLIとの併用 で生産性を最大化するための CLI使い方ガイド、もしくは AGENTS.md の書き方 がおすすめです。