Back to Blog

Claude Code VSCode Extension：拡張機能の完全ガイド

Claude Code VSCode Extension の有無と活用法を解説。公式拡張機能はないものの、タスク機能やスニペットで連携可能。VSCodeでClaude Codeを効率的に使う実践的な方法を紹介。

59 min read

「Claude Code用のVSCode拡張機能はあるの？」という疑問をお持ちの方へ。本記事では、Claude CodeとVSCode Extensionの関係、利用可能な拡張機能、そして効率的な連携方法について詳しく解説します。

Claude Code VSCode Extension の現状

公式拡張機能の有無

2025年1月時点の状況：

❌ 公式のClaude Code拡張機能は存在しません

Claude CodeはCLIツールとして提供されており、VSCode拡張機能として直接統合されていません。

理由：

  • CLI設計により柔軟性が高い

  • 任意のエディタと組み合わせ可能

  • ターミナルベースで軽量動作

代替となる使い方

Claude Code専用拡張機能はありませんが、以下の方法でVSCodeと効果的に連携できます：

  1. 統合ターミナルで使用

  2. Tasks機能で自動化

  3. 関連拡張機能との組み合わせ

VSCodeでClaude Codeを拡張する方法

1. タスク拡張機能の活用

.vscode/tasks.jsonを作成：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Claude Code: Start",
      "type": "shell",
      "command": "claude",
      "presentation": {
        "reveal": "always",
        "panel": "dedicated",
        "focus": true
      },
      "problemMatcher": []
    },
    {
      "label": "Claude Code: Quick Review",
      "type": "shell",
      "command": "echo '/review' | claude",
      "presentation": {
        "reveal": "always"
      }
    },
    {
      "label": "Claude Code: Commit Changes",
      "type": "shell",
      "command": "claude",
      "args": ["--prompt", "git statusを確認して適切にコミットして"],
      "problemMatcher": []
    }
  ]
}

使い方：

  • Ctrl + Shift + P → “Run Task”

  • タスク選択で即座に実行

2. スニペット拡張

.vscode/snippets/claude-prompts.code-snippets：

{
  "Claude: Code Review": {
    "prefix": "claude-review",
    "body": [
      "以下のコードをレビューしてください：",
      "",
      "【観点】",
      "- セキュリティ",
      "- パフォーマンス",
      "- 可読性",
      "- ベストプラクティス",
      "",
      "${CLIPBOARD}"
    ],
    "description": "Claude Code用レビュープロンプト"
  },
  "Claude: Generate Test": {
    "prefix": "claude-test",
    "body": [
      "以下の関数のテストコードを作成してください：",
      "",
      "${CLIPBOARD}",
      "",
      "【要件】",
      "- 正常系のテスト",
      "- 異常系のテスト",
      "- エッジケースのカバー"
    ],
    "description": "テストコード生成プロンプト"
  },
  "Claude: Refactor": {
    "prefix": "claude-refactor",
    "body": [
      "以下のコードをリファクタリングしてください：",
      "",
      "${CLIPBOARD}",
      "",
      "【方針】",
      "- DRY原則に従う",
      "- 関数を適切なサイズに分割",
      "- 型安全性を向上"
    ],
    "description": "リファクタリングプロンプト"
  }
}

3. キーバインド拡張

.vscode/keybindings.json：

[
  {
    "key": "ctrl+shift+c",
    "command": "workbench.action.tasks.runTask",
    "args": "Claude Code: Start"
  },
  {
    "key": "ctrl+shift+r",
    "command": "workbench.action.tasks.runTask",
    "args": "Claude Code: Quick Review"
  },
  {
    "key": "ctrl+shift+t",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "name": "Claude: Generate Test"
    }
  }
]

連携に便利なVSCode拡張機能

Claude Code自体の拡張機能はありませんが、以下の拡張機能と組み合わせることで強力になります。

1. Task Runner系拡張機能

Task Explorer

インストール：

ext install spmeesseman.vscode-taskexplorer

メリット：

  • タスクを視覚的に管理

  • ワンクリックでClaude Code起動

  • タスク履歴の確認

設定例：

{
  "taskExplorer.enableExplorerView": true,
  "taskExplorer.pathToPrograms": {
    "claude": "claude"
  }
}

2. ターミナル強化系

Terminal Tabs

インストール：

ext install Tyriar.terminal-tabs

活用法：

  • Claude Code専用タブを作成

  • 複数プロジェクトで並行作業

  • タブ間の素早い切り替え

Terminal Command Keys

インストール：

ext install petekinnecom.terminal-command-keys

設定例：

{
  "terminalCommandKeys.commands": [
    {
      "key": "ctrl+1",
      "command": "claude"
    }
  ]
}

3. Git連携系

GitLens

Claude Codeとの連携：

# GitLensで変更を確認
# ↓
# Claude Codeでコミットメッセージ生成
> git diffを確認して適切なコミットメッセージを提案して

設定：

{
  "gitlens.codeLens.enabled": true,
  "gitlens.currentLine.enabled": true,
  "gitlens.hovers.currentLine.over": "line"
}

4. コードアクション系

Error Lens

メリット：

  • エラーがインラインで表示

  • Claude Codeへの連携が容易

ワークフロー：

1. Error Lensがエラーを表示
2. エラーをコピー
3. Claude Codeに修正依頼
4. 修正内容を確認

5. REST Client

API開発時の連携：

### ユーザー一覧取得
GET https://api.example.com/users
Content-Type: application/json

###

Claude Codeで処理コード生成：

上記のAPIレスポンスを処理するTypeScriptコードを書いて

カスタム拡張機能の作成

公式拡張機能がない場合、自作することも可能です。

簡易的なコマンド拡張

package.json：

{
  "name": "claude-code-helper",
  "displayName": "Claude Code Helper",
  "description": "Helper extension for Claude Code",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.85.0"
  },
  "activationEvents": [],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "claude-code-helper.startClaude",
        "title": "Start Claude Code"
      },
      {
        "command": "claude-code-helper.reviewCode",
        "title": "Claude: Review Selected Code"
      }
    ],
    "keybindings": [
      {
        "command": "claude-code-helper.startClaude",
        "key": "ctrl+shift+c",
        "mac": "cmd+shift+c"
      }
    ]
  }
}

extension.js：

const vscode = require('vscode');

function activate(context) {
  // Claude Code起動コマンド
  let startClaude = vscode.commands.registerCommand(
    'claude-code-helper.startClaude',
    function () {
      const terminal = vscode.window.createTerminal('Claude Code');
      terminal.show();
      terminal.sendText('claude');
    }
  );

  // コードレビューコマンド
  let reviewCode = vscode.commands.registerCommand(
    'claude-code-helper.reviewCode',
    function () {
      const editor = vscode.window.activeTextEditor;
      if (editor) {
        const selection = editor.selection;
        const text = editor.document.getText(selection);

        const terminal = vscode.window.createTerminal('Claude Code');
        terminal.show();
        terminal.sendText('claude');

        // プロンプトをクリップボードにコピー
        vscode.env.clipboard.writeText(
          `以下のコードをレビューしてください：\n\n${text}`
        );

        vscode.window.showInformationMessage(
          'レビュープロンプトをクリップボードにコピーしました'
        );
      }
    }
  );

  context.subscriptions.push(startClaude);
  context.subscriptions.push(reviewCode);
}

module.exports = {
  activate
};

インストール方法

# 拡張機能フォルダに配置
cp -r claude-code-helper ~/.vscode/extensions/

# VSCodeを再起動

Extension Packの作成

関連する拡張機能をまとめてインストールできるパッケージを作成：

package.json：

{
  "name": "claude-code-extension-pack",
  "displayName": "Claude Code Extension Pack",
  "description": "Essential extensions for Claude Code development",
  "version": "1.0.0",
  "engines": {
    "vscode": "^1.85.0"
  },
  "categories": [
    "Extension Packs"
  ],
  "extensionPack": [
    "eamodio.gitlens",
    "usernamehw.errorlens",
    "spmeesseman.vscode-taskexplorer",
    "tyriar.terminal-tabs",
    "humao.rest-client",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

ベストプラクティス

1. ワークスペース設定の活用

各プロジェクトに.vscode/フォルダを作成：

.vscode/
├── settings.json       # プロジェクト固有設定
├── tasks.json          # Claude Codeタスク
├── keybindings.json    # カスタムキーバインド
└── snippets/           # プロンプトスニペット
    └── claude.code-snippets

2. テンプレートプロジェクトの作成

# テンプレートプロジェクト作成
mkdir claude-code-template
cd claude-code-template

# 必要なファイルをセットアップ
# .vscode/
# .claude/
# package.json

新しいプロジェクト開始時にテンプレートをコピー。

3. チーム共有設定

リポジトリに含めるファイル：

✅ .vscode/settings.json     # チーム共通設定
✅ .vscode/tasks.json        # 共通タスク
✅ .vscode/extensions.json   # 推奨拡張機能
✅ .claude/CLAUDE.md         # プロジェクトルール
❌ .vscode/keybindings.json  # 個人設定

.vscode/extensions.json：

{
  "recommendations": [
    "eamodio.gitlens",
    "usernamehw.errorlens",
    "spmeesseman.vscode-taskexplorer",
    "dbaeumer.vscode-eslint"
  ]
}

トラブルシューティング

Q1: タスクが動作しない

確認事項：

{
  "terminal.integrated.automationProfile.windows": {
    "path": "powershell.exe"
  }
}

Q2: キーバインドが効かない

競合確認：

  1. Ctrl + K, Ctrl + Sでキーバインド一覧

  2. 競合をチェック

  3. 別のキーに変更

Q3: スニペットが表示されない

設定確認：

{
  "editor.snippetSuggestions": "top",
  "editor.tabCompletion": "on"
}

まとめ

Claude Code VSCode Extensionについてのポイント：

❌ 公式拡張機能は存在しない

  • CLIツールとして提供

  • 拡張機能化の予定は不明

✅ 代替手段は豊富

  • Tasks機能で自動化

  • 関連拡張機能との連携

  • カスタム拡張機能の作成可能

✅ 効率的な使い方

  • スニペットでプロンプト定型化

  • キーバインドで高速操作

  • ワークスペース設定でチーム共有

公式拡張機能がなくても、VSCodeの柔軟な機能を活用することで、Claude Codeを快適に使用できます。自分のワークフローに合わせてカスタマイズしていきましょう！

関連記事：

  • Claude Code VSCode 使い方

  • Claude Code カスタムコマンド作成

  • Claude Code 効率化テクニック

Related Articles

Claude Code Windows Serena完全ガイド - Windows環境でセマンティックコード分析を実現
Windows環境でClaude CodeとSerena MCPを連携させる方法を徹底解説。PowerShell特有の問題と解決策、実践的な活用方法まで詳しく紹介します。
Claude Code Windows使い方完全ガイド - 初心者から実践まで徹底解説
Windows環境でのClaude Codeの使い方を初心者向けに徹底解説。インストールから基本操作、実践的な活用方法まで詳しく紹介します。
Claude Code Windows対応完全ガイド - インストール方法と使い方を徹底解説
Claude CodeのWindows対応状況を徹底解説。ネイティブインストール、WSL、VSCode拡張の3つの方法と、それぞれの特徴・使い方を詳しく紹介します。