Claude Code全平台IDE集成与混合工作流实战

graph TB
    subgraph Engine["Claude Code Engine（统一核心）"]
        A[Agent Loop<br/>工具调用/代码读写]
        B[权限系统<br/>settings.json]
        C[上下文管理<br/>CLAUDE.md/Memory]
        D[MCP协议<br/>外部工具集成]
    end

    subgraph Surfaces["六大运行界面"]
        E["🖥️ CLI终端<br/>全功能/脚本化"]
        F["🧩 VS Code扩展<br/>可视化Diff/内联编辑"]
        G["🔮 JetBrains插件<br/>Diff查看/选区共享"]
        H["📝 Neovim<br/>终端分屏/MCP集成"]
        I["📧 Emacs<br/>vterm/eglot集成"]
        J["🌐 桌面端/Web<br/>零配置入门"]
    end

    A --> E
    A --> F
    A --> G
    A --> H
    A --> I
    A --> J

    style Engine fill:#f0f4ff,stroke:#4a6cf7
    style Surfaces fill:#fff8f0,stroke:#ff8c42

1. 打开VS Code
2. 按 Ctrl+Shift+X（macOS: Cmd+Shift+X）打开扩展面板
3. 搜索 "Claude Code"
4. 点击安装（发布者：Anthropic）
5. 安装完成后，侧边栏出现Claude图标

# Claude Code CLI可以自动安装VS Code扩展
claude install-vs-code-extension

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

    A -->|特点| A1["✅ 可视化Diff<br/>✅ @文件引用<br/>✅ Plan Review面板<br/>❌ 无vim模式支持"]
    B -->|特点| B1["✅ 完整CLI功能<br/>✅ 所有斜杠命令<br/>⚠️ 无可视化Diff<br/>✅ 支持vim模式"]
    C -->|特点| C1["✅ 完整CLI功能<br/>✅ 文件感知/ide连接<br/>✅ 灵活终端选择<br/>❌ 无可视化Diff"]

    style A fill:#e8f5e9
    style B fill:#e3f2fd
    style C fill:#fff3e0

Ctrl+` 打开终端 → 输入 claude

# 在外部终端（如iTerm2、Ghostty、Alacritty）中启动
claude
# 进入Claude Code后，连接到VS Code
> /ide

sequenceDiagram
    participant D as 开发者
    participant CC as Claude Code扩展
    participant E as VS Code编辑器

    D->>CC: 输入"重构auth.ts的登录逻辑"
    CC->>CC: 分析代码上下文
    CC->>E: 显示内联Diff（绿色新增/红色删除）
    D->>E: 逐个Accept或Reject修改块
    Note over D,E: Shift+Tab切换到Plan模式预览
    D->>CC: 确认执行
    CC->>E: 应用修改到文件

@file:src/auth/login.ts      # 引用特定文件
@symbol:authenticateUser      # 引用代码符号
@folder:src/components/       # 引用整个文件夹
@url:https://docs.example.com # 引用网页内容
@git:main                     # 引用Git分支差异

1. 打开IDE → Settings/Preferences → Plugins
2. 搜索 "Claude Code"
3. 安装插件（发布者：Anthropic）
4. 重启IDE
5. 侧边栏出现Claude Code工具窗口

// 在编辑器中选中这段代码
public void processOrder(Order order) {
    if (order == null) throw new IllegalArgumentException();
    // ... 选中到这里
}

1. Claude Code提出修改
2. 自动打开JetBrains Diff Viewer
3. 左侧=原始文件，右侧=修改后文件
4. 使用 >> / << 按钮逐块应用或忽略
5. 支持合并冲突解决

-- lazy.nvim 安装
{
    "greggh/claude-code.nvim",
    dependencies = {
        "nvim-lua/plenary.nvim",
    },
    config = function()
        require("claude-code").setup({
            -- 可选配置
            window = {
                position = "vertical",  -- "vertical" | "horizontal" | "float"
                width = 50,             -- 垂直分屏宽度
                height = 20,            -- 水平分屏高度
            },
            keymaps = {
                toggle = "<leader>cc",   -- 切换Claude窗口
                send = "<leader>cs",     -- 发送选中文本
            },
        })
    end,
}

:Claude              " 打开Claude Code终端
:ClaudeSend          " 发送当前选中文本给Claude
:ClaudeChat          " 打开聊天模式
:<leader>cc          " 切换Claude分屏

# 在Neovim中打开终端分屏
:terminal
# 在终端中启动Claude Code并连接编辑器
claude --ide nvim

-- 通过MCP共享Neovim上下文给Claude Code
-- 参考: https://www.laktek.com/using-claude-code-with-neovim
local mcp_server = {
    name = "neovim-context",
    tools = {
        get_open_buffers = function()
            -- 返回当前所有打开的buffer信息
        end,
        get_current_selection = function()
            -- 返回当前选中内容
        end,
        get_lsp_diagnostics = function()
            -- 返回LSP诊断信息
        end,
    }
}

;; 配置vterm
(use-package vterm
  :config
  (setq vterm-shell "/bin/bash"))

;; 定义快捷函数
(defun my/claude-code ()
  "在vterm中启动Claude Code"
  (interactive)
  (vterm)
  (vterm-send-string "claude\n"))

(global-set-key (kbd "C-c c") 'my/claude-code)

;; 发送选区到Claude Code
(defun my/send-region-to-claude (start end)
  "发送选中文本到Claude Code vterm窗口"
  (interactive "r")
  (let ((text (buffer-substring-no-properties start end)))
    ;; 切换到vterm窗口并发送文本
    (other-window 1)
    (vterm-send-string text)
    (vterm-send-return)))

(global-set-key (kbd "C-c s") 'my/send-region-to-claude)

graph LR
    A[Emacs编辑器] -->|eglot/lsp-mode| B[LSP协议]
    B --> C[Claude Code LSP Server]
    C --> D[AI代码补全<br/>重构建议<br/>诊断修复]
    D -->|建议| A

    E[vterm终端] -->|claude CLI| F[Claude Code Agent]
    F -->|代码读写| G[项目文件]

    style A fill:#7f5ab6,color:#fff
    style C fill:#e8f5e9
    style F fill:#e3f2fd

" vim-plug 安装
Plug 'claude-mod/claude.vim'

" 基础命令
:Claude              " 启动Claude Code
:ClaudeAsk           " 询问问题
:ClaudeRefactor      " 重构当前buffer

graph TB
    subgraph "第一层：深度编码（IDE扩展）"
        A1["VS Code扩展<br/>前端开发/小文件修改"]
        A2["JetBrains插件<br/>Java/Python大型项目"]
        A3["Neovim分屏<br/>配置文件/快速编辑"]
    end

    subgraph "第二层：项目级Agent（CLI终端）"
        B1["大规模重构<br/>多文件跨模块修改"]
        B2["Git操作<br/>提交/PR/代码审查"]
        B3["脚本自动化<br/>CI/CD管道任务"]
    end

    subgraph "第三层：全平台共享配置"
        C1["CLAUDE.md<br/>项目级指令"]
        C2["settings.json<br/>权限与MCP"]
        C3["Memory系统<br/>持久化知识"]
    end

    A1 -.->|需要复杂操作时| B1
    A2 -.->|需要复杂操作时| B2
    A3 -.->|需要复杂操作时| B3
    C1 --> A1
    C1 --> A2
    C1 --> A3
    C1 --> B1
    C1 --> B2
    C1 --> B3
    C2 --> A1
    C2 --> A2

    style A1 fill:#e8f5e9
    style A2 fill:#e8f5e9
    style A3 fill:#e8f5e9
    style B1 fill:#e3f2fd
    style B2 fill:#e3f2fd
    style B3 fill:#e3f2fd
    style C1 fill:#fff3e0
    style C2 fill:#fff3e0
    style C3 fill:#fff3e0

sequenceDiagram
    participant Dev as 开发者
    participant VSC as VS Code扩展
    participant CLI as CLI终端
    participant Git as Git仓库

    Note over Dev,Git: 🌅 开始新功能开发

    Dev->>CLI: claude -p "分析项目结构，<br/>规划新功能实现方案"
    CLI-->>Dev: 返回功能拆分和文件清单

    Dev->>VSC: @file:Component.tsx "添加用户认证逻辑"
    VSC->>VSC: 显示内联Diff
    Dev->>VSC: Accept ✓ / Reject ✗

    Note over Dev,Git: 🔄 迭代修改

    Dev->>VSC: "修复TS类型错误"
    VSC->>VSC: 显示修复Diff

    Note over Dev,Git: ✅ 准备提交

    Dev->>CLI: /review 检查所有改动
    CLI-->>Dev: 返回审查报告

    Dev->>CLI: "生成commit message并提交"
    CLI->>Git: git add + git commit

步骤1：在IntelliJ中打开项目，确认编译通过
步骤2：在IDE内置终端启动 claude
步骤3：输入 "将UserService从Spring MVC迁移到Spring WebFlux"
步骤4：Claude遍历30+文件生成修改方案
步骤5：切换到JetBrains插件面板查看Diff
步骤6：逐个文件在JetBrains Diff Viewer中审核
步骤7：在终端执行测试验证

# 终端1：Neovim编辑配置文件
nvim docker-compose.yml

# 终端2：Claude Code执行基础设施修改
claude
> 根据docker-compose.yml更新所有Dockerfile，
> 确保版本号一致，添加健康检查

# 终端3：VS Code打开前端项目审查UI改动
code ./frontend
# 在VS Code扩展中审查前端组件修改

# 在外部终端启动Claude Code并连接VS Code
claude --ide vscode

# 在Neovim终端中启动并连接Neovim
claude --ide nvim

# 在Claude Code会话中动态连接
> /ide
# 检测到运行中的IDE并建立连接

graph TB
    A["~/.claude/CLAUDE.md<br/>（全局用户级）"]
    B["项目根目录/CLAUDE.md<br/>（项目级）"]
    C["子目录/CLAUDE.md<br/>（目录级）"]

    A -->|所有项目共享| B
    B -->|项目特定| C

    D["加载顺序"] --> E["1. 全局CLAUDE.md<br/>个人编码偏好"]
    D --> F["2. 项目CLAUDE.md<br/>项目约定/架构"]
    D --> G["3. 目录CLAUDE.md<br/>模块特定规则"]

    style A fill:#ffcdd2
    style B fill:#c8e6c9
    style C fill:#bbdefb

# 全局编码偏好

## 语言
- 默认使用中文回复
- 代码注释使用英文

## 通用规则
- 不要自动commit
- 始终先读取文件再编辑
- 优先编辑现有文件而非创建新文件
- commit message不加版本号

# 项目配置

## 技术栈
- React 18 + TypeScript
- Vite构建
- Vitest测试

## 约定
- 组件使用函数式组件 + Hooks
- 状态管理使用Zustand
- 测试文件放在 __tests__/ 目录
- API调用统一走 src/api/ 层

{
  "permissions": {
    "allow": [
      "Bash(npm test*)",
      "Bash(npm run lint*)",
      "Bash(npm run build*)",
      "Bash(git status*)",
      "Bash(git diff*)",
      "Bash(git log*)",
      "Read",
      "Glob",
      "Grep"
    ],
    "deny": [
      "Bash(rm -rf*)",
      "Bash(sudo*)"
    ]
  },
  "env": {
    "CLAUDE_CODE_MAX_TURNS": "200"
  }
}

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-filesystem", "/path/to/project"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-github"],
      "env": {
        "GITHUB_TOKEN": "${GITHUB_TOKEN}"
      }
    }
  }
}

{
  "version": 1,
  "bindings": [
    {
      "key": "ctrl+s",
      "action": "submit"
    },
    {
      "key": "ctrl+p",
      "action": "plan_mode"
    },
    {
      "key": "ctrl+r",
      "action": "compact"
    },
    {
      "key": "ctrl+o",
      "action": "new_session"
    }
  ]
}

graph TB
    subgraph "阶段1：项目初始化（CLI终端）"
        A1["claude init<br/>生成CLAUDE.md"]
        A2["配置settings.json<br/>权限+MCP"]
        A3["创建.gitignore<br/>.claude/目录"]
    end

    subgraph "阶段2：后端开发（JetBrains IntelliJ）"
        B1["IntelliJ打开项目<br/>安装Claude Code插件"]
        B2["选中User模型<br/>Claude生成CRUD API"]
        B3["Diff Viewer审核<br/>应用修改"]
    end

    subgraph "阶段3：前端开发（VS Code扩展）"
        C1["VS Code打开frontend/<br/>Claude Code扩展"]
        C2["@file:api.ts 引用API定义<br/>生成React组件"]
        C3["内联Diff审核<br/>逐块Accept/Reject"]
    end

    subgraph "阶段4：集成测试与部署（CLI终端）"
        D1["claude -p '运行测试并修复失败项'"]
        D2["claude -p '更新Docker配置'"]
        D3["claude -p '生成PR描述'"]
    end

    A1 --> A2 --> A3 --> B1
    B1 --> B2 --> B3 --> C1
    C1 --> C2 --> C3 --> D1
    D1 --> D2 --> D3

    style A1 fill:#ffcdd2
    style B1 fill:#c8e6c9
    style C1 fill:#bbdefb
    style D1 fill:#fff9c4

# 创建项目并初始化
mkdir fullstack-app && cd fullstack-app
claude

> 分析这个项目的需求，帮我初始化项目结构
> 生成CLAUDE.md项目配置文件
> 配置Docker开发环境

# 退出Claude Code，配置项目设置
cat > .claude/settings.json << 'EOF'
{
  "permissions": {
    "allow": [
      "Bash(docker compose*)",
      "Bash(npm test*)",
      "Bash(npm run build*)"
    ]
  }
}
EOF

1. 用IntelliJ打开项目
2. 安装Claude Code插件
3. 在编辑器中打开 src/models/User.java
4. 选中User类定义
5. 在Claude面板中输入：
   "为这个User模型生成完整的CRUD REST API，
    包含输入验证、错误处理、分页支持"
6. 在Diff Viewer中审核生成的Controller和Service
7. 逐文件Apply修改

1. 用VS Code打开frontend/目录
2. 在Claude扩展面板中输入：
   "@file:../backend/src/main/java/com/example/UserController.java
    根据这个API生成React用户管理页面，
    包含列表、搜索、分页、新增、编辑、删除功能"
3. 在内联Diff视图中审核生成的组件代码
4. Accept符合预期的修改，Reject需要调整的部分

# 回到终端执行自动化任务
claude

> 运行所有测试，修复失败的测试用例
> 检查前后端的类型定义是否一致
> 更新docker-compose.yml添加新服务的配置
> 生成PR描述，总结所有改动

# 非交互式运行CI检查
claude -p "运行lint和测试，报告结果" 2>&1 | tee ci-report.txt

flowchart TD
    A[问题发生] --> B{哪个平台？}
    B -->|VS Code| C1[检查扩展版本]
    B -->|JetBrains| C2[检查插件版本]
    B -->|Neovim/Emacs| C3[检查MCP连接]
    B -->|CLI| C4[检查Claude版本]

    C1 --> D{问题类型？}
    C2 --> D
    C3 --> D
    C4 --> D

    D -->|认证失败| E["运行 claude 重新认证<br/>检查API Key"]
    D -->|权限错误| F["检查 settings.json<br/>运行 /permissions"]
    D -->|MCP不工作| G["检查MCP服务器状态<br/>claude mcp list"]
    D -->|Diff不显示| H["确认使用扩展面板<br/>而非终端模式"]
    D -->|性能缓慢| I["使用 /compact<br/>检查上下文大小"]

    E --> J[问题解决 ✅]
    F --> J
    G --> J
    H --> J
    I --> J

# 检查Claude Code版本
claude --version

# 列出已配置的MCP服务器
claude mcp list

# 检查当前权限配置
claude config list

# 查看会话日志
ls ~/.claude/logs/

# 清除缓存重启
rm -rf ~/.claude/cache && claude

graph TD
    A[你要做什么？] --> B{需要可视化Diff？}
    B -->|是| C{用什么编辑器？}
    B -->|否| D{需要自动化/脚本？}

    C -->|VS Code| E["✅ VS Code扩展<br/>内联Diff最佳体验"]
    C -->|JetBrains| F["✅ JetBrains插件<br/>原生Diff Viewer"]
    C -->|Neovim/Emacs| G["⚠️ 用终端+/ide连接<br/>无原生Diff"]

    D -->|是| H["✅ CLI终端 -p模式<br/>脚本化/管道化"]
    D -->|否| I{任务规模？}

    I -->|单文件修改| J["✅ IDE扩展<br/>快速Accept/Reject"]
    I -->|多文件重构| K["✅ CLI终端<br/>Agent自动遍历"]
    I -->|探索/问答| L["✅ 任意平台<br/>看个人习惯"]