0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Claude Code / Codex CLI / Gemini CLI を VSCodeに統合する備忘録

Posted at

はじめに

この記事では、Claude CodeCodex 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での調整(補足)

システム環境設定からも調整可能です:

  1. システム環境設定キーボード
  2. キーのリピート スライダーを調整
  3. リピート入力認識までの時間 スライダーを調整

ただし、GUIでは最速の設定(KeyRepeat -int 1)にはできないため、ターミナルコマンドの方が柔軟です。

設定が反映されない場合

# 1. macOSを再起動(またはログアウト→ログイン)
# 2. VSCodeを完全に終了して再起動
# 3. 設定を再確認

defaults read -g ApplePressAndHoldEnabled
# → 0(false)と表示されればOK

なぜこの設定が必要か?

macOSには「Press and Hold」機能があり、キーを長押しすると特殊文字メニューが表示されます。これがVimのキーリピートを妨げているため、無効化する必要があります。


参考リンク

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?