【結論】VS Codeでは公式Extensionを使う
VS Code統合Terminalだけでなく、公式Claude Code Extensionを導入するとInline diff、@ mention、Plan reviewなどのGUI機能を利用できます。
Terminal版とExtensionは同じRepositoryで使えますが、同じFileを同時編集しないよう役割を分けます。
# VS Codeのコマンドパレットで実行:Extensionsを開く
# Mac: Cmd+Shift+X / Windows・Linux: Ctrl+Shift+X
# 検索欄で実行:Claude Code を検索して公式ExtensionをInstall
# VS Code統合ターミナルで実行:CLIを併用
claude具体的な手順・設定方法
- Project folderをVS Codeで開き、公式ExtensionをInstallして正規AccountでSign inします。
- Plan reviewとInline diffで変更内容を確認し、Source Control viewでGit差分を再確認します。
- Terminal task、Extension編集、Human編集が競合しないよう、担当FileやWorktreeを分けます。
実践プロンプト / 活用テクニック
VS Code向けの実践Promptです。
# Claude Codeパネル内で実行
@src/components/LoginForm.tsx を調査してください。
まずPlanだけ提示し、Validation追加後のInline diffと実行すべきTestを示してください。GUI差分を確認してから適用します。
注意点・よくあるエラーと対処法
非公式Extensionを誤ってInstallしないようPublisherを確認します。
Auto Saveそのものが必ず競合を起こすわけではありませんが、同じFileを複数Sessionで編集すると上書きRiskがあります。
Theme変更などのCommandはVersion差があるため、/helpとVS Code設定画面で現行機能を確認します。