<!-- title: Claude Code编辑器集成：VS Code与JetBrains配置首跑 -->

# Claude Code 编辑器集成：VS Code 与 JetBrains 配置首跑

## 概述

本教程面向已经（或即将）在终端跑通 Claude Code，但想把它"嵌进编辑器"的零基础开发者。你将学会在 VS Code 与 JetBrains（IntelliJ / PyCharm / WebStorm 等）两个主流 IDE 中安装官方插件、完成首次连接，并理解集成后多出的四大增强能力：内联 Diff 预览、诊断面板直读（LSP）、文件引用点击跳转、终端共享工作区。读完即可在一个真实小项目里完成"装—连—改—查"闭环。

## 前置条件

- **操作系统**：Windows / macOS / Linux 任一，64 位。
- **Node.js**：v18 及以上（建议 LTS 版）。在终端运行 `node --version` 应返回 `v18.x.x` 或更高。
- **包管理器**：随 Node 安装的 `npm`，或你更顺手的 `pnpm` / `yarn`。
- **编辑器**：VS Code（建议 1.85+）或任意 JetBrains 系列 IDE（2024.1 及以上更稳）。
- **账号**：一个 Anthropic 账号（Claude Pro / Max 订阅，或 API Key）。首次运行 `claude` 时会引导登录，本教程不重复展开登录细节。
- **一个练习项目**：任何含有源码的文件夹即可；没有的话，实战案例里会带你新建一个。

如果你还没装过 Claude Code CLI，也不用担心——下面的第一步就是从零装起。

---

## 正文

### 第 1 步：安装 Claude Code CLI（IDE 插件的"地基"）

无论你最终用 VS Code 还是 JetBrains，**官方 IDE 插件都是 CLI 的"外壳"**——真正的引擎仍然是命令行程序。所以第一步永远是把 CLI 装好。

打开任意终端（Windows 用 PowerShell 或 Git Bash，macOS/Linux 用自带 Terminal），执行：

```bash
npm install -g @anthropic-ai/claude-code
```

验证安装：

```bash
claude --version
```

**预期结果**：屏幕打印一串版本号，形如 `1.x.x`。

**常见问题**：

| 现象 | 原因 | 解决 |
|------|------|------|
| `claude: command not found` | npm 全局 bin 目录不在 PATH | 执行 `npm config get prefix` 找到前缀，把其下的 `bin`（macOS/Linux）或根目录（Windows）加入 PATH |
| `EACCES: permission denied` | 全局安装缺权限 | 改用 `sudo`（不推荐），或配置 npm 全局目录到用户家目录 |
| 安装极慢/失败 | 网络受限 | 设置镜像或代理：`npm config set registry <镜像地址>`，或导出 `HTTPS_PROXY` |

装好 CLI 后，先在终端跑一次 `claude`，按提示完成账号登录与一次性引导（选择主题、信任目录等）。这一步通过后，再进入编辑器集成。

### 第 2 步：VS Code 扩展安装与首次连接

**操作说明**：

1. **打开扩展面板**：在 VS Code 中按 `Ctrl+Shift+X`（Windows/Linux）或 `Cmd+Shift+X`（macOS）。
2. **搜索并安装**：输入 `Claude Code`，认准发布者为 **Anthropic**，点击 Install。
   - 或用快捷方式：按 `Ctrl+P` / `Cmd+P` 打开 Quick Open，粘贴：
     ```
     ext install anthropic.claude-code
     ```
3. **打开项目文件夹**：`File > Open Folder`，选择你的项目根目录。Claude Code 以"工作区"为单位工作，不要只打开单个散落文件。
4. **打开集成终端**：按 `` Ctrl+` ``（反引号，Tab 键上方）。
5. **启动 Claude Code**：
   ```bash
   claude
   ```

**预期结果**：终端顶部出现一行确认信息，表明 Claude Code 已检测到自己运行在装了扩展的 VS Code 内，并自动建立连接。随后出现交互式输入提示符，你可以直接打字提需求。

**手动连接（兜底）**：极少数情况下（例如刚重启 VS Code、或多窗口切换）自动检测失效，可显式指定：

```bash
claude --ide
```

这条命令强制让 CLI 与当前 IDE 实例握手。看到连接确认即成功。

**常见问题**：

- *装了扩展但 `claude` 启动后没出现"已连接"提示*：先确认扩展确实启用（面板里搜索到后按钮显示"已安装"且未被禁用），再用 `claude --ide` 强连一次。
- *终端里 Claude 的颜色乱码*：在 VS Code 设置里把终端类型切换为支持真彩色的 shell，或临时关闭其它改色插件排查冲突。

### 第 3 步：JetBrains 插件安装与首次连接

**操作说明**：

1. 打开 IntelliJ IDEA / PyCharm / WebStorm / GoLand 等任一 JetBrains IDE。
2. 进入 **Settings（macOS 为 Preferences）> Plugins > Marketplace**。
3. 搜索 `Claude Code`，安装**发布者为 Anthropic** 的插件。
4. 如提示重启，点击 Restart IDE。
5. 打开你的项目，调出 **内置终端**（View > Tool Windows > Terminal，或快捷键）。
6. 在终端执行：
   ```bash
   claude
   ```

**预期结果**：与 VS Code 体验一致——IDE 弹出/在工具窗口显示 Claude 已连接，功能集相同：内联 Diff、诊断直读、文件引用跳转、选中代码上下文共享。

**支持的 IDE**：官方说明 Claude Code 插件兼容**绝大多数**基于 IntelliJ 平台的 IDE，包括 IntelliJ IDEA、PyCharm、WebStorm、GoLand、PhpStorm、RubyMine、CLion、Android Studio 等。

**常见问题**：

| 现象 | 解决 |
|------|------|
| Marketplace 搜不到插件 | 升级 IDE 到较新版本；或在 Plugins 设置里确认未禁用 Marketplace |
| 装完插件 `claude` 仍提示"未检测到 IDE" | 用 `claude --ide` 强连；确认 CLI 版本与插件版本匹配（都更新到最新） |
| Diff 弹窗快捷键与 IDE 原生冲突 | 在 IDE 的 Keymap 设置里搜索相关 action 重新绑定 |

### 第 4 步：理解集成后多出的四大增强能力

在终端里直接跑 `claude` 也能干活，那为什么要费力装 IDE 插件？因为插件在 CLI 之上叠加了四项"看得见摸得着"的改进。

#### 4.1 内联 Diff 视图（Inline Diff）

当 Claude 修改文件时，**不再是悄悄写入磁盘**，而是先在编辑器里打开一个 Diff 面板：新增内容高亮为绿色，删除内容标红。你可以：

- **接受整个 Diff**
- **拒绝整个 Diff**
- **逐 hunk（代码块）单独接受/拒绝**

这彻底解决了"Claude 把我没料到的文件改了"的惊吓问题——改动先过你的眼睛，再落盘。

#### 4.2 诊断面板直读（LSP / Problems Integration）

插件把 Claude 接到了编辑器的 **Problems（问题）面板**。你工程里的 TypeScript 类型错误、ESLint 警告、Python 类型检查报错、语言服务器诊断……Claude 全部能"看见"，**无需你复制粘贴报错文本**。

典型用法：打开一个有红色波浪线的文件，直接对 Claude 说"修一下当前文件的错误"，它已经知道错在哪、为什么错。这在大型代码库里尤其省事——Problems 面板常常横跨十几个文件几十条条目，手工摘抄既累又易漏。

#### 4.3 文件引用点击跳转（Click-to-Navigate）

当 Claude 在回答里提到某个位置，例如 `src/app/page.tsx:42`，这个引用会渲染成**可点击的链接**。点一下，编辑器立刻跳转到该文件第 42 行。没有插件时，你得手动 `Ctrl+P` 打开文件、再 `Ctrl+G` 跳行号——单次看不出差别，一个长会话积累下来节省大量来回。

#### 4.4 终端面板共享工作区（Terminal Panel Integration）

Claude Code 跑在编辑器的**集成终端**里，意味着它与你的编辑器共享同一个工作区根目录。你可以开两个终端面板：一个跑 Claude，一个跑 dev server / 测试，二者看到的是同一棵文件树，路径天然对齐，不存在"外部终端的当前目录和编辑器不一致"的割裂感。

### 第 5 步：选中代码作为上下文（Selection Sharing）

这是 IDE 集成最容易被忽略、却极好用的一个特性。

在编辑器里**选中一段代码**，然后到终端对 Claude 提问。插件会把这段选区作为上下文一并送上——你不必再描述"我说的就是那个函数"，也不必复制粘贴。

例如：选中一个复杂函数体，在 Claude 提示符里直接输入：

```
这段代码有什么潜在的空指针风险？给我一个更安全的重构版本。
```

Claude 看到的就是你选中的那段，并据此作答、给出 Diff。

> 提示：如果发现选区没被自动带上，检查插件是否成功连接（终端应有"已连接 IDE"提示），必要时 `claude --ide` 重连。

### 第 6 步：常见问题速查

- **自动检测失败**：优先 `claude --ide` 强连；确认 CLI 与插件/扩展版本都是最新（`claude update` 升级 CLI，扩展商店里点 Update）。
- **Diff 面板不弹出**：确认你用的是编辑器**内置终端**，而非外部终端 app。外部终端里运行的 CLI 无法把 Diff 推回编辑器。
- **诊断信息读不到**：确保对应语言的语言服务器（LSP）已就绪——TypeScript 需 VS Code 内置 TS Server，Python 需 Pylance/Pyright 等。Problems 面板有红项，Claude 才有得读。
- **JetBrains 重启后失连**：先开 IDE、再在 IDE 内置终端启动 `claude`，顺序不要反。
- **多窗口串扰**：每个 VS Code 窗口对应独立工作区，确认你在目标项目的窗口里启动 `claude`。

---

## 实战案例：在 VS Code 中跑通一个 TypeScript 小项目

下面用一个完整、可复现的例子，把上面所有步骤串起来。

### 目标

新建一个 TypeScript 项目，写一个有 bug 的除法函数，用 Claude Code（VS Code 集成）发现并修复问题，全程享受 Diff 预览与诊断直读。

### 步骤

**① 初始化项目**

在 VS Code 里打开一个空文件夹（File > Open Folder），打开集成终端：

```bash
npm init -y
npm install -D typescript ts-node @types/node
npx tsc --init
```

**② 写一段"带坑"的代码**

新建 `src/calc.ts`：

```typescript
export function divide(a: number, b: number): number {
  return a / b;          // 故意没处理除零
}

export function average(nums: number[]): number {
  const sum = nums.reduce((x, y) => x + y, 0);
  return divide(sum, nums.length);  // 空数组时 nums.length === 0 → 触发坑
}
```

保存后，打开 `Problems` 面板（`Ctrl+Shift+M`）。此刻可能没有 TS 类型错误，但 `average([])` 在运行时会得到 `NaN`，这是逻辑隐患。

**③ 启动 Claude Code**

终端执行：

```bash
claude
```

确认看到 IDE 已连接提示。

**④ 提需求，让 Claude 自查自纠**

在 Claude 提示符里输入：

```
检查 src/calc.ts 里 divide 和 average 的边界问题，除零时抛出明确的错误，
并补一个 average 的单测用例覆盖空数组。
```

**⑤ 观察集成带来的差异**

- **诊断直读**：如果你给 `average` 加了类型注解或 ESLint 规则触发红线，Claude 无需你贴报错就能看到。
- **内联 Diff**：Claude 改 `src/calc.ts` 时，编辑器弹出 Diff 面板，绿色是新增的 `if (b === 0)` 抛错逻辑，逐 hunk 接受。
- **文件引用跳转**：Claude 提到 `src/calc.test.ts:10` 时可点击直达。
- **选区上下文**：手动选中 `divide` 函数，再追问"这个抛错信息对调用方友好吗"，Claude 基于选区优化文案。

**⑥ 验收**

接受 Diff 后，运行：

```bash
npx ts-node src/calc.ts      # 或运行你的测试
```

预期：除零时抛出如 `Division by zero` 的明确错误，而非静默 `NaN`；单测覆盖空数组分支并通过。

至此，你在 IDE 内完成了 **装 CLI → 装扩展 → 连接 → 借助 Diff/诊断/跳转/选区改代码** 的完整闭环。

---

## 工作流程图

下图展示从环境准备到在 IDE 内完成一次代码修改的全流程：

```mermaid
flowchart TD
    A[准备: Node.js v18+ 与 Anthropic 账号] --> B[安装 CLI<br/>npm i -g @anthropic-ai/claude-code]
    B --> C{选择 IDE}
    C -->|VS Code| D1[扩展面板搜 Claude Code<br/>ext install anthropic.claude-code]
    C -->|JetBrains| D2[Settings > Plugins > Marketplace<br/>搜 Claude Code 并重启]
    D1 --> E[打开项目文件夹<br/>内置终端运行 claude]
    D2 --> E
    E --> F{自动连接?}
    F -->|否| G[claude --ide 强制连接]
    F -->|是| H[选中代码 / 查看 Problems 面板]
    G --> H
    H --> I[Claude 给出修改]
    I --> J[内联 Diff 预览<br/>逐 hunk 接受/拒绝]
    J --> K[诊断直读校验<br/>Problems 面板清零]
    K --> L[点击文件引用跳转复核]
    L --> M[落盘完成]
```

---

## 延伸阅读

- **Claude Code 官方文档总览**：`code.claude.com/docs/en/overview` —— 了解五大运行面（终端 CLI、VS Code、JetBrains、桌面、网页）的全景。
- **JetBrains 集成官方页**：`code.claude.com/docs/en/jetbrains` —— 支持的 IDE 列表与插件特性权威说明。
- **VS Code 扩展市场页**：`marketplace.visualstudio.com` 搜 "Claude Code" —— 版本历史与发布说明。
- **Anthropic 官方更新**：`anthropic.com/news` —— 追踪插件/扩展的新功能发布。

---

## 训练营适用性评估

- **适合的训练营类型**：面向"有编程基础、首次接触 AI 编程工具"的开发者训练营；企业内训中"提升团队 AI 工具采用率"的开场课；前端 / 全栈 / Java 等以 IDE 为中心的工作流培训。
- **预计教学时长**：**1.5–2 小时**（含动手）。其中讲解 30 分钟、IDE 安装与连接实操 30 分钟、实战案例 45–60 分钟。若学员网络环境复杂（需代理/镜像），预留额外 15 分钟排障。
- **难度定位**：入门级。不需要任何 Claude Code 先验经验，但要求会基本使用所选 IDE 与命令行。
- **延伸建议**：本课作为"Day 1 装机课"后，可无缝衔接"权限模式与项目配置""CLAUDE.md 项目记忆""交互掌控与上下文管理"等进阶主题。

---

## 参考来源

1. [JetBrains IDEs — Claude Code Docs](https://code.claude.com/docs/en/jetbrains) — Anthropic 官方 JetBrains 插件集成说明，含支持的 IDE 与特性（交互式 Diff、选区上下文共享）。
2. [Claude Code in VS Code: Complete Setup Guide 2026 — explainx.ai](https://www.explainx.ai/blog/claude-code-vscode-ide-extension-setup-guide-2026) — 从干净机器到完整连接的逐步安装指南，详解四大增强能力（内联 Diff、LSP 诊断直读、文件引用跳转、终端集成）。
3. [IDE Integration: VS Code, JetBrains, and Beyond — Developer Toolkit](https://developertoolkit.ai/en/claude-code/quick-start/ide-integration/) — 对比"外部终端 vs IDE 内运行"的工作流差异，说明为什么要把 Claude Code 嵌进编辑器。
4. [How to Integrate Claude Code with VSCode and JetBrains — apidog](https://apidog.com/blog/claude-code-ide-integrations/) — 双平台安装与故障排查的技术指南补充。
5. [Overview — Claude Code Docs](https://code.claude.com/docs/en/overview) — 官方总览页，确认 Claude Code 的多运行面架构与 IntelliJ/PyCharm/WebStorm 插件覆盖范围。

> [!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)