🐡

Claude CodeをVSCodeやCursorと連携する

に公開
2026/04/27

Claude Codeは、コードベースを読み取り、ファイルを編集し、コマンドを実行できるAIコーディングアシスタントです。
ターミナルだけでなく、VSCodeやCursorに拡張機能をインストールしてIDE内から直接利用できます。

https://code.claude.com/docs/ja/overview

事前準備

Claudeのサブスクリプション(Claude ProまたはMax)またはAnthropicコンソールのアカウントが必要です。

https://claude.com/pricing

Claude Codeのインストール

推奨:ネイティブインストール(macOS / Linux / WSL)

curl -fsSL https://claude.ai/install.sh | bash

Windows(PowerShell)

irm https://claude.ai/install.ps1 | iex

Windows(CMD)

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

ネイティブインストールはバックグラウンドで自動更新されます。

Homebrewでインストール(macOS)

brew install --cask claude-code

Homebrew版は自動更新されません。最新版にするには brew upgrade claude-code を実行してください。

npmでインストール(旧来の方法・引き続き利用可能)

Node.js 18以上が必要です。

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

バージョン確認

claude -v

VSCodeとの連携

拡張機能のインストール

VSCodeの拡張機能ビューを開き(Mac: Cmd+Shift+X / Windows・Linux: Ctrl+Shift+X)、
「Claude Code」と検索してAnthropicが公開している公式拡張機能をインストールします。

または、以下のリンクからVSCodeで直接インストールできます。

https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code

インストール後に拡張機能が表示されない場合は、VSCodeを再起動するかコマンドパレットから
Developer: Reload Window を実行してください。

サインイン

拡張機能をインストールしてパネルを初めて開くと、サインイン画面が表示されます。
Sign in をクリックするとブラウザが開くので、Claudeアカウントでログインします。

以前はターミナルにキーを貼り付ける手順がありましたが、現在はブラウザで完結します。

使い方

サインイン後、エディタ内の以下の場所からClaudeを呼び出せます。

  • エディタツールバー(右上) のSparkアイコン(ファイルを開いているときのみ表示)
  • アクティビティバー(左サイドバー) のSparkアイコン → セッション一覧を表示
  • コマンドパレット(Cmd+Shift+P / Ctrl+Shift+P)で「Claude Code」と入力 → 「新しいタブで開く」を選択

チャット画面が開いたら、コードに関する質問・デバッグ・変更依頼などを自由に入力できます。
Claudeが提案した変更はインラインの差分として表示され、Accept / Rejectで確認しながら適用できます。


Cursorとの連携

拡張機能のインストール

Cursorでも同じAnthropicの公式拡張機能をインストールするだけで連携できます。

Cursorの拡張機能ビューで「Claude Code」と検索してインストールするか、
以下のリンクをブラウザで開くとCursorへの直接インストールが実行されます。

cursor:extension/anthropic.claude-code

以前は /ide コマンドでCursorを選択する手順や、.vsix ファイルを手動でインストールする
回避策が必要でしたが、現在はマーケットプレイスから直接インストールできます。

サインインと使い方

VSCodeと同様に、インストール後に表示されるサインイン画面からブラウザ経由でログインします。
その後はSparkアイコンをクリックするか、コマンドパレットからClaudeのタブを開いて利用できます。


主な機能

機能 説明
インライン差分表示 Claudeの変更提案をエディタ上でAccept / Rejectしながら確認できる
@メンション @ファイル名 や行範囲を指定してClaudeに文脈を渡せる
プランの確認 変更を適用する前にClaudeの実行計画を確認・編集できる
複数セッション 別タブやウィンドウで複数の会話を並行実行できる
会話履歴 過去のセッションをアクティビティバーから再開できる
MCP連携 MCPサーバーを通じてブラウザ操作や外部サービスと連携できる
チェックポイント 変更を特定時点に巻き戻すことができる

トラブルシューティング

401エラー(認証エラー)が出る場合

トークンの有効期限が切れています。~/.claude/.credentials.json を削除してからVSCodeを再起動すると、再ログイン画面が表示されます。

ANTHROPIC_API_KEY を設定しているのにサインインを求められる

VSCodeがシェルの環境変数を引き継げていない可能性があります。
ターミナルから code . でVSCodeを起動すると環境変数が引き継がれます。

拡張機能インストール後にSparkアイコンが表示されない

VSCodeまたはCursorを再起動するか、コマンドパレットから Developer: Reload Window を実行してください。


まとめ

Claude CodeはネイティブインストールスクリプトやHomebrewで簡単にインストールでき、
VSCodeおよびCursorへの連携もマーケットプレイスから拡張機能を入れるだけで完了します。
サインインもブラウザ経由で行えるようになり、以前より大幅にセットアップが簡単になりました。

Discussion