VSCode設定｜Claude Code連携に最適なエディター環境の作り方
Claude Code連携向けVSCode完全セットアップ。インストール手順、GitLens・ESLint・Prettier等推奨拡張機能、settings.json設定、統合ターミナル最適化まで、エンジニアが即実装できる実践ガイド。
VSCode設定｜Claude Code連携に最適なエディター環境の作り方
はじめに
Claude Codeを実務で使うなら、エディター環境の整備は避けられません。自分が実際に試してみると、VSCode（Visual Studio Code）はAI支援との相性が良く、拡張機能と設定を適切に入れるだけで開発スピードが一段階上がります。この記事では、Claude Code連携を想定した実践的なVSCode環境の構築方法をお伝えします。
1. VSCodeのインストール
ステップ1: 公式サイトからダウンロード
https://code.visualstudio.com/ にアクセスして、お使いのOSに合わせたインストーラーをダウンロードしてください。
- Windows: インストーラーを実行する際に「PATHに追加」を有効にしておくと後々便利です
- macOS: DMGファイルをアプリケーションフォルダへドラッグするだけで完了
- Linux: パッケージマネージャー経由のインストールが手軽です
ステップ2: LinuxでのインストールコマンドExample
# Ubuntu/Debian
wget https://code.visualstudio.com/sha/download?build=stable&os=linux-deb -O code.deb
sudo dpkg -i code.deb
# Fedora/RHEL
rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo dnf install code
ステップ3: インストール確認
code --version
バージョン番号が出ればインストール完了です。
2. Claude Code連携に必須の拡張機能
拡張機能のインストール方法
VSCodeを立ち上げて、左サイドバーの「拡張機能」アイコンをクリック（ショートカットは Ctrl+Shift+X）してから、各拡張機能を検索してインストールするのが基本です。コマンドラインで一括入れたい場合はこちら：
code --install-extension <extension-id>
推奨拡張機能一覧
GitLens
Publisher: Eric Amodio
Extension ID: eamodio.gitlens
用途: Git履歴の可視化と変更箇所の追跡
GitLensはコード行に誰がいつ変更したかを表示してくれます。Claude Codeで生成されたコードがどこで追加されたのか、後で見直すときに非常に便利です。ブランチ管理も効率よくできるようになります。
ESLint
Publisher: Microsoft
Extension ID: dbaeumer.vscode-eslint
用途: JavaScriptコードの静的解析
入力しながらリアルタイムで構文エラーと品質の問題を検出します。Claude Codeが生成したJavaScriptコードをそのまま使うのではなく、エラーチェックを自動化できるので安心です。
Prettier
Publisher: Prettier
Extension ID: esbenp.prettier-vscode
用途: コードフォーマッター
ファイルを保存するたびに、コードの形式を自動的に整えてくれます。Claude Codeの出力は人間が読みやすい状態に自動調整されるので、スタイル統一の手間が減ります。
Thunder Client（またはREST Client）
Publisher: rangav
Extension ID: rangav.vscode-thunder-client
用途: APIテスト
Claude CodeでAPIを実装した際に、すぐその場で動作確認ができるのは大きな利点です。わざわざ別のツールを立ち上げずに済みます。
Path Intellisense
Publisher: Christian Kohler
Extension ID: christian-kohler.path-intellisense
用途: ファイルパス補完
インポート文やファイル参照を書くとき、パスの候補を自動補完してくれます。タイポを減らせるのと同時に、入力効率がぐんと上がります。