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"
  }
]

任务集成

创建 VS Code 任务

hljs json
// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "AI: 审查当前文件",
      "type": "shell",
      "command": "ccjk review ${file}",
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      },
      "problemMatcher": []
    },
    {
      "label": "AI: 生成测试",
      "type": "shell",
      "command": "ccjk test generate ${file}",
      "presentation": {
        "reveal": "always"
      }
    },
    {
      "label": "AI: 文档函数",
      "type": "shell",
      "command": "ccjk docs function ${file}:${lineNumber}",
      "presentation": {
        "reveal": "always"
      }
    },
    {
      "label": "AI: 解释选中内容",
      "type": "shell",
      "command": "echo '${selectedText}' | ccjk explain",
      "presentation": {
        "reveal": "always"
      }
    }
  ]
}

使用快捷键运行任务

hljs json
// keybindings.json
[
  {
    "key": "ctrl+shift+r",
    "command": "workbench.action.tasks.runTask",
    "args": "AI: 审查当前文件"
  },
  {
    "key": "ctrl+shift+t",
    "command": "workbench.action.tasks.runTask",
    "args": "AI: 生成测试"
  }
]

AI 提示代码片段

创建提示片段

hljs json
// .vscode/claude.code-snippets
{
  "AI 审查请求": {
    "prefix": "aireview",
    "body": [
      "// AI 审查请求：",
      "// 请从以下方面审查此代码：",
      "// - ${1:正确性}",
      "// - ${2:性能}",
      "// - ${3:安全性}",
      "// - ${4:最佳实践}",
      "$0"
    ],
    "description": "AI 代码审查请求模板"
  },

  "AI 实现请求": {
    "prefix": "aiimpl",
    "body": [
      "// AI 实现请求：",
      "// 任务：${1:描述}",
      "// 要求：",
      "// - ${2:要求 1}",
      "// - ${3:要求 2}",
      "// 约束：",
      "// - ${4:约束}",
      "$0"
    ],
    "description": "AI 实现请求模板"
  },

  "AI 调试请求": {
    "prefix": "aidebug",
    "body": [
      "// AI 调试请求：",
      "// 预期：${1:预期行为}",
      "// 实际：${2:实际行为}",
      "// 复现步骤：",
      "// 1. ${3:步骤}",
      "$0"
    ],
    "description": "AI 调试请求模板"
  }
}

扩展推荐

推荐扩展

创建扩展文件：

hljs json
// .vscode/extensions.json
{
  "recommendations": [
    // 必备
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-typescript-next",

    // Git 集成
    "eamodio.gitlens",
    "mhutchie.git-graph",

    // 生产力
    "streetsidesoftware.code-spell-checker",
    "usernamehw.errorlens",
    "gruntfuggly.todo-tree",

    // 终端增强
    "tyriar.sort-lines",

    // Markdown（用于 AI 响应）
    "yzhang.markdown-all-in-one",
    "bierner.markdown-mermaid"
  ]
}

工作流示例

工作流 1：AI 辅助功能开发

1. 规划（在 Claude Code 终端中）：

   你：我需要添加用户认证。让我们规划一下方法。
   

2. 实现（Claude 编辑文件，你在 VS Code 中观看）：

   你：先实现登录端点。
   

3. 审查（使用 VS Code 的差异视图）：

   • Git 更改出现在源代码管理面板中
   • 审查每个文件的更改

4. 测试（分屏终端）：

   # 终端 1：Claude Code
   你：为认证模块生成测试
   
   # 终端 2：运行测试
   npm test
   

工作流 2：调试会话

1. 复现（在 VS Code 中）：

   • 设置断点
   • 运行调试器

2. 分析（在 Claude Code 中）：

   你：应用在 userService.js 第 45 行崩溃。
   这是堆栈跟踪：[粘贴]
   

3. 修复（Claude 建议，你验证）：

   • Claude 提出修复方案
   • 你在 VS Code 中审查
   • 接受或修改

工作流 3：代码审查

1. 在 VS Code 中打开 PR 差异（GitLens）

2. 在 Claude Code 中请求审查：

   你：审查这个 PR 的更改，重点关注安全性
   

3. 应用建议：

   • Claude 识别问题
   • 你在 VS Code 中导航到文件
   • 进行修正

技巧和窍门

1. 快速文件导航

当 Claude 提到文件时：

• Ctrl+P → 输入文件名
• 点击终端中的文件路径（如果支持）

2. 高效复制代码

在 VS Code 中选择代码：

• Ctrl+Shift+Y → 带格式复制
• 粘贴到 Claude Code 对话中

3. 并排比较

当 Claude 生成代码时：

1. 复制到剪贴板
2. Ctrl+N 新建文件
3. 粘贴并与原始代码比较

4. 终端历史

导航 Claude Code 历史：

• ↑ / ↓ 查看之前的命令
• Ctrl+R 搜索

故障排除

终端无响应

hljs bash
# 重置终端
Ctrl+C  # 取消当前操作
clear   # 清屏

文件更改未检测到

hljs json
// settings.json
{
  "files.watcherExclude": {
    // 移除有问题的排除项
  }
}

性能问题

hljs json
// settings.json
{
  "files.exclude": {
    "**/node_modules": true,
    "**/.git": true
  },
  "search.followSymlinks": false
}

总结

VS Code 和 Claude Code 一起创建了强大的开发环境。关键是设置高效的工作流，让你能够：

• 快速在编码和 AI 对话之间切换
• 轻松审查 AI 生成的更改
• 在 AI 辅助旁边运行测试和命令

从基本的终端集成开始，然后随着工作流的发展逐步添加任务、片段和快捷键。

下一步：探索多供应商支持以在 CCJK 中使用不同的 AI 模型。