CC
CCJK
チュートリアル

VS Code統合：シームレスなAI支援開発

究極のAI支援開発体験のためにVS Codeをセットアップします。拡張機能、キーバインディング、ワークフローを設定します。

C
CCJK Team2025年1月2日
10 分で読めます
1,761 回閲覧
VS Code統合：シームレスなAI支援開発

VS Code統合：シームレスなAI支援開発

Claude Codeはターミナルで実行されますが、VS Codeと統合することで強力な開発環境を作成できます。このガイドでは、究極のAI支援ワークフローをセットアップする方法を示します。

ターミナル統合

VS Codeの統合ターミナルを使用

最もシンプルな統合は、VS CodeのターミナルでClaude Codeを実行することです：

  1. VS Codeを開く
  2. Ctrl+` を押してターミナルを開く
  3. claudeまたはccjkを実行

分割ターミナルワークフロー

生産的な分割画面セットアップを作成：

┌─────────────────────────────────────────────────────────┐
│                    VS Code エディタ                      │
│  ┌─────────────────────────────────────────────────────┐│
│  │                                                      ││
│  │              コードファイル                          ││
│  │                                                      ││
│  └─────────────────────────────────────────────────────┘│
│  ┌──────────────────────┬──────────────────────────────┐│
│  │   Claude Code        │    通常のターミナル          ││
│  │   (AIアシスタント)   │    (npm, git, など)          ││
│  └──────────────────────┴──────────────────────────────┘│
└─────────────────────────────────────────────────────────┘

キーボードショートカットでセットアップ：

hljs json
// keybindings.json
{
  "key": "ctrl+shift+c",
  "command": "workbench.action.terminal.newWithProfile",
  "args": {
    "profileName": "Claude Code"
  }
}

VS Code設定

推奨設定

hljs json
// settings.json
{
  // Claude Code用のターミナル設定
  "terminal.integrated.profiles.linux": {
    "Claude Code": {
      "path": "bash",
      "args": ["-c", "ccjk"],
      "icon": "robot"
    }
  },

  // リアルタイムAI認識のための自動保存
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,

  // ファイル変更を即座に表示
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true
  },

  // AIコラボレーション用のエディタ設定
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,

  // Git統合
  "git.enableSmartCommit": true,
  "git.autofetch": true
}

ワークスペース設定

プロジェクト固有の設定を作成：

hljs json
// .vscode/settings.json
{
  "terminal.integrated.defaultProfile.linux": "Claude Code",

  // プロジェクト固有の除外
  "files.exclude": {
    "**/.claude": false,  // .claudeフォルダを表示
    "**/node_modules": true
  },

  // 検索除外（.claudeignoreと一致）
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.next": true
  }
}

キーボードショートカット

必須キーバインディング

hljs json
// keybindings.json
[
  // Claude Codeターミナルへのクイックアクセス
  {
    "key": "ctrl+alt+c",
    "command": "workbench.action.terminal.focus"
  },

  // エディタとターミナルの切り替え
  {
    "key": "ctrl+`",
    "command": "workbench.action.terminal.toggleTerminal"
  },

  // 選択範囲をクリップボードにコピー（Claudeに貼り付けるため）
  {
    "key": "ctrl+shift+y",
    "command": "editor.action.clipboardCopyAction"
  },

  // カーソル位置のファイルを開く（Claudeがファイルに言及したとき）
  {
    "key": "ctrl+shift+o",
    "command": "workbench.action.quickOpen"
  },

  // 変更されたファイルを表示
  {
    "key": "ctrl+shift+g",
    "command": "workbench.view.scm"
  },

  // 問題パネルを開く
  {
    "key": "ctrl+shift+m",
    "command": "workbench.actions.view.problems"
  }
]

タスク統合

Claude Codeタスク

hljs json
// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "AI Code Review",
      "type": "shell",
      "command": "ccjk review",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Generate Tests",
      "type": "shell",
      "command": "ccjk test ${file}",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Generate Commit Message",
      "type": "shell",
      "command": "ccjk commit",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Update Documentation",
      "type": "shell",
      "command": "ccjk doc ${fileDirname}",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}

タスクの実行

Ctrl+Shift+P → Tasks: Run Task → AI Code Review

スニペット

Claude Codeスニペット

hljs json
// .vscode/claude.code-snippets
{
  "AI Review Request": {
    "prefix": "aireview",
    "body": [
      "以下のコードをレビューしてください：",
      "",
      "```${1:typescript}",
      "${TM_SELECTED_TEXT}",
      "```",
      "",
      "以下に焦点を当ててください：",
      "- ${2:セキュリティ}",
      "- ${3:パフォーマンス}",
      "- ${4:ベストプラクティス}"
    ],
    "description": "AIコードレビューリクエストを作成"
  },

  "AI Test Generation": {
    "prefix": "aitest",
    "body": [
      "以下の関数のテストを生成してください：",
      "",
      "```${1:typescript}",
      "${TM_SELECTED_TEXT}",
      "```",
      "",
      "要件：",
      "- ${2:Jest}を使用",
      "- ハッピーパスとエッジケースをカバー",
      "- ${3:90}%以上のカバレッジ"
    ],
    "description": "AIテスト生成リクエストを作成"
  },

  "AI Refactor Request": {
    "prefix": "airefactor",
    "body": [
      "以下のコードをリファクタリングしてください：",
      "",
      "```${1:typescript}",
      "${TM_SELECTED_TEXT}",
      "```",
      "",
      "目標：",
      "- ${2:可読性を向上}",
      "- ${3:パフォーマンスを最適化}",
      "- ${4:既存のテストを保持}"
    ],
    "description": "AIリファクタリングリクエストを作成"
  }
}

拡張機能の推奨

必須拡張機能

hljs json
// .vscode/extensions.json
{
  "recommendations": [
    // Git統合
    "eamodio.gitlens",

    // コード品質
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",

    // テスト
    "orta.vscode-jest",

    // ドキュメント
    "yzhang.markdown-all-in-one",

    // ユーティリティ
    "christian-kohler.path-intellisense",
    "formulahendry.auto-rename-tag",

    // ターミナル強化
    "tyriar.terminal-tabs"
  ]
}

ワークフロー例

1. 機能開発ワークフロー

1. VS Codeで新しいブランチを作成
   Ctrl+Shift+P → Git: Create Branch

2. Claude Codeターミナルを開く
   Ctrl+Alt+C

3. 機能を実装するようリクエスト
   "ユーザー認証機能を実装してください"

4. Claudeがファイルを作成/編集
   エディタで変更を確認

5. テストを生成
   Ctrl+Shift+P → Tasks: Run Task → Generate Tests

6. コードをレビュー
   Ctrl+Shift+P → Tasks: Run Task → AI Code Review

7. コミット
   Ctrl+Shift+P → Tasks: Run Task → Generate Commit Message

2. バグ修正ワークフロー

1. 問題パネルでエラーを確認
   Ctrl+Shift+M

2. エラーコードを選択
   Ctrl+Shift+Y でコピー

3. Claude Codeに貼り付け
   "このエラーを修正してください：[エラー]"

4. 修正を適用
   Claudeの提案を確認して適用

5. テストを実行
   npm test

6. 変更をコミット

3. コードレビューワークフロー

1. PRブランチをチェックアウト
   Git: Checkout to...

2. 変更されたファイルを表示
   Ctrl+Shift+G

3. 各ファイルをレビュー
   ファイルを開いてCtrl+Shift+P → Tasks: Run Task → AI Code Review

4. フィードバックを収集
   レビューコメントを記録

5. 作成者に返信

デバッグ統合

デバッグ設定

hljs json
// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug with AI Assistance",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "AI Code Review",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "console": "integratedTerminal"
    }
  ]
}

デバッグワークフロー

1. ブレークポイントを設定
2. F5でデバッグを開始
3. 問題を観察
4. Claude Codeに説明
   "変数xが予期しない値を持っています：[値]"
5. Claudeの提案を適用
6. デバッグを続行

カスタムコマンド

VS Codeコマンドの作成

hljs typescript
// .vscode/commands.ts
import * as vscode from 'vscode';
import { exec } from 'child_process';

export function activate(context: vscode.ExtensionContext) {
  // AIレビューコマンド
  let reviewCommand = vscode.commands.registerCommand(
    'claude.review',
    async () => {
      const editor = vscode.window.activeTextEditor;
      if (!editor) return;

      const filePath = editor.document.fileName;
      const terminal = vscode.window.createTerminal('Claude Review');
      terminal.sendText(`ccjk review ${filePath}`);
      terminal.show();
    }
  );

  // テスト生成コマンド
  let testCommand = vscode.commands.registerCommand(
    'claude.generateTests',
    async () => {
      const editor = vscode.window.activeTextEditor;
      if (!editor) return;

      const filePath = editor.document.fileName;
      const terminal = vscode.window.createTerminal('Claude Test');
      terminal.sendText(`ccjk test ${filePath}`);
      terminal.show();
    }
  );

  context.subscriptions.push(reviewCommand, testCommand);
}

ベストプラクティス

1. ワークスペースの整理

project/
├── .vscode/
│   ├── settings.json      # プロジェクト設定
│   ├── tasks.json         # Claude Codeタスク
│   ├── launch.json        # デバッグ設定
│   ├── extensions.json    # 推奨拡張機能
│   └── claude.code-snippets  # カスタムスニペット
├── .claude/
│   ├── config.yaml        # Claude Code設定
│   └── skills/            # カスタムスキル
└── src/

2. 効率的なキーボード使用

Ctrl+Alt+C    → Claude Codeターミナルにフォーカス
Ctrl+`        → ターミナルを切り替え
Ctrl+Shift+P  → コマンドパレット
Ctrl+P        → ファイルを開く
Ctrl+Shift+F  → プロジェクト全体を検索

3. コンテキストの共有

# ファイルパスをClaude Codeに簡単に共有
Ctrl+K Ctrl+P → ファイルパスをコピー

# 選択範囲をコピー
Ctrl+Shift+Y → 選択範囲をコピー

# エラーメッセージをコピー
問題パネルから右クリック → コピー

トラブルシューティング

一般的な問題

問題1：ターミナルが応答しない

hljs json
// settings.json
{
  "terminal.integrated.shellIntegration.enabled": true,
  "terminal.integrated.enablePersistentSessions": false
}

問題2：ファイル変更が反映されない

hljs json
{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 500
}

問題3：パフォーマンスの問題

hljs json
{
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/.claude-cache/**": true
  }
}

高度な統合

カスタム拡張機能の作成

hljs typescript
// extension.ts
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // ステータスバーアイテム
  const statusBar = vscode.window.createStatusBarItem(
    vscode.StatusBarAlignment.Right,
    100
  );
  statusBar.text = "$(robot) Claude Code";
  statusBar.command = "claude.openTerminal";
  statusBar.show();

  // ホバープロバイダー
  const hoverProvider = vscode.languages.registerHoverProvider(
    { scheme: 'file', language: 'typescript' },
    {
      provideHover(document, position, token) {
        return new vscode.Hover('Claude Codeでレビューするには Ctrl+Alt+R を押してください');
      }
    }
  );

  context.subscriptions.push(statusBar, hoverProvider);
}

まとめ

VS CodeとClaude Codeの統合により、強力なAI支援開発環境を作成できます：

  1. ターミナル統合：分割画面ワークフローを使用
  2. キーボードショートカット：効率的なナビゲーション
  3. タスク自動化：一般的なAI操作を自動化
  4. カスタムスニペット：AIリクエストを迅速に作成
  5. 拡張機能：機能を強化
  6. ワークフロー：一貫したプロセスを確立

適切なセットアップにより、エディタとAIアシスタント間をシームレスに移動できます。

次へ：マルチプロバイダーサポートで異なるAIモデルを使用する方法を学びます。

よくある質問

VS Code拡張機能としてClaude Codeを使用できますか？

現在、Claude Codeはターミナルベースのツールですが、VS Codeと緊密に統合できます。専用の拡張機能は開発中です。

複数のClaude Codeセッションを実行できますか？

はい、複数のターミナルタブで異なるClaude Codeセッションを実行できます。

設定を同期できますか？

はい、VS Code設定同期を使用して、すべてのデバイスで設定を同期できます。

リモート開発で動作しますか？

はい、VS Code Remote Development拡張機能と互換性があります。

タグ

#vscode#ide#integration#productivity#setup

この記事をシェア

继续阅读

関連記事