claudeをVScodeで使うための設定

まずはじめに、そして、VScodeにアンソロピック社から出ている、[Claude Code for VS Code]をインストールをしておく

セットアップ手順

【ステップ①】 Node.js のインストール（まだなければ）

Claude Code CLIはNode.jsが必要です。nodejs.org からLTS版をインストールしてください。

【ステップ②】Claude Codeのインストール（ターミナルで実行）

npm install -g @anthropic-ai/claude-code

【ステップ③ 】ログイン（Proアカウントに紐付け）

claude

初回起動時にブラウザが開き、claude.aiアカウントでサインインします。これによってProプランのサブスクリプションがClaude Codeと紐付けられます。

アカウントのE-mailに来る「最近の Pro プランへのアップグレードにより、ターミナル、IDE、またはブラウザーで動作するエージェントコーディングツールである Claude Code にアクセスできるようになります。」という文言があります。そして、caude codeの設定ボタンをクリックします。

(注意)もし ANTHROPIC_API_KEY という環境変数がPCに設定されていると、サブスクリプションではなくAPI課金になってしまいます。心当たりがある場合は削除してください。

【ステップ④】 VS Code拡張機能の確認

すでにAnthropicの公式「Claude Code」拡張機能をインストール済みとのことなので、あとはVS Codeを開くだけです。拡張機能はCLIを検出すると自動的に統合されます。

【ステップ⑤ 使い始める】

VS Codeの右上にあるSparkアイコンをクリックするとClaude Codeが開きます。このアイコンはファイルを開いているときのみ表示されます。

主な機能（VS Code拡張）

サイドパネルでのチャット、ファイル変更の差分表示（インライン diff）、@ファイル名 でのファイル参照、会話履歴の保存、複数タブでの並行会話などが利用できます。

やること

Node.js インストール
npm install -g @anthropic-ai/claude-code
claude を実行してProアカウントでログイン
VS Codeを開く（拡張機能は自動認識）
Sparkアイコンから利用開始

すでにVS Code拡張は入っているので、実質CLIのインストールとログインだけで使えるようになります！

【 Git Bash 】Windows版のClaude Codeを動かすには、『Git Bash』という翻訳機のツールが必要

① Git for Windowsをインストールする

もしパソコンにGit（ギット）が入っていない場合は、まずこれを入手する必要があります。

ダウンロード先: https://git-scm.com/download/win
インストール時の注意点:
基本的には「Next」を連打でOKです。
途中で「Adjusting your PATH environment」という項目が出たら、「Git from the command line and also from 3rd-party software」（推奨）が選ばれていることを確認してください。

②VS Codeのターミナルを「Git Bash」に切り替える

Gitをインストール（または既にインストール済み）したら、VS Code側で使うターミナルの種類を「PowerShell」から「Git Bash」に変更するのが一番確実です。

VS Codeのターミナル右上の「＋」ボタンの横にある 「∨（下矢印）」 をクリックします。
一覧から 「Git Bash」 を選択します。
新しい真っ黒な（あるいは少し色のついた）画面が開いたら、そこで claude と打ってみてください。

③それでもダメな場合（パスの設定）

もし「Gitは入っているのに同じエラーが出る」場合は、Claudeに場所を教えてあげる必要があります。

Windowsのスタートメニューで「環境変数」を検索し、「システム環境変数の編集」を開きます。
「環境変数」ボタンを押し、「ユーザー環境変数」の「新規」をクリック。
変数名に CLAUDE_CODE_GIT_BASH_PATH
変数値に C:\Program Files\Git\bin\bash.exe （※インストール先が標準の場合）を入力してOKを押します。

カニ(claudeのロゴキャラクター)が出てきた場合

上図のスクショの上の鉛筆アイコンの部分や、下の「＞ここに依頼を書く」の部分に依頼内容を記載する。

表示されているのは、「Claude Codeのデザイン設定」の画面です。以下の手順で進めてください。

１．デザインを選ぶ

矢印キー（上下）を使って、お好みのスタイルを選んで Enterキー を押してください。

VS Codeを「ダークモード」で使っているなら、そのまま 「1. Dark mode」 でOKです。
一番下のサンプルコード（function greet()...）が綺麗に見えるものを選べば間違いありません。

２．その後に出てくる質問に答える

デザインを決めると、次にいくつか「初期設定」の質問（英語）が出てくることがあります。基本的には以下のように答えれば大丈夫です。

Allow usage data collection? (y/n)：「利用データを送ってもいい？」という質問です。協力してもよければ y、嫌なら n を打って Enter。
Authenticate / Login：ブラウザが開き、「このパソコンでClaudeを使っていいですか？」という承認画面が出たら「Approve（承認）」を押してください。