はじめに
この記事では、Claude Code、Codex CLI(OpenAI)、Gemini CLI(Google)の3つの主要なAI CLIツールをVSCodeに統合する方法を、実際のセットアップした手順とともにClaudeによる自動執筆になります。
前提条件
- macOS(本記事はmacOS環境を想定)
- VSCode がインストール済み
- Homebrew / npm / curl がインストール済み
- 各サービスのアカウント(Claude、ChatGPT、Google)
1. AI CLIのインストール
1.1 Claude Code
# curlでインストール
curl -fsSL https://claude.ai/install.sh | bash
# インストール確認
claude --version
認証:
初回起動時にブラウザが開き、Claudeアカウントで認証します。
claude
# → ブラウザで認証フローが開始
1.2 Codex CLI (OpenAI)
# Homebrewでインストール
brew install codex
# インストール確認
codex --version
認証:
ChatGPT Plus/Pro/Team/Enterpriseアカウントが必要です。
1.3 Gemini CLI (Google)
# npmでインストール
npm install -g @google/gemini-cli
# インストール確認
gemini --version
認証:
初回起動時にGoogleアカウントで認証します。
gemini
# → ブラウザで認証フローが開始
2. VSCode拡張機能のインストール
2.1 コマンドラインで一括インストール
# Claude Code Extension
code --install-extension anthropic.claude-code
# Codex (OpenAI) Extension
code --install-extension openai.chatgpt
# Gemini CLI Companion Extension
code --install-extension google.gemini-cli-vscode-ide-companion
2.2 インストール確認
code --list-extensions | grep -E "anthropic|openai|gemini"
出力例:
anthropic.claude-code
google.gemini-cli-vscode-ide-companion
openai.chatgpt
3. VSCode統合のセットアップ
3.1 Claude Code の統合
# VSCodeの統合ターミナルで実行
claude
# 初回起動時、拡張機能が自動インストールされる
# "Connected to VS Code" のようなメッセージが表示されればOK
キーボードショートカット:
-
Cmd+Esc(Mac) /Ctrl+Esc(Win): Claude Codeを即座に起動 -
Cmd+Option+K(Mac): ファイル参照を挿入
3.2 Codex の統合
# VSCodeのサイドバーにCodexアイコンが表示される
# アイコンをクリック → "Sign in with ChatGPT" で認証
使い方:
- サイドパネルのチャットで対話
- Agent Modeで自動実行
3.3 Gemini CLI の統合
# VSCodeの統合ターミナルで実行
gemini
# 統合状態を確認
/ide status
ケース1: すでに認識されている場合
✓ Connected to Visual Studio Code
→ そのまま使用できます。/ide installは不要です。
ケース2: 認識されていない場合
# IDE統合をインストール
/ide install
# → Marketplaceから拡張機能が自動インストールされる
# 再度確認
/ide status
# → "✓ Connected to Visual Studio Code" と表示されればOK
初回起動時の確認:
> Do you want to connect VS Code to Gemini CLI?
→ "1. Yes" を選択(推奨)
補足:
code --install-extensionで拡張機能を先にインストールしている場合、/ide installは不要です。/ide statusで認識されていれば、すぐに使い始められます。
4. 拡張機能の役割と価値
4.1 拡張機能がないとどうなる?
| 機能 | 拡張機能あり | 拡張機能なし |
|---|---|---|
| コンテキスト認識 | 開いているファイルを自動認識 | 手動でファイルパスを指定 |
| diff表示 | VSCodeネイティブUIで表示 | ターミナルのテキストのみ |
| 選択テキスト | 自動で認識 | コピー&ペーストが必要 |
| ショートカット | IDE統合のショートカット利用可 | なし |
4.2 具体例
拡張機能あり:
$ claude
> 今開いているファイルをリファクタリングして
→ 開いているファイルを自動認識してリファクタリング ✅
拡張機能なし:
$ claude
> 今開いているファイルをリファクタリングして
→ "どのファイルですか?ファイルパスを教えてください" ❌
5. トラブルシューティング
5.1 IDE統合が認識されない
# VSCodeの統合ターミナルから起動しているか確認
# 外部ターミナルではなく、VSCode内蔵のターミナルを使用
# code コマンドがPATHに登録されているか確認
which code
# 登録されていない場合
# VSCode: Cmd+Shift+P → "Shell Command: Install 'code' command in PATH"
5.2 Gemini CLIでSolargraphエラー
# Ruby/Railsプロジェクトの場合、Solargraphのインストールを推奨
gem install solargraph
# または Gemfile に追加
# group :development do
# gem 'solargraph'
# end
5.3 Git未管理プロジェクトでの承認モード
初回起動時に以下のメッセージが表示される場合:
> Require approval of edits and commands
→ "2. Require approval" を選択(推奨)
Git管理されていないプロジェクトでは、すべての変更を確認してから適用する承認モードが安全です。
6. 動作確認
6.1 Claude Codeの確認
# 1. VSCodeでファイルを開く
# 2. 統合ターミナルで
$ claude
# 3. コンテキスト認識を確認
> 今開いているファイルのコードレビューをして
# 拡張機能が動作していれば、ファイルを自動認識してレビュー開始
6.2 Gemini CLIの確認
$ gemini
# 入力欄上部に以下のように表示されればOK
# "Using: 1 open file (ctrl+e to view) | 1 GEMINI.md file"
> このプロジェクトの構造を説明して
6.3 Codexの確認
# サイドバーのCodexアイコンをクリック
# ChatGPTアカウントでサインイン完了後
# チャットパネルで
> プロジェクトのREADMEを作成して
まとめ
- 3つのAI CLIは共存可能: 拡張機能をインストールしただけではリソースをほとんど使わない
- 拡張機能の価値: CLIとVSCodeの統合により、開いているファイルの自動認識やdiff表示が可能に
- 使い分けがカギ: 必要な時に1つずつ起動することで、快適な開発体験を実現
おまけ: macOSでVim拡張のキーリピートを有効にする
VSCodeでVim拡張を使用している場合、デフォルトではキーリピートが効きません。以下の設定で解決できます。
問題
Vim modeで「j」キーを押しっぱなしにしても、
1つ下にしかカーソルが移動しない
解決方法
ステップ1: Press and Hold を無効化(最重要)
# VSCodeでキーリピートを有効化
defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false
# VSCode Insidersの場合
defaults write com.microsoft.VSCodeInsiders ApplePressAndHoldEnabled -bool false
# VSCodiumの場合
defaults write com.visualstudio.code.oss ApplePressAndHoldEnabled -bool false
# Cursorの場合
defaults write com.todesktop.230313mzl4w4u92 ApplePressAndHoldEnabled -bool false
# Windsurfの場合
defaults write com.exafunction.windsurf ApplePressAndHoldEnabled -bool false
ステップ2: キーリピート速度の調整(推奨)
# バランス型(推奨)
defaults write -g KeyRepeat -int 2
defaults write -g InitialKeyRepeat -int 15
# VSCodeを再起動
数値の意味:
-
KeyRepeat: リピート速度(1=最速、2=高速、3-5=普通) -
InitialKeyRepeat: リピート開始遅延(10=即座、15=標準、20+=ゆっくり)
ステップ3: 速度の微調整
速すぎる場合は数値を上げる:
# やや遅め
defaults write -g KeyRepeat -int 3
defaults write -g InitialKeyRepeat -int 20
# VSCodeを再起動
ステップ4: 現在の設定を確認
# 現在の設定値を確認
defaults read -g KeyRepeat
defaults read -g InitialKeyRepeat
GUIでの調整(補足)
システム環境設定からも調整可能です:
- システム環境設定 → キーボード
- キーのリピート スライダーを調整
- リピート入力認識までの時間 スライダーを調整
ただし、GUIでは最速の設定(KeyRepeat -int 1)にはできないため、ターミナルコマンドの方が柔軟です。
設定が反映されない場合
# 1. macOSを再起動(またはログアウト→ログイン)
# 2. VSCodeを完全に終了して再起動
# 3. 設定を再確認
defaults read -g ApplePressAndHoldEnabled
# → 0(false)と表示されればOK
なぜこの設定が必要か?
macOSには「Press and Hold」機能があり、キーを長押しすると特殊文字メニューが表示されます。これがVimのキーリピートを妨げているため、無効化する必要があります。