本教程面向已经（或即将）在终端跑通 Claude Code，但想把它"嵌进编辑器"的零基础开发者。你将学会在 VS Code 与 JetBrains（IntelliJ / PyCharm / WebStorm 等）两个主流 IDE 中安装官方插件、完成首次连接，并理解集成后多出的四大增强能力：内联 Diff 预览、诊断面板直读（LSP）、文件引用点击跳转、终端共享工作区。读完即可在一个真实小项目里完成"装—连—改—查"闭环。
node --version 应返回 v18.x.x 或更高。npm，或你更顺手的 pnpm / yarn。claude 时会引导登录，本教程不重复展开登录细节。如果你还没装过 Claude Code CLI，也不用担心——下面的第一步就是从零装起。
无论你最终用 VS Code 还是 JetBrains，官方 IDE 插件都是 CLI 的"外壳"——真正的引擎仍然是命令行程序。所以第一步永远是把 CLI 装好。
打开任意终端（Windows 用 PowerShell 或 Git Bash，macOS/Linux 用自带 Terminal），执行：
npm install -g @anthropic-ai/claude-code
验证安装：
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，按提示完成账号登录与一次性引导（选择主题、信任目录等）。这一步通过后，再进入编辑器集成。
操作说明：
Ctrl+Shift+X（Windows/Linux）或 Cmd+Shift+X（macOS）。Claude Code，认准发布者为 Anthropic，点击 Install。
- 或用快捷方式：按 Ctrl+P / Cmd+P 打开 Quick Open，粘贴：
ext install anthropic.claude-codeFile > Open Folder，选择你的项目根目录。Claude Code 以"工作区"为单位工作，不要只打开单个散落文件。Ctrl+`（反引号，Tab 键上方）。bash
claude预期结果：终端顶部出现一行确认信息，表明 Claude Code 已检测到自己运行在装了扩展的 VS Code 内，并自动建立连接。随后出现交互式输入提示符，你可以直接打字提需求。
手动连接（兜底）：极少数情况下（例如刚重启 VS Code、或多窗口切换）自动检测失效，可显式指定：
claude --ide
这条命令强制让 CLI 与当前 IDE 实例握手。看到连接确认即成功。
常见问题：
claude 启动后没出现"已连接"提示：先确认扩展确实启用（面板里搜索到后按钮显示"已安装"且未被禁用），再用 claude --ide 强连一次。操作说明：
Claude Code，安装发布者为 Anthropic 的插件。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 重新绑定 |
在终端里直接跑 claude 也能干活，那为什么要费力装 IDE 插件？因为插件在 CLI 之上叠加了四项"看得见摸得着"的改进。
当 Claude 修改文件时，不再是悄悄写入磁盘，而是先在编辑器里打开一个 Diff 面板：新增内容高亮为绿色，删除内容标红。你可以：
这彻底解决了"Claude 把我没料到的文件改了"的惊吓问题——改动先过你的眼睛，再落盘。
插件把 Claude 接到了编辑器的 Problems（问题）面板。你工程里的 TypeScript 类型错误、ESLint 警告、Python 类型检查报错、语言服务器诊断……Claude 全部能"看见"，无需你复制粘贴报错文本。
典型用法：打开一个有红色波浪线的文件，直接对 Claude 说"修一下当前文件的错误"，它已经知道错在哪、为什么错。这在大型代码库里尤其省事——Problems 面板常常横跨十几个文件几十条条目，手工摘抄既累又易漏。
当 Claude 在回答里提到某个位置，例如 src/app/page.tsx:42，这个引用会渲染成可点击的链接。点一下，编辑器立刻跳转到该文件第 42 行。没有插件时，你得手动 Ctrl+P 打开文件、再 Ctrl+G 跳行号——单次看不出差别，一个长会话积累下来节省大量来回。
Claude Code 跑在编辑器的集成终端里，意味着它与你的编辑器共享同一个工作区根目录。你可以开两个终端面板：一个跑 Claude，一个跑 dev server / 测试，二者看到的是同一棵文件树，路径天然对齐，不存在"外部终端的当前目录和编辑器不一致"的割裂感。
这是 IDE 集成最容易被忽略、却极好用的一个特性。
在编辑器里选中一段代码，然后到终端对 Claude 提问。插件会把这段选区作为上下文一并送上——你不必再描述"我说的就是那个函数"，也不必复制粘贴。
例如：选中一个复杂函数体，在 Claude 提示符里直接输入：
这段代码有什么潜在的空指针风险？给我一个更安全的重构版本。
Claude 看到的就是你选中的那段，并据此作答、给出 Diff。
提示：如果发现选区没被自动带上，检查插件是否成功连接（终端应有"已连接 IDE"提示），必要时
claude --ide重连。
claude --ide 强连；确认 CLI 与插件/扩展版本都是最新（claude update 升级 CLI，扩展商店里点 Update）。claude，顺序不要反。claude。下面用一个完整、可复现的例子，把上面所有步骤串起来。
新建一个 TypeScript 项目，写一个有 bug 的除法函数，用 Claude Code（VS Code 集成）发现并修复问题，全程享受 Diff 预览与诊断直读。
① 初始化项目
在 VS Code 里打开一个空文件夹（File > Open Folder），打开集成终端：
npm init -y
npm install -D typescript ts-node @types/node
npx tsc --init
② 写一段"带坑"的代码
新建 src/calc.ts：
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
终端执行：
claude
确认看到 IDE 已连接提示。
④ 提需求，让 Claude 自查自纠
在 Claude 提示符里输入：
检查 src/calc.ts 里 divide 和 average 的边界问题，除零时抛出明确的错误，
并补一个 average 的单测用例覆盖空数组。
⑤ 观察集成带来的差异
average 加了类型注解或 ESLint 规则触发红线，Claude 无需你贴报错就能看到。src/calc.ts 时，编辑器弹出 Diff 面板，绿色是新增的 if (b === 0) 抛错逻辑，逐 hunk 接受。src/calc.test.ts:10 时可点击直达。divide 函数，再追问"这个抛错信息对调用方友好吗"，Claude 基于选区优化文案。⑥ 验收
接受 Diff 后，运行：
npx ts-node src/calc.ts # 或运行你的测试
预期：除零时抛出如 Division by zero 的明确错误，而非静默 NaN；单测覆盖空数组分支并通过。
至此，你在 IDE 内完成了 装 CLI → 装扩展 → 连接 → 借助 Diff/诊断/跳转/选区改代码 的完整闭环。
下图展示从环境准备到在 IDE 内完成一次代码修改的全流程：
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[落盘完成]
code.claude.com/docs/en/overview —— 了解五大运行面（终端 CLI、VS Code、JetBrains、桌面、网页）的全景。code.claude.com/docs/en/jetbrains —— 支持的 IDE 列表与插件特性权威说明。marketplace.visualstudio.com 搜 "Claude Code" —— 版本历史与发布说明。anthropic.com/news —— 追踪插件/扩展的新功能发布。[!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 等场景全覆盖。