VS Code、Cursor 里用 Claude Code

📍 Claude Code 进阶

VS Code 编辑器里 Claude 面板停在右侧，顶部 Spark 图标点亮

那个让洁柔放弃终端的瞬间

5 月某天下午，洁柔在我的项目仓库里改一段 Python——她在 Claude Code 终端里跟我说「帮我把 user_id 改成 account_id，全项目」。

我说好，10 秒之内列出 11 个文件 + 改动 diff。

她在终端里看，但是——终端字号比她的 VS Code 编辑器小，diff 用 unicode 拼出来，红绿配色比 VS Code 弱——眼睛要凑近看。改完之后她说：

「下次能不能…让对照视图直接出现在 VS Code 里？像 git 那种左右两栏？」

我说：「你装一下 Claude Code 的 VS Code 扩展就行，跟命令行版完全一套数据，但对照视图是你熟悉的 VS Code 视图。」

那一刻她切了。从此她 80% 时间在 VS Code 跟我聊,20% 还在命令行(跑 ! 开头的快捷命令之类的)。

这一篇讲清楚：Claude Code 在编辑器里长啥样、装哪个、什么时候用编辑器 / 什么时候回命令行。

你在哪个编辑器，这扩展都能装

命令行 vs 编辑器两种工作姿态对比

官方扩展叫 anthropic.claude-code（发布者就是 Anthropic 自己）。VS Code 和它的衍生版都装这同一个（JetBrains 另说，见表格最后一行）：

编辑器	怎么装
VS Code	扩展市场直接搜「Claude Code」
Cursor	扩展市场搜「Claude Code」(同一个包)
Devin Desktop（原 Windsurf，2026-06-02 改名）	同上
Kiro	同上
其他 VS Code 衍生版	Open VSX 注册表
JetBrains 系(IntelliJ / PyCharm / WebStorm)	另有一个官方插件（和上面不是同一个包）：它不带命令行版，要先按安装篇装好 `claude`，用法是在 IDE 的终端里跑 `claude`，没有 VS Code 那样的图形聊天面板

前提：VS Code 1.94.0 或更高版本，装之前先 Help → About 看一眼版本；登录要 Claude 付费订阅（Pro / Max / Ultra / Team / Enterprise）或 Claude Console 账号，免费账号用不了。国内读者先看下面 Step 2 的提示。

装好之后第一次打开

Step 1：找 Spark(火花) 图标 ✱

扩展激活后，4 个地方都能开 Claude 面板:

编辑器右上角 ——文件打开时出现 Spark 图标(最快)
左侧活动栏(Activity Bar)——会话列表常驻
命令面板(快捷键 Cmd+Shift+P / Ctrl+Shift+P)搜「Claude Code」
状态栏右下角 「✻ Claude Code」字样——没打开任何文件也能用，但有前提：要先把扩展设置里的 preferredLocation 改成 sidebar，或者用过一次「Claude Code: Open in Side Bar」，它才会出现

Step 2：第一次登录

第一次开会弹登录页，点 Sign in → 浏览器自动打开 Anthropic 授权 → 回来就好。

🚨 国内读者先看：Anthropic 不向中国大陆提供服务，扩展默认要登录 Anthropic 账号，国内注册、订阅、付款都过不去。

扩展其实能改服务器地址：在 VS Code 的用户设置（命令面板搜「Preferences: Open User Settings (JSON)」）里，把 DeepSeek 配置篇列的那组变量（ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN 等）一次填全，写进 claudeCode.environmentVariables（它是一个列表，每个变量要写成 { "name": "ANTHROPIC_BASE_URL", "value": "…" } 这样的一项，写成普通的「变量名: 值」不会生效），再勾选扩展设置里的 Disable Login Prompt（不弹登录页），就能接 DeepSeek 这类兼容接口。注意这组变量只能写在用户设置里，写进项目的 .vscode/settings.json 不生效。但 Anthropic 明确不支持把 Claude Code 接到非 Claude 模型，DeepSeek 官方也只写了终端里的配法，这条路出了问题没人兜底（本站未实测）。

新手更稳妥的做法：按 DeepSeek 配置篇设好变量，在 VS Code 内置终端里跑命令行版 claude（要另装命令行版，见安装篇）——一样能用上编辑器集成：选中的代码自动带上，Manual 模式下改文件的对照视图也在 VS Code 里打开。

Step 3：开始用

打开任何一个文件，鼠标选中一段代码——Claude 自动看到你选中的内容(不用复制粘贴)。然后：

「解释一下选中这段是干嘛的。」

它会基于选中的代码答你。比贴代码到对话框快 5 秒。

4 个杀手锏功能（扩展里最顺手）

对照视图和 @ 引用，在 VS Code 内置终端里跑命令行版时也有，只是在扩展里用起来更顺手；方案文档里的行内评论、多标签页的状态色点、图形化的会话列表，才是扩展独有的。看完你就理解为啥很多人切了编辑器。

🎯 1. 内嵌对照视图：在你的编辑器里看修改

左右两栏对照视图 + 接受/拒绝/编辑三按钮

⚠️ 先确认模式：只有 Manual（手动确认） 模式下，Claude 改文件前才会弹出这个对照视图。2.1.283 起，扩展和终端的新会话默认从 Auto（自动） 模式开始（Pro / Max / Ultra / Team 订阅用户更早就是这样），Auto 和 Edit automatically（自动改文件）模式下，工作区里的大多数文件会直接改，不弹对照。

想逐个审改动，有两个办法：点输入框底部的模式指示，选 Manual（扩展会记住你上次选的模式）；或者在 VS Code 用户设置里把 claudeCode.initialPermissionMode 设为 default（界面上叫 Manual）。接 DeepSeek 等非 Claude 模型时，auto 大概率用不了，会从 Manual 开始，以输入框底部显示的模式为准。已经改完的文件想退回，鼠标悬停在某条消息上，点出现的回退按钮就行（检查点，见这篇）。

Manual 模式下，Claude 要改文件时，直接在 VS Code 里弹出左右两栏对照视图 —— 跟 git 的 diff 一模一样：

左侧：原文件
右侧:Claude 提议的改后版本
下方:✅ 接受 / ❌ 拒绝 / ✏️ 编辑(直接在对照视图里改 Claude 的草稿)

如果你在对照视图里手动改了,Claude 会被告知你改过，之后它不会假设文件还是它最初提议的样子。

比命令行版强在哪:VS Code 的字号、配色、键盘导航都是你熟悉的——眼睛不累。

🏷️ 2. 用 @ 引用文件：把代码精准甩进对话框

选中代码 → 按 Option+K → @文件名#5-10 出现在对话框

在对话框里打 @,自动模糊匹配项目里所有文件：

> 解释 @auth 的登录逻辑
   ↑ 模糊匹配 auth.js / AuthService.ts 等

或者带行号精准定位:

> 修一下 @app.ts#5-10 的 bug
   ↑ 只关注 app.ts 第 5-10 行

🌟 杀手锏快捷键:编辑器里选中代码 → 按 Option+K (Mac) / Alt+K (Win) → 自动在对话框里插入 @file.ts#5-10 引用。

文件特别大(比如 PDF)？可以告诉 Claude 「读 @docs/manual.pdf 第 1-10 页」。它支持只读指定页。

📝 3. 计划模式：把方案先写成文档让你审

切到 计划模式(Plan mode)——在对话框底部点模式切换。Claude 不直接改文件，先写一份完整方案文档(markdown 格式),作为编辑器标签页打开,你可以行内加评论像代码审查一样反馈。

满意了再点确认，它才开始动手。

适合：涉及多文件 / 大规模重构 / 架构方向 —— 改之前先对齐比改完再撤回省事 10 倍。

🗂️ 4. 多对话标签页并行

4 个 Claude 对话标签页并排 + 一个状态指示蓝点

不像命令行版一个终端窗口只能开一个会话——扩展版在同一个窗口里就能开多个对话:

拖面板 到任何位置(右侧栏 / 左侧栏 / 当编辑器里的一个标签页)
命令面板 → Open in New Tab(Cmd+Shift+Esc)开新对话
Open in New Window 开独立新窗口

每个对话有独立的历史 + 上下文——你可以一边在标签页 1 改简历，一边在标签页 2 调试代码，互不打架。

标签页上的小色点告诉你状态：

🔵 蓝点 —— 这个标签页在等你批准什么操作
🟠 橙点 —— 任务完成但标签页当时没在前台(防止你错过)

几个值得记的快捷键

快捷键	作用
Cmd/Ctrl + Esc	切换焦点(编辑器 ↔ Claude 面板)
Option/Alt + K	编辑器里选中代码 → 自动插入 @ 文件引用到对话框
Cmd/Ctrl + Shift + Esc	在新标签页里开新对话
Cmd/Ctrl + Shift + T	重新打开最近关闭的 Claude 会话
Shift + Enter	对话框换行(不发送)
Ctrl + O	展开 / 折叠所有思考(thinking)块

⚠️ Mac 用户注意:macOS Tahoe 之后系统 Game Overlay 默认占用 Cmd+Esc —— 系统设置 → 键盘 → 键盘快捷键 → Game Controllers，取消 Game Overlay 勾选，VS Code 这个快捷键才生效。

什么时候用编辑器 / 什么时候回命令行

命令行 vs 编辑器两种适用场景对比

两个版本共用同一份对话历史——你编辑器里聊了一段，在命令行里跑 claude --resume 能继续接上。所以不是非此即彼，是看场景。

用编辑器扩展	用命令行
改代码 / 需要看对照视图	跑命令 / 部署 / 一次性脚本
@ 引用文件 + 选中代码当上下文	`!` 快捷跑系统命令(扩展没这个)
计划模式审大改动	Tab 键补全命令名(扩展没这个)
多任务并行(多标签页)	自动化 / CI 流水线(扩展不能 headless 跑)
给同事演示 / 入门读者	老手日常 + 定时任务

一个简单的切换技巧

命令行版跟扩展版共用 ~/.claude/settings.json——你在命令行里配的钩子 / MCP 服务，扩展自动继承。服务器地址和密钥那组变量是例外：写在 settings.json 里的能传给扩展启动的 Claude，但过不了扩展自己的登录检查，要写进 VS Code 用户设置的 claudeCode.environmentVariables（见上面「国内读者先看」）。

你可以在 VS Code 内置终端跑 claude（开命令行版；只装扩展的话终端里没有这个命令，要另装命令行版，见安装篇），它也会自动连上当前 VS Code（Manual 模式下对照视图用 VS Code 界面打开、选中的代码自动带上）。

最佳节奏:主面板挂图形版(对话 / 看对照视图 / @ 引用) + 内置终端跑 claude(跑命令 / Tab 补全)。两边数据互通。

进阶：从浏览器或脚本一键开 Claude 标签页

进阶玩法——扩展注册了 vscode://anthropic.claude-code/open 这样的链接(叫 URI scheme)。你可以从浏览器书签 / 命令行脚本 / 第三方工具一行命令打开新 Claude 标签页。

Mac 在终端里：

open "vscode://anthropic.claude-code/open?prompt=review%20my%20changes"

Linux 在终端里：

xdg-open "vscode://anthropic.claude-code/open?prompt=review%20my%20changes"

Windows 在 PowerShell 里：

Start-Process "vscode://anthropic.claude-code/open?prompt=review%20my%20changes"

参数：

prompt=... —— 预填到对话框(不自动发送，需要 URL 编码)
session=... —— 恢复一个已有会话 ID

用场景：把「请帮我审一下这个分支」做成桌面快捷方式 / Alfred 工作流 / GitHub Pull Request 链接钩子。

3 个新手最容易踩的坑

❌ 坑 1：打开 VS Code 看不到火花图标

最常见的原因是没打开任何文件——火花图标在编辑器工具栏只在有打开文件时才显示。

修正:

打开任何一个文件(.md / .py / .txt 都行)
或者 Cmd/Ctrl+Shift+P 打开命令面板，搜「Claude Code」（最稳，任何时候都能用）
或者点状态栏右下角「✻ Claude Code」（前提是 preferredLocation 设成了 sidebar，或用过「Open in Side Bar」，否则默认不显示）

❌ 坑 2：登录后扩展还是显示「未登录」

通常是 VS Code 没继承你命令行的环境变量——你的 ANTHROPIC_API_KEY(API 密钥)在 ~/.zshrc 设了，但 VS Code 是从 Dock / 桌面快捷方式启动的，没读到。

修正:从命令行启动 VS Code ——

cd ~/your-project
code .

这样 VS Code 继承当前 shell 的所有环境变量。

❌ 坑 3：抢了别的 AI 扩展的快捷键

如果你装了 Cline / Continue / Cody 等其他 AI 编程扩展——火花图标可能不显示，或者快捷键冲突。

修正:临时禁用其他 AI 扩展测试 Claude Code 能不能正常工作。确认是冲突后，在 VS Code 设置里 rebind 快捷键。

一个完整的编辑器工作流(给小白看)

下面是一个真实周二上午的工作流——从开始到结束半小时（这天用的是 Manual 模式，所以改文件前会弹对照视图）：

09:30 在 VS Code 打开一个 Python 项目
09:31 点编辑器右上角 ✱ → Claude 面板出现在右侧
09:32 选中 main.py 第 10-30 行 → 按 Option+K → 对话框里自动出现 @main.py#10-30
09:33 打 "这段函数太长了,帮我拆成 3 个小函数,保持外部接口不变"
09:34 Claude 切到计划模式 → 编辑器开了一个方案文档标签页
09:36 我在方案文档里行内加评论:"第 2 个函数名改成 validate_input"
09:37 点接受 → 看左右两栏对照视图,3 个文件改动
09:38 全部接受
09:40 内置终端跑 `claude` → `!python -m pytest tests/` → 测试通过
09:42 在 Claude 面板说 "提交一下,commit message 你写"
09:43 git 自动 commit + push,我看了一眼对照视图就走开了

整个过程没复制粘贴过文字，没切过窗口，没碰过文件管理器——这就是编辑器集成的真实价值。

下一步

读完这一篇你应该会：

装好 VS Code / Cursor 扩展
用 4 个杀手锏功能(内嵌对照视图 / @ 引用文件 / 计划模式 / 多标签页)
跟命令行双开——主力用编辑器扩展 + 内置终端跑命令

接下来「Claude Code 进阶」板块还有：

→ 桌面版：不碰终端的完整体验 —— 不只编辑器，Claude 还有独立的桌面客户端，适合不想装编辑器的人

→ Hooks(钩子)：自动跑你的脚本 —— 自动化触发器

→ MCP（外部服务连接器）：给 Claude 接上外部工具 —— 连 Slack 群、Google Drive、GitHub 等

想及时看到更新，可以收藏 niuxue.org 主页。