Claude Code × VS Codeの実践ワークフロー

【結論】公式拡張で選択範囲・計画・差分を一つの画面で管理する

VS Codeでの最適な使い方は、統合ターミナルへCLIを常駐させる方法だけではありません。

公式Claude Code拡張を使うと、選択中のコードを自動参照し、@メンションで行範囲を固定し、Planとインライン差分をIDE内でレビューできます。

CLIはバッチ処理、拡張は対話的な実装と差分確認に使い分けると効率的です。

# CLIも併用するときだけ実行
cd my-project
code .
claude auth status --text

# VS Codeでは拡張機能ビューで
# 「Claude Code」を検索してInstall

具体的な手順・設定方法

1. 修正したい行を選択し、Option+KまたはAlt+Kで@参照をプロンプトへ挿入します。

   ファイル名だけでなく行範囲を渡すと、不要な探索を減らせます。

2. 最初はPlanを作らせ、対象ファイル、変更理由、テスト方法を確認します。

   計画に無関係なファイルが含まれていれば実装前に除外してください。

3. 差分を一件ずつ承認し、VS CodeのSource Controlで全変更を再確認します。

   型チェック、対象テスト、全体テストの順で検証します。

   npm run typecheck
   npm test -- Button
   npm test

実践プロンプト / 活用テクニック

画面上のエラーを説明するだけでなく、Problemsパネルの診断、対象行、再現手順を参照させると修正精度が上がります。

複数会話を使う場合は、調査、実装、レビューを分けても、同じファイルを同時編集しないようにしてください。

@src/components/Button.tsx#1-120 と @src/components/Button.test.tsx を対象にしてください。
現在の型エラーを説明し、公開Propsを変えない最小修正のPlanを作成してください。
承認後、変更を1つのdiffとして提示し、既存テストの削除やskipは行わないでください。
修正後に型チェックとButtonのテストだけを実行し、全体テストが必要か判断理由を示してください。

注意点・よくあるエラーと対処法

• 拡張が表示されない場合は、VS Codeのバージョン要件を確認し、「Developer: Reload Window」を実行します。

  ファイルを開いていないとエディタ上部のアイコンが見えない場合があります。

• 拡張内のチャット用CLIと統合ターミナルのCLIは別です。

  ターミナルで「claude」が見つからない場合は、スタンドアロンCLIを導入してください。

  claude --version