Claude CodeをVS Codeで使う方法をお探しですね。

広告

VS CodeでClaude Codeを使ってみよう！導入から設定まで完全ガイド

プログラミングをしていると、「このコードどう書けばいいんだろう？」とか「バグの原因が分からない…」なんてことがよくありますよね。

そんな時に頼りになるのがAIアシスタント。

特にAnthropic社が提供する**Claude Code**は、プロジェクト全体のコードをしっかり理解して的確なアドバイスをくれる、とっても優秀なツールなんです。

この記事では、みなさんが普段使っているVS Codeで、Claude Codeをサクッと使えるようにする方法を詳しく解説していきます。

インストールの手順はもちろん、実際に使う時のコツや、Windows（WSL）ユーザーがハマりがちな注意点もしっかりカバーしています。

ブラウザとエディタを行ったり来たりする面倒な作業から解放されて、VS Codeの中だけで快適にコーディングできる環境を一緒に作っていきましょう！

1. まずは準備！Claude Codeをインストールしよう

VS CodeでClaude Codeを使い始める前に、いくつか準備しておくことがあります。

必要なもの

– **VS Code バージョン1.98.0以上**
古いバージョンだとうまく動かないことがあるので、まずはアップデートしておきましょう。

– **Anthropicのアカウント**
個人用のサブスクリプションか、会社・組織用のアカウントが必要です。

インストール手順

準備ができたら、さっそくインストールしていきます！

1. **拡張機能を探す**
VS Codeを開いて、Macなら「Cmd+Shift+X」、WindowsやLinuxなら「Ctrl+Shift+X」を押します。

検索窓に「Claude Code」と入力して、公式の拡張機能を見つけたら「インストール」をクリック。

2. **アイコンを確認**
インストールが終わると、エディタの右上や左側のサイドバーに**Sparkアイコン**（キラッとしたマーク）が表示されます。

3. **もしアイコンが見つからなかったら**
焦らなくて大丈夫！VS Codeを一度再起動するか、コマンドパレットから「Developer: Reload Window」を実行してみてください。

4. **サインイン**
初めて使う時は、Anthropicアカウントにサインインする必要があります。

画面の指示に従ってブラウザで認証を完了させれば、準備完了です！

2. 実際に使ってみよう！基本の操作とコツ

インストールと認証が済んだら、いよいよClaude Codeを使ってみましょう。

チャットパネルを開く

ツールバーやサイドバーにある**Sparkアイコン**をクリックすると、専用のチャットパネルが開きます。

このパネルはドラッグして好きな場所に移動できるので、自分の作業スタイルに合わせて配置してみてください。

– コードを書きながらチラッと見たい → サイドバーに配置
– 広い画面で使いたい → 新しいタブとして開く

「@-メンション」で的確な回答をもらう

Claude Codeを最大限に活用するための秘訣が、**「@-メンション」**です。

プロンプト入力欄で「@」と打つと、プロジェクト内のファイルやフォルダを指定できます。

例えば：

– `@index.js` → index.jsファイルの内容を読み込んで質問できる
– `@index.js#10-20` → 10行目から20行目だけに絞って質問できる
– エディタで選択した部分だけを対象にすることも可能

こうやって具体的にコードを指定することで、Claudeはより正確で役立つ回答をくれるようになります。

コードの変更提案を確認する

Claudeがコードの修正やリファクタリングを提案してくれた時は、元のコードと新しいコードが左右に並んで表示されます。

この**差分表示**を見ながら、

– 「この変更は良さそう！」→ 適用
– 「ちょっと違うかも…」→ 拒否して別の方法を相談

といった感じで、安心して判断できるようになっています。

3. 自分好みにカスタマイズしよう

Claude Codeは、細かい設定を変えることで、もっと使いやすくできます。

設定画面を開く

– Macなら「Cmd+,」、Windows/Linuxなら「Ctrl+,」を押して設定画面を開く
– 「Extensions」→「Claude Code」を選択

または、プロンプト入力欄で「/」を押して「General Config」を選ぶ方法もあります。

「Permission Mode」を調整する

特に便利なのが、**Permission Mode（許可モード）**の設定です。

– **デフォルト** → Claudeが何かする前に毎回確認してくれる（安全重視）
– **Planモード** → 実行内容の計画だけ見せて、承認を待つ
– **Autoモード** → 許可なしで自動的に編集を進める（スピード重視）

自分のプロジェクトやAIへの信頼度に合わせて選んでみてください。

その他の便利な設定

– **Use Terminal** → チェックを入れると、ターミナル上でClaudeが動くようになる（CLI派におすすめ）
– **複数のチャット履歴** → 別タブで開いて並行作業できる
– **プラグイン管理** → 「/plugins」で外部ツールとの連携を強化

いろいろ試して、自分に合った使い方を見つけてみてください！

4. Windows（WSL）で使う時の注意点

Windows環境でWSL（Windows Subsystem for Linux）を使っている人は、ちょっとした注意が必要です。

よくある問題

Windows側のVS Codeに拡張機能をインストールしただけだと、

– ファイルの読み込みが遅い
– 変更がすぐに反映されない

といった問題が起きることがあります。

正しい設定方法

WSL環境で快適に使うには、以下の手順を踏みましょう。

1. **WSLターミナルを開く**（Ubuntuなど）

2. **CLIをインストール**
“`bash

npm install -g @anthropic-ai/claude-code

“`

3. **WSLに接続してVS Codeを起動**
VS Code左下のリモート接続アイコン → 「Connect to WSL」を選択

4. **WSL側に拡張機能をインストール**
WSLに接続した状態で、改めて「Claude Code」拡張機能をインストール

ポイント

– CLI本体も拡張機能も、**両方ともWSL側に入れる**のがコツ
– プロジェクトのファイルも、WSLのファイルシステム内に置いておくとサクサク動きます

よくあるトラブル：「code .」で別のエディタが開いちゃう

ターミナルで「code .」と打った時、VS CodeじゃなくてCursorなど別のエディタが立ち上がってしまうことがあります。

**解決方法**

WSLのシェル設定ファイル（.bashrcや.zshrcなど）を開いて、VS Codeの正しいパスを指定するエイリアスを追加しましょう。

これで、ちゃんとVS Codeが開くようになります。

まとめ

Claude CodeをVS Codeで使えるようにすると、コーディングの効率がグッと上がります。

最初の設定はちょっと手間ですが、一度セットアップしてしまえば、あとはとっても快適です。

特に、

– **@-メンション**で的確に質問する
– **Permission Mode**を自分に合わせて調整する
– **WSLユーザーは正しい手順でインストール**する

この3つを押さえておけば、Claude Codeの力を最大限に引き出せます。

ぜひこの記事を参考に、快適なAIコーディング環境を作ってみてください。

きっと、「もっと早く使えばよかった！」と思えるはずですよ！

広告