<!-- title: Claude Code IDE集成实战：双编辑器全攻略 -->

## 概述

本教程面向已安装Claude Code CLI但尚未深入IDE集成的开发者，系统讲解VS Code扩展和JetBrains插件的安装、配置与高阶用法。涵盖Inline Diff审查、Plan Mode控制流、Selection Context精准传参、三种运行界面（Extension Panel / Integrated Terminal / Desktop App）的选择策略，以及VS Code + JetBrains双编辑器混合工作流实战。学完后你将掌握在IDE中高效使用Claude Code的完整技能链。

**适用人群**：有3个月以上开发经验、已安装Node.js 18+和Claude Code CLI的开发者。

## 前置条件

| 项目 | 要求 |
|------|------|
| 操作系统 | macOS 12+、Ubuntu 20.04+、Windows 10+（WSL2） |
| Node.js | 18.x 或更高版本 |
| Claude Code CLI | 已安装并完成认证（`claude` 命令可用） |
| VS Code | 1.90+（2026年推荐最新版） |
| JetBrains IDE | 2024.2+（IntelliJ / PyCharm / WebStorm / GoLand 等） |
| Anthropic账户 | 有效订阅（Max/Pro/Team/Enterprise） |

---

## 第一章：IDE集成全景图——五种运行界面怎么选

Claude Code在2026年提供五种运行界面（官方称"Surface"），每种适用于不同场景：

```mermaid
graph TB
    subgraph "Claude Code 五大运行界面"
        CLI["💻 CLI终端<br/>claude命令"]
        VSC_EXT["🔷 VS Code扩展面板<br/>图形化交互"]
        VSC_TERM["🔷 VS Code集成终端<br/>claude命令"]
        JB["🧠 JetBrains插件<br/>Tool Window"]
        DESKTOP["🖥️ Desktop App<br/>独立窗口"]
    end

    CLI --> |"轻量/脚本/CI"| SCENE1["服务器/CI/自动化"]
    VSC_EXT --> |"可视化审查"| SCENE2["前端/全栈开发"]
    VSC_TERM --> |"CLI习惯+IDE"| SCENE3["习惯终端的开发者"]
    JB --> |"Java/Python企业级"| SCENE4["企业后端开发"]
    DESKTOP --> |"多会话/多项目"| SCENE5["全栈/自由职业者"]

    style VSC_EXT fill:#007ACC,color:#fff
    style JB fill:#FC801D,color:#fff
    style DESKTOP fill:#D97706,color:#fff
```

### 1.1 各界面功能对比

| 功能 | CLI终端 | VS Code扩展 | VS Code终端 | JetBrains插件 | Desktop App |
|------|---------|-------------|-------------|---------------|-------------|
| Inline Diff审查 | ❌ | ✅ | ❌ | ✅ | ✅ |
| Plan Mode可视化 | ❌ | ✅ | ❌ | ✅ | ✅ |
| 选区上下文传递 | ❌ | ✅ | ❌ | ✅ | ❌ |
| Checkpoint回滚 | ✅ | ✅ | ✅ | ✅ | ✅ |
| MCP工具调用 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 会话持久化 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 多会话并行 | ❌ | ❌ | ✅ | ❌ | ✅ |
| 文件@引用 | ❌ | ✅ | ❌ | ✅ | ✅ |
| 自动Git提交 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 远程SSH使用 | ✅ | ⚠️需Remote SSH | ✅ | ⚠️需Gateway | ❌ |

**选择建议**：
- **日常前端/全栈开发** → VS Code扩展（最佳可视化体验）
- **Java/Python企业后端** → JetBrains插件（与项目结构深度集成）
- **快速脚本/服务器维护** → CLI终端（最轻量，零依赖IDE）
- **多项目并行工作** → Desktop App（2026年4月大改版，支持侧边栏多会话）

---

## 第二章：VS Code扩展——从安装到高效使用

### 2.1 安装

**方法一：VS Code Marketplace搜索安装**

1. 打开VS Code
2. 按 `Ctrl+Shift+X`（macOS: `Cmd+Shift+X`）打开扩展面板
3. 搜索 `Claude Code`（发布者：Anthropic）
4. 点击 Install

**方法二：命令行安装**

```bash
code --install-extension anthropic.claude-code
```

**方法三：从CLI启动**

```bash
# 在项目目录下
claude
# 首次运行会提示是否安装VS Code扩展
```

### 2.2 认证配置

安装扩展后，首次使用需要认证：

1. 点击VS Code侧边栏的Claude图标（钻石形Logo）
2. 选择认证方式：
   - **Anthropic API Key**：直接输入API密钥
   - **Claude Max/Pro订阅**：浏览器OAuth登录
   - **Amazon Bedrock**：配置AWS凭证
   - **Google Vertex AI**：配置GCP凭证

```jsonc
// settings.json 中的认证配置示例
{
  "claude-code.apiProvider": "anthropic",  // anthropic | bedrock | vertex
  "claude-code.model": "claude-sonnet-4-6",  // 默认模型
}
```

### 2.3 核心功能详解

#### 功能一：Extension Panel（图形化面板）

点击侧边栏Claude图标，打开对话面板。这是VS Code扩展的**主要交互界面**。

**关键操作**：
- 输入框中输入自然语言描述任务
- 使用 `@` 引用项目中的文件（如 `@src/app.tsx 优化这个组件`）
- 使用 `#` 引用特定行范围（如 `@src/utils.ts:15-30 解释这段逻辑`）

#### 功能二：Inline Diff（差异审查）

Claude Code修改文件时，VS Code扩展会在编辑器中显示**内联差异视图**，类似Git diff：

```
修改前代码（红色删除线）
- const data = fetch(url);
+ const data = await fetch(url);
修改后代码（绿色高亮）
```

**操作按钮**：
- ✅ **Accept**：接受当前文件的所有修改
- ❌ **Reject**：拒绝当前文件的所有修改
- ⬅️ **Accept All**：接受所有文件的所有修改
- 🔄 **逐块审查**：在每个差异块上单独Accept/Reject

#### 功能三：Plan Mode（计划模式）

Plan Mode是2026年最重要的功能更新之一，让Claude Code**先规划后执行**：

1. 在对话面板输入任务
2. Claude生成修改计划（不实际修改文件）
3. 你审查计划，可以：
   - 编辑计划中的具体步骤
   - 删除不需要的步骤
   - 调整步骤顺序
4. 确认后，Claude按计划执行

```mermaid
sequenceDiagram
    participant D as 开发者
    participant C as Claude Code
    participant F as 文件系统

    D->>C: 描述任务
    C->>C: 分析代码库
    C->>D: 展示修改计划
    D->>D: 审查/编辑计划
    D->>C: 确认执行
    C->>F: 按步骤修改文件
    F->>D: Inline Diff展示变更
    D->>C: Accept/Reject
```

#### 功能四：Selection Context（选区上下文）

在编辑器中选中代码片段，Claude Code会**自动感知选区**并将其作为上下文：

1. 在编辑器中选中一段代码
2. 打开Claude面板或使用快捷键
3. 输入指令（如"重构为独立函数"）
4. Claude会基于选中代码生成建议

**快捷键**：
- `Ctrl+Shift+C`（macOS: `Cmd+Shift+C`）：将选区发送到Claude
- `Ctrl+Shift+L`（macOS: `Cmd+Shift+L`）：解释选中的代码

### 2.4 权限模式配置

VS Code扩展支持三种权限模式，在扩展设置中配置：

```jsonc
// settings.json
{
  // "default" - 每次修改前询问
  "claude-code.permissionMode": "default",
  
  // "plan" - 仅计划阶段后自动执行（推荐）
  // "claude-code.permissionMode": "plan",
  
  // "auto-edit" - 自动接受文件编辑，仅命令需确认
  // "claude-code.permissionMode": "auto-edit",
  
  // "full-auto" - 全自动（危险，仅限可信项目）
  // "claude-code.permissionMode": "full-auto",
}
```

**推荐配置**：日常开发使用 `plan` 模式，既保证安全性又减少确认次数。

### 2.5 常用快捷键速查

| 快捷键 | 功能 |
|--------|------|
| `Cmd/Ctrl+Shift+C` | 将选区发送给Claude |
| `Cmd/Ctrl+Shift+L` | 解释选中代码 |
| `Cmd/Ctrl+I` | 在当前编辑器打开Inline Diff |
| `Escape` | 取消当前Claude操作 |
| `Enter` | 发送消息 |
| `Shift+Enter` | 换行（不发送） |

---

## 第三章：JetBrains插件——企业级IDE深度集成

### 3.1 安装

**支持的IDE**：IntelliJ IDEA、PyCharm、WebStorm、GoLand、RubyMine、PhpStorm、RustRover、DataGrip、CLion、Rider。

安装步骤：

1. 打开IDE → `Settings/Preferences` → `Plugins`
2. 切换到 `Marketplace` 标签
3. 搜索 `Claude Code`
4. 点击 Install，重启IDE

或通过JetBrains Marketplace页面直接下载：
```
https://plugins.jetbrains.com/plugin/claude-code
```

### 3.2 认证与初始化

安装完成后，首次使用流程：

1. 底部工具栏出现 `Claude Code` Tool Window
2. 点击打开，提示认证
3. 选择认证方式（与VS Code相同：API Key / OAuth / Bedrock / Vertex）
4. 认证完成后显示对话界面

### 3.3 JetBrains独有功能

#### 功能一：项目结构感知

JetBrains插件与IDE的项目索引深度集成：

- **自动识别项目类型**：Maven/Gradle/pip/npm/Cargo等
- **代码符号解析**：Claude能理解类、方法、接口的精确引用
- **依赖图感知**：修改一个类时，Claude知道哪些地方受影响

这使得JetBrains插件在以下场景特别强大：
- Java/Spring Boot大型项目重构
- Python Django/FastAPI项目调试
- Go微服务代码导航

#### 功能二：Selection Context增强

与VS Code类似，但JetBrains版本的Selection Context额外传递：
- 光标所在的**类名和包名**
- 当前**方法签名**
- 相关的**import声明**
- **类型推断**结果

```
// 在JetBrains中选中一段代码时，Claude自动获取：
// - 文件: UserService.java
// - 类: com.example.service.UserService
// - 方法: public User findById(Long id)
// - 选中代码: [第45-60行]
```

#### 功能三：Diff Preview（差异预览）

JetBrains插件使用IDE内置的差异查看器：

1. Claude生成修改建议
2. 点击修改文件名，打开**双栏差异视图**
3. 左栏为原始代码，右栏为修改后代码
4. 使用JetBrains标准差异导航：`F7`/`Shift+F7`跳转差异块

### 3.4 JetBrains高级配置

```properties
# 在 claude.properties 或 IDE配置中
# 自定义CLAUDE.md路径
claude.project.instructions=path/to/custom-instructions.md

# 启用/禁用自动索引
claude.indexing.enabled=true

# 最大上下文文件数
claude.context.maxFiles=50
```

### 3.5 常见问题与解决

| 问题 | 原因 | 解决方案 |
|------|------|----------|
| 插件安装后找不到Tool Window | 被隐藏 | `View` → `Tool Windows` → `Claude Code` |
| 大项目响应慢 | IDE索引占资源 | 排除不相关目录，或等索引完成 |
| "Claude Code CLI not found" | CLI未安装 | `npm install -g @anthropic-ai/claude-code` |
| 认证循环/失效 | Token过期 | 清除凭证重新登录 |
| Python虚拟环境识别错误 | 未激活venv | 在Terminal中激活后再启动Claude |

---

## 第四章：实战案例——双编辑器混合工作流

### 4.1 场景描述

假设你是一个全栈开发者，项目结构如下：

```
my-saas-app/
├── frontend/          # React + TypeScript（VS Code）
│   ├── src/
│   ├── package.json
│   └── tsconfig.json
├── backend/           # Java Spring Boot（IntelliJ）
│   ├── src/
│   ├── pom.xml
│   └── application.yml
├── shared/            # 共享类型定义
│   └── types/
├── CLAUDE.md          # Claude Code项目级指令
└── .claude/
    └── settings.json  # 项目级设置
```

### 4.2 步骤一：创建项目级CLAUDE.md

```markdown
# Project: MySaaS App

## Architecture
- Frontend: React 19 + TypeScript + Vite
- Backend: Java 21 + Spring Boot 3.3 + Gradle
- Database: PostgreSQL 16
- Cache: Redis 7

## Conventions
- Frontend uses functional components with hooks
- Backend follows DDD (Domain-Driven Design)
- API follows RESTful conventions
- All API responses wrapped in `ApiResponse<T>`
- Error codes follow RFC 7807 Problem Details

## Testing
- Frontend: Vitest + React Testing Library
- Backend: JUnit 5 + Mockito
- Minimum coverage: 80%

## Code Style
- TypeScript: strict mode, no `any`
- Java: follow Google Java Style
- Commit messages: Conventional Commits
```

### 4.3 步骤二：VS Code前端开发工作流

**场景**：为前端添加一个新的用户管理页面。

```
操作流程：
1. 在VS Code中打开 frontend/ 目录
2. 打开Claude面板，输入：
   "@src/pages/ 参考现有的Dashboard页面结构，创建UserManagement页面，
   包含用户列表（表格）、搜索、分页、新增/编辑弹窗"
3. Claude生成Plan，展示要创建/修改的文件列表
4. 审查Plan，确认文件结构符合预期
5. 执行，逐文件审查Inline Diff
6. Accept合理的修改，Reject不满意的
7. 手动微调细节
```

**VS Code中的关键操作截图描述**：
- 侧边栏Claude面板显示对话和Plan
- 编辑器中Inline Diff以红绿对比展示修改
- 底部Terminal可同时运行 `npm run dev` 查看效果

### 4.4 步骤三：IntelliJ后端开发工作流

**场景**：为后端添加对应的User CRUD API。

```
操作流程：
1. 在IntelliJ中打开 backend/ 目录
2. 打开Claude Code Tool Window，输入：
   "在 com.example.user 包下创建完整的User模块：
   Entity、Repository、Service、Controller，
   遵循项目现有的DDD分层架构"
3. Claude感知到项目的Maven结构和现有代码风格
4. 生成符合项目规范的代码
5. 在Diff Preview中审查每个文件
6. IntelliJ自动检测新文件并更新项目索引
```

### 4.5 步骤四：混合工作流——跨前后端联动

当你需要同时修改前端和后端时：

```mermaid
graph LR
    subgraph "需求：添加用户角色字段"
        A[1. IntelliJ修改<br/>User Entity] --> B[2. IntelliJ修改<br/>UserDTO/API]
        B --> C[3. 更新shared/types/<br/>TypeScript类型]
        C --> D[4. VS Code修改<br/>前端表单/展示]
        D --> E[5. 双端测试验证]
    end

    style A fill:#FC801D,color:#fff
    style D fill:#007ACC,color:#fff
```

**关键技巧**：
1. 使用 `CLAUDE.md` 记录跨项目的共享类型定义位置
2. 后端API变更后，在VS Code中使用 `@shared/types/` 引用最新类型
3. 利用Claude Code的Checkpoint功能，在每次跨项目修改前创建检查点

### 4.6 完整命令行脚本——自动化验证

```bash
#!/bin/bash
# verify-cross-platform.sh - 验证前后端一致性

echo "=== 检查后端API字段与前端类型定义一致性 ==="

# 提取后端UserDTO字段
BACKEND_FIELDS=$(cd backend && grep -oP 'private \K\w+' \
  src/main/java/com/example/user/dto/UserDTO.java | sort)

# 提取前端User类型字段
FRONTEND_FIELDS=$(cd frontend && grep -oP '\w+:' \
  src/types/user.ts | tr -d ':' | sort)

# 比较差异
DIFF=$(diff <(echo "$BACKEND_FIELDS") <(echo "$FRONTEND_FIELDS"))
if [ -z "$DIFF" ]; then
  echo "✅ 前后端字段一致"
else
  echo "❌ 发现不一致："
  echo "$DIFF"
  echo "使用 Claude Code 修复：claude -p '修复前端类型定义，使其与后端UserDTO一致'"
fi
```

---

## 第五章：高阶技巧与最佳实践

### 5.1 Checkpoint策略——安全回滚

Claude Code的Checkpoint功能在IDE中尤为重要：

```text
gitgraph
    commit id: "初始状态"
    commit id: "Checkpoint: 开始重构"
    branch feature-refactor
    checkout feature-refactor
    commit id: "Claude修改1"
    commit id: "Claude修改2"
    commit id: "Claude修改3（引入bug）"
    checkout main
    commit id: "Checkpoint: 安全点"
```

**最佳实践**：
- 在让Claude执行大型重构前，先创建Checkpoint
- 每完成一个逻辑单元的修改，Accept后立即Checkpoint
- 使用 `claude --resume` 恢复上一次会话

### 5.2 权限模式场景选择

```mermaid
graph TD
    A[开始任务] --> B{任务类型?}
    B -->|学习/探索| C["Default模式<br/>每步确认"]
    B -->|日常开发| D["Plan模式<br/>审查计划后自动执行"]
    B -->|批量重构| E["Auto-Edit模式<br/>编辑自动/命令确认"]
    B -->|CI/CD脚本| F["Full-Auto模式<br/>⚠️仅限隔离环境"]

    C --> G["安全但慢"]
    D --> H["平衡（推荐）"]
    E --> I["高效/中风险"]
    F --> J["极速/高风险"]
```

### 5.3 上下文优化——让Claude更懂你的项目

**技巧一：CLAUDE.md分层策略**

```
~/.claude/CLAUDE.md          # 全局偏好（编码风格、语言偏好）
project/CLAUDE.md            # 项目级指令（架构、约定）
project/frontend/CLAUDE.md   # 子项目指令（前端特定规则）
```

**技巧二：.claudeignore排除无关文件**

```
# .claudeignore
node_modules/
dist/
build/
*.min.js
*.min.css
.env
secrets/
```

**技巧三：文件引用最佳实践**

VS Code中使用 `@` 引用文件时的优化：
- 精确引用：`@src/auth/login.ts`（优于模糊引用 `@login`）
- 行范围引用：`@src/api/users.ts:10-45`（避免发送整个大文件）
- 多文件引用：`@package.json @tsconfig.json 解释依赖关系`

### 5.4 VS Code + JetBrains双IDE协同配置

```jsonc
// .vscode/settings.json - VS Code项目配置
{
  "claude-code.permissionMode": "plan",
  "claude-code.model": "claude-sonnet-4-6",
  "claude-code.contextProviders": ["files", "git", "lsp"],
  "claude-code.autoCheckpoint": true
}
```

```xml
<!-- .idea/claude.xml - JetBrains项目配置（示例） -->
<application>
  <component name="ClaudeCodeSettings">
    <option name="permissionMode" value="PLAN" />
    <option name="model" value="claude-sonnet-4-6" />
    <option name="autoCheckpoint" value="true" />
  </component>
</application>
```

### 5.5 常见问题排查

**问题一：扩展安装后无法连接**

```bash
# 检查Claude Code CLI版本
claude --version

# 如果版本过低，更新
npm update -g @anthropic-ai/claude-code

# 检查认证状态
claude auth status
```

**问题二：Inline Diff显示异常**

1. 检查文件是否在Git仓库中（Diff功能依赖Git）
2. 确认文件编码为UTF-8
3. 尝试禁用其他Diff相关扩展（可能冲突）

**问题三：大型项目性能优化**

```jsonc
// settings.json - 性能优化配置
{
  // 限制上下文文件大小
  "claude-code.maxFileSize": "100KB",
  
  // 排除大型生成文件
  "claude-code.excludePatterns": [
    "**/*.generated.ts",
    "**/dist/**",
    "**/build/**",
    "**/*.lock"
  ],
  
  // 使用更快的模型处理简单任务
  "claude-code.fastModel": "claude-haiku-4-5"
}
```

**问题四：JetBrains插件与AI Assistant冲突**

JetBrains IDE内置的AI Assistant插件可能与Claude Code插件产生快捷键冲突。解决方案：
1. `Settings` → `Keymap` → 搜索 `Claude` → 重新绑定快捷键
2. 或禁用内置AI Assistant：`Settings` → `Plugins` → 取消勾选 `AI Assistant`

---

## 第六章：不同团队场景的推荐配置

### 6.1 个人开发者

```
推荐：VS Code扩展 + CLI
理由：轻量、灵活、前端全栈覆盖
关键设置：Plan模式、自动Checkpoint
```

### 6.2 企业Java团队

```
推荐：IntelliJ插件 + Team API Key
理由：项目结构深度感知、代码规范统一
关键设置：强制Plan模式、CLAUDE.md团队版、审计日志
```

### 6.3 远程/分布式团队

```
推荐：Desktop App + SSH连接
理由：多会话管理、断线恢复、跨项目切换
关键设置：SSH Key认证、tmux持久会话
```

### 6.4 数据科学团队

```
推荐：VS Code扩展 + Jupyter集成
理由：Notebook支持、数据文件预览
关键设置：Python环境自动检测、数据分析MCP服务器
```

---

## 延伸阅读

| 资源 | 链接 | 说明 |
|------|------|------|
| Claude Code官方文档 - VS Code | code.claude.com/docs/en/vs-code | VS Code扩展安装与使用官方指南 |
| Claude Code官方文档 - JetBrains | code.claude.com/docs/en/jetbrains | JetBrains插件官方文档 |
| Claude Code最佳实践 | code.claude.com/docs/en/best-practices | 官方推荐的使用模式与技巧 |
| Anthropic博客 - Claude Code升级公告 | anthropic.com/news/enabling-claude-code-to-work-more-autonomously | VS Code原生扩展与Checkpoint功能发布 |

---

## 训练营适用性评估

| 维度 | 评估 |
|------|------|
| **适合训练营类型** | 全栈开发训练营、企业AI工具培训、效率提升工作坊 |
| **学员基础要求** | 3个月以上开发经验，熟悉Git和至少一种IDE |
| **预计教学时长** | 4-6小时（含实操练习） |
| **实操练习占比** | 70%（大量动手配置和代码修改练习） |
| **分组建议** | 按主要IDE分组：VS Code组和JetBrains组，最后交换经验 |
| **考核方式** | 完成一个跨文件重构任务，要求使用Plan Mode + Inline Diff审查 |

---

## 参考来源

1. [Use Claude Code in VS Code — Claude Code Docs](https://code.claude.com/docs/en/vs-code) — VS Code扩展官方安装与使用指南
2. [JetBrains IDEs — Claude Code Docs](https://code.claude.com/docs/en/jetbrains) — JetBrains插件官方配置文档
3. [Claude Code: Part 7 - IDE Integration with VS Code and JetBrains](https://www.letanure.dev/blog/2025-08-05--claude-code-part-7-ide-integration-vscode-jetbrains) — IDE集成深度教程系列
4. [Platforms and integrations — Claude Code Docs](https://code.claude.com/docs/en/platforms) — 五种运行界面对比与选择指南
5. [Claude Code IDE集成实战 — LearnAgent](https://learnagent.org/library/playbooks/ide-integrations/) — VS Code与JetBrains混合工作流实战

> [!tip] 51学通信知识星球
> **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。
> **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。
> **当前规模**：5200 篇主题 / 990 个回答，198 元/年。
> **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。
> **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。

![51学通信知识星球海报-扫码加入](https://wiki.500nian.com/images/zhixingqiu_qrcode.png)