Claude Code四端集成与IDE深度实战：终端、VS Code、JetBrains、桌面与Web全覆盖

graph TB
    Engine["Claude Code 核心引擎<br/>（文件读写 / Shell执行 / MCP / Agent SDK）"]

    CLI["终端 CLI<br/>claude 命令"]
    VSC["VS Code 扩展<br/>图形化面板"]
    JB["JetBrains 插件<br/>原生集成"]
    DESK["桌面应用<br/>多会话管理"]
    WEB["Web 模式<br/>claude.ai/code"]

    Engine --> CLI
    Engine --> VSC
    Engine --> JB
    Engine --> DESK
    Engine --> WEB

    CLI -.->|"/ide 连接"| VSC
    CLI -.->|"后台运行"| DESK
    WEB -.->|"--teleport 迁移"| CLI
    DESK -.->|"会话接力"| CLI

    style Engine fill:#7c3aed,stroke:#5b21b6,color:#fff
    style CLI fill:#2563eb,stroke:#1d4ed8,color:#fff
    style VSC fill:#2563eb,stroke:#1d4ed8,color:#fff
    style JB fill:#f59e0b,stroke:#d97706,color:#fff
    style DESK fill:#10b981,stroke:#059669,color:#fff
    style WEB fill:#ef4444,stroke:#dc2626,color:#fff

flowchart TD
    A[你的开发场景是？] --> B{主力IDE是？}
    B -->|VS Code| C{需要图形化Diff？}
    B -->|JetBrains| D[安装JetBrains插件]
    B -->|无偏好/终端党| E{需要多任务并行？}

    C -->|是| F[使用VS Code扩展]
    C -->|否，偏好终端| G[在集成终端中运行CLI]

    E -->|是| H[使用桌面应用]
    E -->|否| I[使用终端CLI]

    J{需要远程/团队协作？} --> K[使用Web模式]

    style A fill:#7c3aed,color:#fff
    style F fill:#2563eb,color:#fff
    style D fill:#f59e0b,color:#fff
    style H fill:#10b981,color:#fff
    style K fill:#ef4444,color:#fff

# 方式一：npm 全局安装（推荐）
npm install -g @anthropic-ai/claude-code

# 方式二：使用 Homebrew（macOS）
brew install claude-code

# 方式三：直接运行无需安装
npx @anthropic-ai/claude-code

# 验证安装
claude --version

# 首次运行，进行 OAuth 认证
claude
# 将打开浏览器完成 Anthropic 账户授权

# 方式一：OAuth 浏览器认证（默认，推荐个人用户）
claude

# 方式二：API Key 认证（适合 CI/CD 环境）
export ANTHROPIC_API_KEY="sk-ant-xxxxx"
claude

# 方式三：使用 Claude Max/Pro 订阅（无需API Key）
# 直接运行 claude，选择订阅计划登录

# 交互式会话
claude                          # 启动交互式REPL
claude "修复登录页的CSS问题"      # 带初始提示启动

# 非交互/管道模式
claude -p "解释这段代码" < main.py    # 管道输入
echo "package.json" | claude -p "分析依赖"  # 管道文件

# 会话管理
claude --resume                  # 恢复上次会话
claude --continue                # 继续上次对话

# 上下文控制
claude --add-dir ../shared-lib   # 添加额外目录到上下文
claude --model claude-sonnet-4-6 # 指定模型

# 与 IDE 集成
claude /ide                     # 连接到已打开的IDE

# 方案1：使用 nvm 管理 Node.js（推荐）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
npm install -g @anthropic-ai/claude-code

# 方案2：修改 npm 全局目录
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
npm install -g @anthropic-ai/claude-code

export HTTP_PROXY=http://proxy.company.com:8080
export HTTPS_PROXY=http://proxy.company.com:8080

code --install-extension anthropic.claude-code

flowchart LR
    subgraph "VS Code 中的三种运行方式"
        A["扩展面板模式<br/>（Extension Panel）"]
        B["集成终端CLI<br/>（Integrated Terminal）"]
        C["外部终端 + /ide<br/>（External Terminal）"]
    end

    A --> D["✅ 图形化Diff<br/>✅ @文件引用<br/>✅ 选择上下文共享<br/>✅ 斜杠菜单<br/>❌ 不支持所有CLI参数"]
    B --> E["✅ 完整CLI功能<br/>✅ 纯文本输出<br/>❌ 无图形化Diff<br/>❌ 无选择上下文"]
    C --> F["✅ 完整CLI功能<br/>✅ IDE上下文共享<br/>✅ Diff在编辑器中显示<br/>⚠️ 需手动启动 /ide"]

操作示例：
1. 在编辑器中选中 auth/login.ts 的第 45-60 行
2. 切换到 Claude Code 面板
3. 输入："这段代码有什么安全问题？"
4. Claude 会自动看到你选中的代码并进行分析

/init

/plan

请分析当前 Express.js 项目的路由和控制器结构，
制定一个模块化拆分方案。要求：
1. 按业务领域拆分（用户、订单、产品）
2. 每个模块包含独立的路由、控制器、服务层
3. 保持向后兼容，不破坏现有API

运行项目测试，确保所有API端点仍然正常工作。
如果有测试失败，修复它们。

# 1. 检查 Claude Code CLI 是否正确安装
claude --version

# 2. 重新认证
claude /logout
claude    # 重新登录

# 3. 重装扩展
code --uninstall-extension anthropic.claude-code
code --install-extension anthropic.claude-code

# MCP 服务器配置
# 如果你在 ~/.claude/settings.json 中已配置 MCP 服务器，
# JetBrains 插件会自动继承这些配置

# 快捷键绑定
# 默认：Alt+C (Windows/Linux) 或 Option+C (macOS) 打开 Claude Code 窗口

# Diff 查看器
# 默认使用 JetBrains 原生 Diff 视图
# 可在设置中切换为内联视图

操作流程：
1. 在编辑器中选中需要分析/修改的代码
2. 点击 Claude Code 工具窗口
3. 输入你的请求（如"优化这段排序算法"）
4. Claude Code 基于选中代码进行操作

解决方法：
1. View → Tool Windows → Claude Code
2. 或者 Alt+C / Option+C 快捷键
3. 如果仍不可见，Settings → Tools → Claude Code → 勾选 "Show Tool Window"

1. 等待 IDE 完成索引（右下角进度条）
2. 在 .claude/settings.json 中配置忽略目录
3. 使用 CLAUDE.md 指导 Claude Code 聚焦关键目录

# macOS
brew install --cask claude-code

# 或从官网下载
# https://claude.com/download

# Linux（AppImage）
wget https://claude.com/download/linux/claude-code.AppImage
chmod +x claude-code.AppImage
./claude-code.AppImage

# Windows
# 从 Microsoft Store 或官网下载安装包

flowchart TD
    A[打开 Claude Code 桌面应用] --> B[创建 Session A<br/>前端Bug修复]
    A --> C[创建 Session B<br/>API性能优化]
    A --> D[创建 Session C<br/>文档更新]

    B --> B1["Session A 运行在<br/>Worktree: feature/bugfix"]
    C --> C1["Session B 运行在<br/>Worktree: feature/perf"]
    D --> D1["Session C 运行在<br/>Worktree: feature/docs"]

    B1 --> E[三个会话并行运行<br/>互不阻塞、互不冲突]
    C1 --> E
    D1 --> E

    E --> F[逐个审查 Diff<br/>合并到主分支]

    style A fill:#7c3aed,color:#fff
    style E fill:#10b981,color:#fff
    style F fill:#f59e0b,color:#fff

{
  "routines": [
    {
      "name": "每日依赖安全检查",
      "schedule": "0 9 * * 1-5",
      "prompt": "检查 package.json 中所有依赖的最新安全公告，如有漏洞则创建修复分支并提交PR",
      "model": "claude-sonnet-4-6"
    },
    {
      "name": "周报生成",
      "schedule": "0 17 * * 5",
      "prompt": "分析本周所有git提交，生成项目进展周报，包含已完成功能、修复的Bug和下周计划"
    }
  ]
}

1. 访问 https://claude.ai/code
2. 使用 Anthropic 账户登录
3. 选择或上传项目（支持 GitHub 仓库连接）
4. 开始对话

# 在 Web 模式中完成任务的一部分后
# 获取会话迁移令牌

# 在本地终端中，使用 --teleport 继续
claude --teleport <session-token>

# 或者反向：将本地会话推送到 Web
claude --remote

# .claude/sandbox.yml
setup_script: |
  apt-get update && apt-get install -y postgresql-client redis-tools
  pip install pandas numpy scikit-learn

network:
  allowed_domains:
    - api.github.com
    - pypi.org
    - npmjs.org
  blocked_domains:
    - "*"

docker:
  image: "node:20-slim"
  memory: "4g"
  timeout: 3600

flowchart TD
    subgraph 早晨["🌅 早晨：Web模式"]
        W1["claude.ai/code<br/>审查过夜的CI告警"]
        W2["查看PR评论<br/>分配优先级"]
    end

    subgraph 上午["🏢 上午：VS Code扩展"]
        V1["打开项目<br/>Plan模式规划今日任务"]
        V2["@引用关键文件<br/>重构支付模块"]
        V3["行内Diff审批<br/>逐步验证修改"]
    end

    subgraph 下午["☕ 下午：桌面应用"]
        D1["并行Session A<br/>前端组件开发"]
        D2["并行Session B<br/>后端API优化"]
        D3["Side Chat<br/>随时提问"]
    end

    subgraph 傍晚["🌆 傍晚：终端CLI"]
        T1["claude -p 运行<br/>自动化测试"]
        T2["生成变更摘要<br/>准备提交"]
        T3["--teleport 迁移<br/>回家继续"]
    end

    早晨 --> 上午 --> 下午 --> 傍晚

    style W1 fill:#ef4444,color:#fff
    style V1 fill:#2563eb,color:#fff
    style D1 fill:#10b981,color:#fff
    style T1 fill:#7c3aed,color:#fff

# 项目：电商平台重构

## 技术栈
- 前端：React 18 + TypeScript + Tailwind CSS
- 后端：Node.js + Express + PostgreSQL
- 部署：Docker + GitHub Actions

## 约定
- 使用 ESLint + Prettier 格式化
- 所有API端点需有 TypeScript 类型定义
- Git 分支命名：feature/xxx, fix/xxx, refactor/xxx
- 提交信息格式：conventional commits

## 目录结构重点
- /src/frontend/ - React 前端
- /src/backend/ - Express 后端
- /src/shared/ - 共享类型和工具
- /infra/ - 基础设施配置

{
  "permissions": {
    "allow": [
      "Read",
      "Write",
      "Bash(npm test:*)",
      "Bash(npm run lint:*)",
      "Bash(git status:*)",
      "Bash(git diff:*)"
    ]
  },
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-github"]
    }
  }
}

flowchart LR
    A["会话开始"] --> B["CLAUDE.md 自动加载<br/>~500 tokens"]
    B --> C["用户提问<br/>+ 相关文件内容"]
    C --> D["Claude 响应<br/>+ 工具调用"]
    D --> E{上下文窗口<br/>使用率 < 70%？}
    E -->|是| C
    E -->|否| F["/compact 压缩"]
    F --> C

    style E fill:#f59e0b,color:#fff
    style F fill:#ef4444,color:#fff

# 团队 Claude Code 规范（建议模板）

## 1. 项目配置标准化
- 每个项目必须有 CLAUDE.md
- 统一 .claude/settings.json 的 permissions 配置
- MCP 服务器配置文档化

## 2. 分支与 Worktree 策略
- 每个 Claude Code 会话使用独立 Worktree
- 分支命名：ai/feature-xxx, ai/fix-xxx
- AI 生成的代码必须经过人工审查

## 3. 审查流程
- 使用 /review 命令预审
- 行内 Diff 逐块审批，不要一键 Accept All
- 关注 AI 是否引入了不必要的依赖

## 4. 成本控制
- 日常任务使用 Sonnet 模型
- 仅复杂架构决策使用 Opus
- 设置 token 使用量监控

第一步：终端CLI（理解核心概念）
    ↓
第二步：VS Code或JetBrains（日常开发）
    ↓
第三步：桌面应用（多任务并行）
    ↓
第四步：Web模式 + 会话迁移（远程协作）
    ↓
第五步：多端组合工作流（高级实战）