VS CodeでClaude Codeを使う

Claude Code は、ターミナルで使う方法のほかに、VS Codeの拡張機能 としても使えます。変更の差分(どこがどう変わるか)を画面で見ながら、承認や取り消しができるので、初心者にも扱いやすい方法です。

前提

• VS Code のバージョンが 1.94.0以降(古い場合は更新します)
• Claude Code を使えるアカウント(ターミナル版と同じものでログインできます)
• 前のページまでで、WSL(Ubuntu)につないだVS Codeが使えること

手順1: 拡張機能をインストールする

1. WSLにつないだ状態でVS Codeを開きます(cd ~/projects/hello のあと code .)。
2. Ctrl + Shift + X で拡張機能の画面を開きます。
3. 「Claude Code」と検索し、発行元が Anthropic のものを インストール します。

手順2: パネルを開く

Claude Code のパネルは、次のどれかで開けます。

• エディタ右上の スパークアイコン(ファイルを開いているときに表示されます)
• 左のアクティビティバーにある、スパークアイコン
• 画面右下のステータスバーの ✻ Claude Code
• コマンドパレットで Claude Code と入力し、「Open in New Tab」などを選ぶ

手順3: ログインする

初回はログイン画面が表示されます。Sign in を押し、ブラウザで認証します。

ログイン後に表示される「Learn Claude Code」のチェックリストで、基本操作を試せます。あとから見たいときは、コマンドパレットで Claude Code: Open Walkthrough を実行します。

基本の使い方

1. パネルの入力欄に、やってほしいことを書いて送ります。
2. Claude Code がファイルの変更を提案します。
3. 画面の下にある 権限モード によって、動きが変わります。
   • Manual: ファイルを変更する前に、変更前と変更後を並べた画面を出して、許可を求めます。「承認」「拒否」「別の指示」を選べます。
   • Edit automatically: ワークスペース内のほとんどのファイルを、確認なしで編集します。
4. 変更を確認し、問題がなければ承認します。

便利な操作

操作	キー
選んだコードの場所を、メッセージに引用する(@ファイル名#行番号)	Alt + K
エディタとClaude Codeの入力欄を行き来する	Ctrl + Esc
拡張機能の操作を一覧から探す(コマンドパレット)	F1 → Claude Code と入力

エディタでコードを選択すると、Claude Code はその部分を自動で見ます。「この部分はなぜこう書いてあるの?」のように、選んだ箇所について質問できます。

ターミナル版との関係

拡張機能には、パネル用のClaude Codeが含まれています。一方、VS Codeの中のターミナルで claude を実行する には、前のページでインストールしたClaude Code(ターミナル版)が必要です。このガイドでは両方入れているので、どちらでも使えます。

使い方	向いている場面
VS Codeのパネル	差分を見ながら、変更を確認して進めたいとき
VS Codeのターミナルで claude	コマンドで細かく操作したいとき、設定コマンド(/init など)を使うとき

確認する

• 拡張機能の「Claude Code」が、インストール済みになっている
• パネルを開いて、ログインできる
• 「このフォルダには何がありますか?」と送ると、答えが返る

参考

• VS Codeで Claude Code を使う(公式)