Claude Code を VS Code で使う(拡張機能)

ハック！でAI編集部AIにより執筆2026年10月11日読了約8分

VS Code でコードの範囲を選び、右の Claude Code のパネルに質問を入力した画面

この記事でわかること

拡張機能のインストールと、Claude Code のパネルの開き方
エディタで選んだ範囲について質問する方法
ターミナルで使うときとの違いと、権限モードの切り替え

確認した環境: Claude Code for VS Code 2.1.296 / VS Code 1.141.0(Linux・英語の表示)/ 2026年10月11日に確認

Claude Code は、VS Code の拡張機能(VS Code に機能を追加するプログラム)としても使えます。エディタの横に開いたパネルから頼めるので、開いているファイルや選んだ範囲について、そのまま質問できます。この記事では、拡張機能をインストールしてから、選んだコードについて質問するまでを、編集部の検証環境の画面で説明します。

使う前に確かめること

VS Code の版: 1.94.0 以上が必要です。
アカウント: Claude の有料プラン(Pro・Max・Team・Enterprise)か、Claude Console のアカウントが必要です。無料のプランでは使えません。API キーを用意する必要はありません。
Claude Code の本体: 拡張機能の中に入っています。ターミナルの Claude Code を先にインストールしていなくても使えます。

拡張機能をインストールする

拡張機能のビューを開く

VS Code の左のアクティビティバー(縦に並んだアイコン)で拡張機能のアイコンを押すか、Ctrl+Shift+X(Mac は Cmd+Shift+X)を押します。
「Claude Code」で検索してインストールする

検索欄に「Claude Code」と入力します。発行元が Anthropic の「Claude Code for VS Code」を選んで、Install を押します。
表示されないときは、ウィンドウを再読み込みする

インストールしたのにアイコンが表示されないときは、コマンドパレット(Ctrl+Shift+P、Mac は Cmd+Shift+P)で「Developer: Reload Window」を実行します。

Claude Code のパネルを開く

作業するフォルダを開く

VS Code で作業するフォルダを開き、ファイルを 1 つ開きます。この記事では、ブラウザで動くやることリストのアプリ(todo-app)のフォルダを開き、app.js を開きました。
Spark のアイコンを押す

Claude Code のアイコン(Spark のアイコン)は、次の 3 か所にあります。どれを押しても開けます。

Claude Code を開くアイコン。① エディタの右上(ファイルを開いているときに表示) ② 左のアクティビティバー ③ 右下のステータスバーの「Claude Code」撮影・作図: 編集部

コマンドパレットで「Claude Code」と入力して開くこともできます。画面の右側の「Chat」は、VS Code に組み込まれている GitHub Copilot のチャットで、Claude Code とは別のものです。
初めて開いたときは、ログインする

初めて開いたときは、ログインの画面が出ます。案内に沿って、Claude のアカウントか Claude Console のアカウントでログインします。編集部の検証環境は API キーで使う設定を済ませていたため、ログインの画面は出ずに、パネルが開きました。

パネルは、エディタの横にタブとして開きます。

エディタの右に Claude Code のパネルが開き、Auto mode is now Claude Code's default permission mode. のお知らせと、Ask Claude to edit… の入力欄が表示されている — 開いた Claude Code のパネル。① 頼みたいことを書く入力欄 ② 開いているファイル(app.js)が自動で添えられる ③ 今の権限モード(Auto)撮影・作図: 編集部

①の入力欄に頼みたいことを書き、右下の送信のボタン(↑)で送ります。日本語で書けます。
②のとおり、開いているファイルの名前も、Claude に伝わります。添付しないときは、× を押して解除します。
③は今の権限モード(Claude が確認なしで進めてよい範囲)です。初めて開いたときは「Auto mode is now Claude Code's default permission mode.」(auto モードが既定の権限モードになりました)というお知らせが出ました。

選んだ範囲について質問する

エディタでコードを選ぶ

質問したい部分を、マウスでドラッグして選びます。選んだ内容は Claude から見えるようになり、入力欄の下に、選んだ行の数が表示されます。
質問を書いて送る

この例では、render という関数(13〜42 行目)を選んで、次のように頼みました。
テキスト
```
選択した部分で何をしているか、プログラミング初心者にもわかるように説明してください
```
範囲を選んで質問を入力したところ。① エディタで選んだ範囲 ② 入力した質問 ③ 選んだ行の数(30 lines selected)撮影・作図: 編集部
答えを読む

送った質問には、選んだ範囲が「app.js#13-42」(app.js の 13〜42 行目)という形で付きます。答えは、関数の中身を順番に、コードを引用しながら説明するものでした。パネルのタブの名前も「todo-app の render 関数」に変わりました。

答えが表示されたところ(答えの後半)。① 選んだ範囲が、ファイル名と行の番号で付いている ② 答え撮影・作図: 編集部

このほか、次の方法でも、Claude に見てほしいものを渡せます。

@ に続けてファイルやフォルダの名前を入力する(名前の一部でも候補が出ます。@src/components/ のようにフォルダも指定できます)
@terminal:名前 で、ターミナルに表示された内容を渡す
画像を貼り付ける
Shift を押しながらファイルをドラッグして、添付する

権限モードを切り替える

入力欄の右下の「Auto」の表示(上の画面の③)を押すと、権限モードを選べます。何も設定していなければ Auto で始まります。

表示	動き
Manual	編集の前に、変更案を元のファイルと左右に並べて表示し、許可を求める。変更ごとに受け入れ(Accept this change)と却下(Reject this change)を選べる
Edit automatically	ファイルの編集を、確認なしで行う
Plan	先に計画を作成する。計画は Markdown の文書で開き、行の中にコメントを書ける
Auto	確認なしで進める。Claude が操作ごとに危険がないかを実行の前に確かめ、危険が低いと判断したものだけを実行する

開くときのモードを決めておきたいときは、VS Code の設定の claudeCode.initialPermissionMode で指定します(Auto は指定できません)。モードのくわしい違いは、第 6 回の権限モードを使い分けるで説明しています。

ターミナルで使うときとの違い

claude のコマンド: 拡張機能は Claude Code の本体を中に持っていますが、claude のコマンドは使えるようになりません(PATH に入りません)。VS Code の中のターミナルで claude を使うには、ターミナルの Claude Code を別にインストールします。
使えない機能: 拡張機能では、! で始めてコマンドを実行する機能と、Tab での補完が使えません。/ で始まるコマンドも、一部だけが使えます。
会話の履歴: ターミナルと共通です。拡張機能で始めた会話を、ターミナルで claude --resume を実行して続けられます。
設定: 拡張機能の設定(VS Code の設定 → Extensions → Claude Code)と、ターミナルと共通の ~/.claude/settings.json の 2 つがあります。
ほかのターミナルからつなぐ: VS Code の外のターミナルで動かしている Claude Code は、/ide で VS Code につなげられます。

よく使うキー

Windows・Linux	Mac	働き
`Ctrl`+`Esc`	`Cmd`+`Esc`	エディタと Claude のパネルの間で、操作する場所(フォーカス)を切り替える
`Ctrl`+`Shift`+`Esc`	`Cmd`+`Shift`+`Esc`	新しい会話のタブを開く
`Alt`+`K`	`Option`+`K`	選んだ範囲を、入力欄に挿入する

拡張機能をアンインストールする

拡張機能のビューで「Claude Code for VS Code」の Uninstall を押します。

次の回では、アプリの画面の画像を Claude Code に渡して、見た目を直してもらう方法を説明します。

参考にした公式の情報

X Facebook はてブ LINE

この記事は、ハック！でAI編集部が AI を使って執筆しました。画面の画像は、編集部の検証環境で実際に操作して撮影したものです(引用の画像は出典を記載しています)。内容の誤りはお問い合わせからお知らせください。

連載

Claude Code 入門

前の回(第9回)Git と組み合わせる(コミットを頼む・「!」でコマンド)次の回(第11回)画面の画像を渡して Claude Code に直してもらう

全 12 回の目次