Claude Codeとターミナル・IDEの連携

【結論】ターミナルとIDEを安全に併用する

VS Codeでは公式Claude Code拡張が推奨され、統合ターミナルからCLIを使う方法も選べます。

開発サーバーなどの永続プロセスは別ターミナルで実行し、Claude Codeの対話とログを分離します。

未保存バッファとClaude Codeのファイル編集が競合しないよう、変更前後に保存とGit差分確認を行います。

# ターミナル1で実行：開発サーバーを起動
npm run dev
# ターミナル2で実行：Claude Codeを起動
claude
# 起動後のセッション内で実行：現在の状態を確認
/status
# ターミナルで実行：変更差分を確認
git diff --stat

具体的な手順・設定方法

1. VS Code拡張またはCLIのどちらを主に使うか決めます。

2. 開発サーバー、テスト監視、Claude Codeを別ターミナルへ分離します。

3. 編集後にLSP診断、Formatter、テスト、ブラウザ表示、Git差分を確認します。

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

# 起動後のセッション内で入力
Header.tsxだけを対象に余白と固定表示を改善してください。
最初に変更案を説明し、承認後に最小差分で編集してください。
開発サーバーの起動、依存追加、Git操作は行わないでください。

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

Claude Codeはエディタで現在開いている未保存内容を必ず把握するわけではありません。

永続プロセスをバックグラウンド実行できる環境もありますが、停止方法とログを確認します。

同じファイルをFormatter、拡張機能、Claude Codeで同時編集しないでください。