Claude Code双栖工作流：终端到VS Code全实战

graph TB
    subgraph "Claude Code 运行形态"
        A[CLI终端模式<br/>claude命令]
        B[VS Code扩展<br/>内嵌终端]
        C[Desktop桌面应用<br/>独立GUI]
    end

    subgraph "共享核心"
        D[Anthropic API]
        E[项目上下文<br/>CLAUDE.md]
        F[MCP服务器]
        G[Skills系统]
    end

    A --> D
    B --> D
    C --> D
    A --> E
    B --> E
    C --> E
    A --> F
    B --> F
    C --> F
    A --> G
    B --> G
    C --> G

    style A fill:#4A90D9,color:#fff
    style B fill:#007ACC,color:#fff
    style C fill:#D4553A,color:#fff

# 确认Node.js版本
node --version  # 需要 v18+

# 全局安装Claude Code
npm install -g @anthropic-ai/claude-code

# 验证安装
claude --version
# 预期输出：Claude Code v2.x.x

# 启动认证流程
claude

# 首次运行会提示：
# > Welcome to Claude Code!
# > Please authenticate by visiting:
# > https://console.anthropic.com/login?code=XXXX-XXXX

# 使用API Key
export ANTHROPIC_API_KEY="sk-ant-xxxxx"
claude

# 或使用配置文件
echo '{"apiKey":"sk-ant-xxxxx"}' > ~/.claude/credentials.json

# 创建项目目录
mkdir my-first-claude-project && cd my-first-claude-project

# 初始化Claude Code配置
claude /init

# Claude会自动生成：
# - CLAUDE.md（项目级配置文件）
# - .claude/settings.json（本地设置）
# - .claude/目录结构

┌─────────────────────────────────────────────────────┐
│           Claude Code 终端快捷键                      │
├──────────────────┬──────────────────────────────────┤
│ Escape           │ 中断当前生成，进入输入模式          │
│ Shift + Tab      │ 切换到Auto-accept模式（自动执行）  │
│ Tab              │ 切换到Normal模式（需确认执行）      │
│ Ctrl + C         │ 强制中断当前操作                   │
│ Ctrl + G         │ 在Diff视图中拒绝所有更改           │
│ Enter            │ 确认/发送消息                      │
│ @                │ 引用文件：@src/app.ts              │
│ /                │ 触发斜杠命令菜单                   │
│ ↑ / ↓           │ 浏览历史消息                       │
│ Ctrl + L         │ 清屏                              │
└──────────────────┴──────────────────────────────────┘

# 方式一：命令行安装
code --install-extension anthropic.claude-code

# 方式二：VS Code内安装
# 1. 打开VS Code
# 2. 侧栏点击 Extensions（Ctrl+Shift+X）
# 3. 搜索 "Claude Code"
# 4. 点击 Install（发布者：Anthropic）

┌─────────────────────────────────────────────────────┐
│           VS Code 扩展快捷键                         │
├──────────────────┬──────────────────────────────────┤
│ Ctrl+Shift+C     │ 打开Claude Code面板               │
│ Ctrl+Shift+P →   │ 命令面板输入"Claude"              │
│   "Claude: ..."  │ 查看所有Claude命令                 │
│ Alt+A            │ 接受当前Diff                      │
│ Alt+R            │ 拒绝当前Diff                      │
│ Ctrl+Click       │ 跳转到Claude提到的文件/行号        │
│ Ctrl+Shift+Tab   │ 在Diff视图中切换新旧文件           │
└──────────────────┴──────────────────────────────────┘

{
  "claude-code.autoAccept": false,
  "claude-code.contextFiles": [
    "CLAUDE.md",
    "README.md",
    "package.json"
  ],
  "claude-code.terminal.integrated": true,
  "claude-code.diff.renderSideBySide": true
}

graph TD
    A[~/.claude/CLAUDE.md<br/>全局用户指令] --> E[最终生效配置]
    B[项目根/CLAUDE.md<br/>项目级指令] --> E
    C[项目根/.claude/settings.json<br/>本地设置] --> E
    D[项目根/.claude/settings.local.json<br/>个人本地设置] --> E
    F[~/.claude/settings.json<br/>全局设置] --> E

    style A fill:#4A90D9,color:#fff
    style B fill:#2ECC71,color:#fff
    style C fill:#E67E22,color:#fff
    style D fill:#9B59B6,color:#fff
    style E fill:#E74C3C,color:#fff
    style F fill:#34495E,color:#fff

# 项目：MyApp

## 技术栈
- Frontend: React 19 + TypeScript 5.7
- Backend: Node.js 22 + Express
- Database: PostgreSQL 16
- Testing: Vitest + Playwright

## 代码规范
- 使用函数式组件，禁止class组件
- API路由遵循RESTful规范
- 所有函数必须有TypeScript类型注解
- 测试覆盖率不低于80%

## 工作流规则
- 修改代码后必须运行相关测试
- 不要自动commit
- 优先编辑现有文件，避免创建新文件
- 终端命令使用绝对路径

## 项目结构
- src/components/ — React组件
- src/api/ — API路由和控制器
- src/models/ — 数据模型
- tests/ — 测试文件

graph TD
    A[新任务到达] --> B{任务类型？}
    B -->|创建/修改UI| C[VS Code扩展<br/>可视化Diff审查]
    B -->|批量重构10+文件| D[终端CLI<br/>Auto-accept模式]
    B -->|CI/CD/自动化| E[终端CLI<br/>-p管道模式]
    B -->|代码审查/理解| F{文件数量？}
    F -->|1-3个文件| G[VS Code扩展<br/>单文件跳转]
    F -->|4+个文件| H[终端CLI<br/>全局视图]

    C --> I[完成]
    D --> I
    E --> I
    G --> I
    H --> I

    style C fill:#007ACC,color:#fff
    style D fill:#4A90D9,color:#fff
    style E fill:#E67E22,color:#fff
    style G fill:#007ACC,color:#fff
    style H fill:#4A90D9,color:#fff

# 终端中完成批量操作后，打开VS Code审查
claude "已完成批量重构，请总结所有修改"
code .  # 打开VS Code手动检查

# VS Code内置终端（Ctrl+`）中执行
claude -p "分析这个项目的测试覆盖率" < test-output.txt

# 或者使用管道模式生成报告
claude -p "生成这个项目的API文档" --output-format json > api-docs.json

你：/compact

Claude：我来压缩当前上下文...
- 保留：项目结构、CLAUDE.md指令、最近10轮对话摘要
- 移除：中间步骤的详细输出、已完成的工具调用详情
- 上下文从 142,000 token 压缩到 48,000 token
- 压缩率：66%

# 审查当前所有未提交的更改
claude "/review 我准备提交这些更改，请检查是否有问题"

# 输出是纯文本，包含文件名、行号、问题描述

# 在Claude面板中输入
/review 检查最近的更改

# Claude会自动打开Diff视图
# 每个问题标记在对应文件位置
# Ctrl+Click直接跳转到问题代码
# 可以逐个Accept/Reject建议的修复

# 在终端中用Claude Code创建项目
mkdir todo-app && cd todo-app
claude

# 交互式输入：
> 使用Vite创建一个React + TypeScript项目，项目名是todo-app。
> 功能需求：添加待办事项、标记完成、删除、过滤（全部/已完成/未完成）。
> 数据持久化用localStorage。样式用CSS Modules。

# Claude会执行：
# 1. npm create vite@latest . -- --template react-ts
# 2. 创建组件文件结构
# 3. 实现所有功能

# 打开VS Code
code .

# 回到终端（VS Code内置终端即可）
claude

> 为所有组件添加Vitest测试，覆盖以下场景：
> - 添加新待办事项
> - 标记待办事项为完成
> - 删除待办事项
> - 过滤器切换
> 目标覆盖率80%以上。
> 完成后运行测试验证全部通过。

# 使用Normal模式，逐一确认Claude创建的测试文件

# 管道模式生成项目报告
claude -p "生成这个项目的技术文档，包括：项目结构、组件说明、API接口、运行方式" \
  --output-format markdown > PROJECT.md

# 检查最终测试覆盖率
claude -p "运行测试并报告覆盖率" 

sequenceDiagram
    participant T as 终端CLI
    participant V as VS Code扩展
    participant G as Git仓库

    Note over T: Step 1: 创建项目骨架
    T->>T: claude + /init
    T->>T: 生成项目结构
    T->>G: git init + 首次提交

    Note over V: Step 2: UI审查调整
    V->>V: 打开Claude面板
    V->>V: Diff视图审查样式修改
    V->>G: Alt+A接受 + 保存

    Note over T: Step 3: 添加测试
    T->>T: claude创建测试文件
    T->>T: 运行vitest验证

    Note over T,V: Step 4: 联合调试
    T->>T: 分析测试失败原因
    T->>V: 切换到VS Code验证
    V->>V: Ctrl+Click跳转
    V->>G: 确认修复提交

    Note over T: Step 5: 生成报告
    T->>T: claude -p 管道模式
    T->>G: 最终提交

# 终端1：运行开发服务器和测试
claude "监控测试，每次文件变更自动运行相关测试"

# VS Code：同时进行代码编辑和审查
# 在Claude面板中：审查当前修改、优化代码

# 批量代码审查
for file in src/**/*.ts; do
  claude -p "审查这个文件的安全问题：$(cat $file)" --output-format json
done | jq '.issues[]' > security-report.json

# 自动生成测试
find src -name "*.tsx" ! -name "*.test.tsx" | while read f; do
  test_file="${f%.tsx}.test.tsx"
  claude -p "为 $f 生成测试文件" > "$test_file"
done

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "command": "npx eslint --fix $FILE_PATH 2>/dev/null"
      }
    ],
    "PreCommit": [
      {
        "command": "npm test -- --run"
      }
    ]
  }
}