Claude CodeをVSCodeやCursorと連携する
Claude Codeは､コンソールからしか使えないと思っていたら､
公式からVSコードの拡張機能がリリースされていました｡
また､Cursorとも簡単に連携できます
この機会にClaudeProを契約して開発環境を更新しましょう｡
事前準備
npmが必要なのでインストールされていない場合はインストールしましょう
brew install npm
次に､Claude Codeをインストールします｡
npm install -g @anthropic-ai/claude-code
バージョンを確認します｡
claude -v
1.0.34 (Claude Code)
初期設定
claude
と入力すると初期設定です｡
Claude Proのアカウントでログインする必要があるのでログインします｡
遷移先でキーが表示されるのでコピーします｡
コンソールに入力します
VSCodeの拡張機能
VSCodeの拡張機能から｢Claude Code｣と入力してインストールします
VSCodeを再起動すると右上にウニみたいなアイコンがあるのでクリックします｡
するとチャット画面が出ます｡
あとは自由に使えるようになります｡
Cursorとの連携
Cursorとの連携はCursorを起動した状態で
Macのターミナルから
Claude
と入力し
/ide
と入力するとCursorが選択できます｡
1.Cursorを選びEnter
選択後は右上にウニみたいなアイコンが出るのでクリックするとチャット画面が表示されます
この場合は一工夫必要です｡
VSCodeとの連携で拡張機能をインストールしておきます｡
npm list -g @anthropic-ai/claude-code
でインストール先のディレクトリを探します｡
インストール先がわかったら拡張機能を探します｡
find /opt/homebrew/lib -name "claude-code.vsix" -type f
/opt/homebrew/lib/node_modules/@anthropic-ai/claude-code/vendor/claude-code.vsix
拡張機能をわかりやすいディレクトリにコピーします
cp /opt/homebrew/lib/node_modules/@anthropic-ai/claude-code/vendor/claude-code.vsix /Users/[user-name]/Downloads
Cursorを起動し､パレットを起動します
vsixと入力し､拡張機能をインストールします｡
Cursor再起動後､ターミナルからClaudeと入力し､/ideで表示されるようになります｡
最後に
ClaudeCodeはコンソールから実行していましたが
VSCodeやCursorなどIDEと簡単に連携できるようになりました｡
この機会にClaudeProを契約し､開発環境を更新しましょう｡
Discussion