VS Code の中で Claude Code を使う

エディタの中に Claude Code の画面が開きます。読み終えるころには、最初の 1 回が動いて、選んだ行をそのまま渡せて、書き換えをどこまで任せるかを自分で決められるようになります。

ファイルを見ながら頼めるので、私はこの形に落ち着きました。

入れるところから、最初の 1 回が動くまで。そのあとに効いてくるのは、頼み方そのものが変わる 3 つです。

入れて、最初の 1 回を動かす

先に要るものは 2 つだけです。

  • VS Code 1.94 以上。まだ入れていなければ公式サイトから先に
  • 契約済みのアカウント。有料プランでも Claude Console でもかまいません(プランの決め方)

開発者向けのキーを発行するような手続きは要りません。アカウントでログインするだけです。

拡張機能ビューから入れる

VS Code で Ctrl+Shift+X(Mac は Cmd+Shift+X)を押すと拡張機能ビューが開きます。Claude Code で検索して、Anthropic 提供のものをインストールしてください。

入れたのに何も出てこないときは、コマンドパレット(Ctrl+Shift+P)から Developer: Reload Window を実行します。それでも出なければ VS Code を再起動します。

VS Code の拡張機能ビューで claude と検索した結果。一番上に Anthropic 提供の Claude Code for VS Code が出ていて、その下に名前やアイコンの似た別の拡張機能が並んでいる
名前の似たものが並ぶので、提供元が Anthropic のものを選ぶ

パネルを開いてログインする

適当なファイルを開くと、エディタの右上に Claude Code のアイコン(✱ の形)が出ます。これが一番手近な入口です。左端のアクティビティバーにも同じアイコンが増えていて、こちらは会話の一覧が開きます。

初回はサインイン画面が出るので、契約したアカウントで認証してください。ブラウザが開いて、終わると戻ってきます。

最初は、ファイルと同じようにエディタのタブとして開きます。右側に固定しておきたいなら、タブをそこへドラッグするか、拡張機能の設定で preferredLocation を sidebar にします。私はタブのまま真ん中に置いて、右に Codex のパネルを並べています(最後の節の画面)。

VS Code の左にエクスプローラー、右に Claude Code のパネルがエディタのタブとして開いている画面。パネルの下に入力欄があり、使うモデルとモード(Auto)が表示されている
最初はエディタのタブとして開く。下が入力欄

空のフォルダで 1 回頼んでみる

入れてログインしただけでは、本当に動く状態になったかは分かりません。空のフォルダを 1 つ作って VS Code で開き、パネルにこう打ってみてください。

このフォルダに hello.md を作って、中に hello と書いて

左のファイル一覧に hello.md が増えれば、もう使えています。返事が返ってきただけでなく、ファイルが増えているかを見てください。 これが、チャットの AI との違いがそのまま出るところです。

このとき、いきなり作られる場合と、「作っていいですか」と聞かれる場合があります。どちらも正常で、あとの「どこまで任せるかを決める(権限モード)」の設定で変わります。

開いているフォルダが、そのまま作業場所になる

ここだけ先に知っておくと、あとで迷いません。

Claude Code は、VS Code で開いているフォルダを見ます。作業したいフォルダを開いてからパネルを出してください。開いていないフォルダのファイルは見えません。

フォルダを開いたときに、VS Code がこのフォルダを信頼するか聞いてくることがあります。信頼を選ぶと拡張機能が使えます。自分で作ったフォルダなら信頼して大丈夫です(信頼しない側=制限モードのままだと動きません)。

どこまで任せるかを決める(権限モード)

頼みごとを打ち込む入力欄(プロンプト欄)の下に、いまのモードが出ています。ここを押すと切り替わります。

モード何が起きるか
Auto別の判定役が代わりに確認して、ワークスペースの中のファイルはほとんど聞かずに書き換える
Manual書き換えのたびに、元と変更後を左右に並べて出し、許可を求める
Plan何をするかを説明して、承認を待つ。手は動かさない

ほかに Edit automatically(聞かずに書き換える)もあります。モードの名前は画面でも英語のままなので、そのまま探してください。

Pro・Max・Team のプランでは、Auto が最初のモードです。さっき「聞かれなかった」なら、これです。Claude Console で使っている場合は Manual から始まるので、逆に「聞かれた」はずです。

Manual にすると、書き換えの前に差分が出ます。この差分の中で自分で直してから承認できます。 直した場合は「あなたが変えた」と Claude 側に伝わるので、元の提案のままだと思い込まれません。

Plan は、大きな変更を頼むときに使っています。VS Code では計画が Markdown の文書として開くので、その場に「ここは違う」とコメントを書いて返せます。

頼み方が変わる 3 つ

ここまでで動きます。残りは、チャットに貼っていた手間がそのまま消えるところです。

選んだ行は、貼らなくても伝わる

エディタで選択したテキストは、何もしなくても Claude 側から見えています。プロンプト欄の下に、いま何行選んでいるかが出ます。

「この関数、何をしているか説明して」と打つだけで、選んだところの話になります。貼り付ける必要はありません。

選択範囲を見せたくないときは、行数が出ている表示を押すと隠せます(目に斜線のアイコンが、隠れている状態です)。

打たずに済ませる 4 つ

やりたいこと打つもの
選択範囲を、行番号つきの参照として本文に入れるAlt+K(Mac は Option+K)。エディタ側を選んだ状態で押すと @app.ts#5-10(app.ts の 5〜10 行目、の意味)の形で入る
ファイルやフォルダを指す@ に続けて名前。部分的な名前でも当たる。フォルダは末尾に /
エディタとパネルを行き来するCtrl+Esc(Mac は Cmd+Esc)。Mac で効かないときは、OS 側のショートカットと取り合っています
送らずに改行するShift+Enter

会話は 1 本でなくていい

Ctrl+Shift+Esc(Mac は Cmd+Shift+Esc)で、新しい会話をタブとして開けます。会話ごとに履歴と文脈が分かれるので、別の作業を並行させたいときに使っています。

タブのアイコンに小さな点が付きます。青は承認待ち、オレンジは、見ていない間に終わったという意味です。

パネル上部の履歴ボタンからは、過去の会話を検索して再開できます。「あの作業の続き」を探すときの入口はここです。

なお、VS Code の統合ターミナルで claude と打ちたい場合は、拡張機能とは別にコマンド版を入れる必要があります。拡張機能が同梱しているものは、この画面のためのものです。

私が VS Code に落ち着いた理由

デスクトップアプリも昔触っていました。両方を使ったうえで、VS Code に残った理由は 2 つです。

ひとつは、左のファイル一覧です。頼んだ結果どのファイルが増えたか、その場で見えます。さっき hello.md を確かめたのと同じことを、作業のあいだずっとやっている感じです。

もうひとつは、もう 1 つの AI(OpenAI の Codex)と並べられることです。同じ画面でファイルを見ながら、どちらに頼むかをその場で選べます。プランの上限に当たったときの逃げ道でもあって、そのあたりはClaude と Codex を VS Code で併用した記録に書きました。

VS Code の左にエクスプローラー、中央に Claude Code のパネル、右に Codex のパネルが並んでいる画面

ここまで動けば、あとは頼む内容の問題です。 次は、頼むたびに同じ前提を説明しなくて済むようにするところ——毎回同じ説明をしないための 2 つのファイルに続きます。上のモードでは足りず、操作ごとに許可を決めたくなったらsettings.json で権限管理してみてわかったことへ。