VSCode で始める Claude Code セットアップガイド

はじめに

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

Claude Code は Anthropic が提供するコーディング支援ツールです。ターミナルから使うイメージが強いですが、VSCode の拡張機能を使えばエディタ上で直接 Claude と対話しながら開発を進められます。今回は VSCode への導入から実際の使い方まで、セットアップの手順を中心にまとめます。

拡張機能のインストールと認証

VSCode の拡張機能マーケットプレイスで「Claude Code」を検索してインストールします。インストール後は VSCode のターミナルで claude コマンドを実行すると、初回はブラウザでの認証画面が開きます。Anthropic アカウントでログインすれば認証は完了です。組織アカウントで利用する場合は、管理者側で Claude Code サブスクリプションへのアクセス許可を有効にしておく必要があるため、事前に確認しておきましょう。

エディタ上での基本的な使い方

認証後はサイドパネルにチャット欄が表示され、開いているファイルの内容を自動でコンテキストとして渡しながら質問や修正依頼ができます。特に便利なのが、エラー箇所のコードを選択した状態で「このエラーを直して」と依頼すると、選択範囲を認識した上で修正案を提示してくれる点です。また、プロジェクトルートに CLAUDE.md を置いてプロジェクトの概要・技術スタック・コーディング規約を記述しておくと、毎回説明しなくても文脈を理解した回答が得られます。

VSCode 上での実践的な活用方法

Claude Code は VSCode のターミナルと統合されており、チャットで「このファイルをリファクタリングして」と指示するとファイルを直接編集してくれます。差分はエディタ上でそのまま確認・承認できるため、コードレビューの感覚で AI の提案を取り込めます。また settings.json に PreToolUse / PostToolUse フックを設定することで、ファイル編集の前後に自動でテストやフォーマッタを実行する仕組みも作れます。ターミナルを切り替えることなく、エディタの中で開発サイクルが完結するのが最大のメリットです。

【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc.　詳細はこちらから＞