Claude Code × VSCode 統合ガイド:ターミナル不要で AI 開発を加速
Claude Code を VSCode から直接操作する方法を完全解説。公式拡張のインストール・キーバインド・MCP 連携・Cursor との比較・チーム運用ノウハウまで実装レベルで紹介します。
Claude Code は CLI ツールですが、公式 VSCode 拡張機能 を使えばエディタ上で直接 AI 開発が可能です。本記事では拡張のインストールから、キーバインド最適化・MCP 連携・Cursor との比較・チーム運用まで実装レベルで解説します。
ターミナル操作に苦手意識がある非エンジニアも、VSCode 統合により Claude Code を「いつものエディタの一機能」として使えるようになります。
週1ニュースレター(無料)に登録すると、VSCode + Claude Code の新機能・キーバインド集が毎週木曜に届きます。
1. なぜ VSCode 統合が重要か
Claude Code はもともと CLI ツールですが、エディタ統合により:
- ファイルを開いている間に Claude にコメントできる
- 差分を視覚的にレビューできる
- コミット前のレビューを Claude にやらせる
- Cursor / Copilot と棲み分けて使える
特に非エンジニアにとってターミナル操作のハードルが消えるのが大きな利点です。
2. 公式 VSCode 拡張のインストール
VSCode の Extensions パネル(⌘+Shift+X)で「Claude Code」を検索 → Anthropic 公式拡張をインストール。
または CLI で:
code --install-extension anthropic.claude-code
3. 認証
拡張機能インストール後、コマンドパレット(⌘+Shift+P)で Claude: Sign In を実行。
ブラウザでログインすると、~/.config/claude/credentials.json が作成されます。
CLI 版で既にログイン済みなら、そのトークンが共有されるので追加作業不要。
4. 主要コマンド
| コマンド | 説明 |
|---|---|
Claude: Open Chat | サイドパネルでチャット開始 |
Claude: Edit Selection | 選択範囲を Claude に編集させる |
Claude: Explain Code | カーソル位置のコードを解説 |
Claude: Review Diff | git diff を Claude にレビューさせる |
Claude: Run Agent | .claude/agents/ 配下のエージェントを実行 |
Claude: Toggle Inline | インラインサジェスト切替 |
おすすめキーバインド(keybindings.json):
[
{ "key": "cmd+i", "command": "claude.editSelection" },
{ "key": "cmd+shift+i", "command": "claude.openChat" }
]
5. MCP 統合 — .mcp.json を VSCode 上から操作
VSCode 拡張は .mcp.json を自動検出し、定義された MCP サーバーをサイドバーから ON/OFF 切替できます。
GitHub / Slack / Notion を統合した状態で「PR レビュー」「Slack 報告」「Notion 議事録更新」を VSCode 上で完結。
6. インラインサジェスト vs Cursor
| 観点 | Claude Code 拡張 | Cursor |
|---|---|---|
| インラインサジェスト | あり(β) | あり(成熟) |
| 多ファイル横断編集 | 強い(Claude の長コンテキスト) | 強い |
| 価格 | Pro $20 / Max $200 | Pro $20 / Business $40 |
| MCP 対応 | 公式対応 | 限定的 |
| エージェント実行 | .claude/agents/ 直接実行 | コマンドベース |
| 一押しの用途 | 業務システム改修・MCP 連携 | 新規機能の高速実装 |
詳細: Cursor vs Claude Code 徹底比較
7. チーム運用 — .claude/ をリポジトリに含める
your-repo/
├── .claude/
│ ├── agents/ # チーム共通エージェント
│ ├── skills/ # コーディング規約・業務ルール
│ ├── hooks/ # 品質ゲート
│ └── settings.json # 共通設定
├── .mcp.json
└── .gitignore # .claude/projects/ はコミットしない
これでチーム全員が git pull するだけで同じエージェント・スキル環境を得られます。
8. 実用例 — Pull Request の自動レビュー
# CLI でも VSCode コマンドからでも可
claude -p --agent code-reviewer "ブランチ feature/login の変更を main と比較してレビュー"
.claude/agents/code-reviewer.md に「観点リスト」を書いておけば、毎回安定した品質のレビューが返ります。
9. トラブルシューティング
Q: 拡張が認証されない
A: ~/.config/claude/credentials.json を削除して Claude: Sign In を再実行。
Q: インラインサジェストが遅い
A: settings.json の "claude.inlineSuggestions.delay" を 500ms から 200ms に。
高頻度に呼ぶとコストが増えるので Pro プランは慎重に。
Q: VSCode を閉じるとエージェントが止まる
A: 仕様です。バックグラウンド実行は launchd / GitHub Actions に任せましょう。 詳細: Claude Code 自律運転設定
10. 次のステップ
VSCode のキーバインド最適化や チーム運用の知見共有は 週1ニュースレター(無料) で。
この記事の著者
claude-code-media 編集部/ Claude Code 専門編集チーム
Claude Code の非エンジニア向け業務効率化メディア『claude-code-lab.jp』を運営。フリーランス・中小企業・個人開発者向けに、実装テンプレ・業務自動化テクニック・Vibe Coding 入門を配信。
Related
続けて読む
- ·12分
Claude Code Skills × Subagents × Hooks 使い分け完全マップ【2026年5月】
Claude Code の 3 大拡張機構 Skills / Subagents / Hooks をどう使い分けるか、ユースケース別の意思決定フローと組み合わせパターンを実装例とともに整理。「結局どれを使えばいいか分からない」を 10 分で解決する 1 枚マップ付き。
- ·5分
Claude Code とは?できること・仕組み・料金を初心者向けに解説【2026】
Claude Code とは Anthropic が開発した AI 開発エージェント CLI です。ファイル編集・コマンド実行・業務自動化を自律的にこなします。ChatGPT との違い、できること、Pro/Max 料金プランまで初心者向けにわかりやすく解説します。
- ·13分
Claude Code スキル厳選 8 選【2026年5月版】即戦力テンプレ付き
Claude Code スキルファイル厳選 8 選【2026年5月版】。コーディング規約・PR レビュー自動化・テスト生成・GitHub Issue 修正・セキュリティチェックなど実務で即使える SKILL.md テンプレートを全スキルに付けて徹底解説します。
