在 VS Code / Cursor 里用 Claude Code:不想用终端的人看
📍 给我的项目用 1/8 · 上一板块:← 02 区完结
那个让洁柔放弃终端的瞬间
Section titled “那个让洁柔放弃终端的瞬间”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 在编辑器里长啥样、装哪个、什么时候用编辑器 / 什么时候回命令行。
你在哪个编辑器,这扩展都能装
Section titled “你在哪个编辑器,这扩展都能装”
官方扩展叫 anthropic.claude-code(发布者就是 Anthropic 自己)。装一次,这些编辑器都能用:
| 编辑器 | 怎么装 |
|---|---|
| VS Code | 扩展市场直接搜 “Claude Code” |
| Cursor | 扩展市场搜 “Claude Code”(同一个包) |
| Windsurf | 同上 |
| Kiro | 同上 |
| 其他 VS Code 衍生版 | Open VSX 注册表 |
| JetBrains 系(IntelliJ / WebStorm) | 暂不支持,但在编辑器内置终端跑 claude 命令行版等同体验 |
前提:VS Code 1.98.0 或更高版本。装之前先 Help → About 看一眼版本。
装好之后第一次打开
Section titled “装好之后第一次打开”Step 1:找 Spark(火花) 图标 ✱
Section titled “Step 1:找 Spark(火花) 图标 ✱”扩展激活后,4 个地方都能开 Claude 面板:
- 编辑器右上角 ——文件打开时出现 Spark 图标(最快)
- 左侧活动栏(Activity Bar)——会话列表常驻
- 命令面板(快捷键
Cmd+Shift+P/Ctrl+Shift+P)搜 “Claude Code” - 状态栏右下角 ”✱ Claude Code” 字样——没打开任何文件也能用
Step 2:第一次登录
Section titled “Step 2:第一次登录”第一次开会弹登录页,点 Sign in → 浏览器自动打开 Anthropic 授权 → 回来就好。
🚨 国内可达性提醒:扩展的图形版需要登 Anthropic 账号,国内目前没法走 DeepSeek 兼容路径(扩展本身不支持改服务器地址(BASE_URL)和接入点)。国内用户:继续用命令行版
claude在 VS Code 内置终端里跑——一样能享受编辑器集成(对照视图自动开 VS Code、@ 引用自动连)。
Step 3:开始用
Section titled “Step 3:开始用”打开任何一个文件,鼠标选中一段代码——Claude 自动看到你选中的内容(不用复制粘贴)。然后:
“解释一下选中这段是干嘛的。”
它会基于选中的代码答你。比贴代码到对话框快 5 秒。
4 个杀手锏功能(扩展独占)
Section titled “4 个杀手锏功能(扩展独占)”这些是扩展才有、命令行版没有的体验,看完你就理解为啥很多人切了编辑器。
🎯 1. 内嵌对照视图:在你的编辑器里看修改
Section titled “🎯 1. 内嵌对照视图:在你的编辑器里看修改”
Claude 要改文件时,直接在 VS Code 里弹出左右两栏对照视图 —— 跟 git 的 diff 一模一样:
- 左侧:原文件
- 右侧:Claude 提议的改后版本
- 下方:✅ 接受 / ❌ 拒绝 / ✏️ 编辑(直接在对照视图里改 Claude 的草稿)
如果你在对照视图里手动改了,Claude 会被告知你改过,之后它不会假设文件还是它最初提议的样子。
比命令行版强在哪:VS Code 的字号、配色、键盘导航都是你熟悉的——眼睛不累。
🏷️ 2. 用 @ 引用文件:把代码精准甩进对话框
Section titled “🏷️ 2. 用 @ 引用文件:把代码精准甩进对话框”
在对话框里打 @,自动模糊匹配项目里所有文件:
> 解释 @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. 计划模式:把方案先写成文档让你审
Section titled “📝 3. 计划模式:把方案先写成文档让你审”切到 计划模式(Plan mode)——在对话框底部点模式切换。Claude 不直接改文件,先写一份完整方案文档(markdown 格式),作为编辑器标签页打开,你可以行内加评论像代码审查一样反馈。
满意了再点确认,它才开始动手。
适合:涉及多文件 / 大规模重构 / 架构方向 —— 改之前先对齐比改完再撤回省事 10 倍。
🗂️ 4. 多对话标签页并行
Section titled “🗂️ 4. 多对话标签页并行”
不像命令行版一次只能开一个会话——扩展版可以多个对话同时开:
- 拖面板 到任何位置(右侧栏 / 左侧栏 / 当编辑器里的一个标签页)
- 命令面板 → Open in New Tab(
Cmd+Shift+Esc)开新对话 - Open in New Window 开独立新窗口
每个对话有独立的历史 + 上下文——你可以一边在标签页 1 改简历,一边在标签页 2 调试代码,互不打架。
标签页上的小色点告诉你状态:
- 🔵 蓝点 —— 这个标签页在等你批准什么操作
- 🟠 橙点 —— 任务完成但标签页当时没在前台(防止你错过)
几个值得记的快捷键
Section titled “几个值得记的快捷键”| 快捷键 | 作用 |
|---|---|
| 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 这个快捷键才生效。
什么时候用编辑器 / 什么时候回命令行
Section titled “什么时候用编辑器 / 什么时候回命令行”
两个版本共用同一份对话历史——你编辑器里聊了一段,在命令行里跑 claude --resume 能继续接上。所以不是非此即彼,是看场景。
| 用编辑器扩展 | 用命令行 |
|---|---|
| 改代码 / 需要看对照视图 | 跑命令 / 部署 / 一次性脚本 |
| @ 引用文件 + 选中代码当上下文 | ! 快捷跑系统命令(扩展没这个) |
| 计划模式审大改动 | Tab 键补全命令名(扩展没这个) |
| 多任务并行(多标签页) | 自动化 / CI 流水线(扩展不能 headless 跑) |
| 给同事演示 / 入门读者 | 老手日常 + 定时任务 |
一个简单的切换技巧
Section titled “一个简单的切换技巧”命令行版跟扩展版共用 ~/.claude/settings.json——你在命令行里配的环境变量 / 钩子 / MCP 服务,扩展自动继承。
你可以在 VS Code 内置终端跑 claude(开命令行版),它也会自动连上当前 VS Code(开对照视图用 VS Code 界面、@ 引用自动连)。
最佳节奏:主面板挂图形版(对话 / 看对照视图 / @ 引用) + 内置终端跑 claude(跑命令 / Tab 补全)。两边数据互通。
进阶:从浏览器或脚本一键开 Claude 标签页
Section titled “进阶:从浏览器或脚本一键开 Claude 标签页”进阶玩法——扩展注册了 vscode://anthropic.claude-code/open 这样的链接(叫 URI scheme)。你可以从浏览器书签 / 命令行脚本 / 第三方工具一行命令打开新 Claude 标签页:
# Macopen "vscode://anthropic.claude-code/open?prompt=review%20my%20changes"
# Linuxxdg-open "vscode://anthropic.claude-code/open?prompt=review%20my%20changes"参数:
prompt=...—— 预填到对话框(不自动发送,需要 URL 编码)session=...—— 恢复一个已有会话 ID
用场景:把「请帮我审一下这个分支」做成桌面快捷方式 / Alfred 工作流 / GitHub Pull Request 链接钩子。
3 个新手最容易踩的坑
Section titled “3 个新手最容易踩的坑”❌ 坑 1:打开 VS Code 看不到火花图标
Section titled “❌ 坑 1:打开 VS Code 看不到火花图标”90% 是因为没打开任何文件——火花图标在编辑器工具栏只在有打开文件时才显示。
修正:
- 打开任何一个文件(
.md/.py/.txt都行) - 或者点状态栏右下角 ”✱ Claude Code”(无论是否打开文件都可用)
- 或者
Cmd/Ctrl+Shift+P搜 “Claude Code”
❌ 坑 2:登录后扩展还是显示「未登录」
Section titled “❌ 坑 2:登录后扩展还是显示「未登录」”通常是 VS Code 没继承你命令行的环境变量——你的 ANTHROPIC_API_KEY(API 密钥)在 ~/.zshrc 设了,但 VS Code 是从 Dock / 桌面快捷方式启动的,没读到。
修正:从命令行启动 VS Code ——
cd ~/your-projectcode .这样 VS Code 继承当前 shell 的所有环境变量。
❌ 坑 3:抢了别的 AI 扩展的快捷键
Section titled “❌ 坑 3:抢了别的 AI 扩展的快捷键”如果你装了 Cline / Continue / Cody 等其他 AI 编程扩展——火花图标可能不显示,或者快捷键冲突。
修正:临时禁用其他 AI 扩展测试 Claude Code 能不能正常工作。确认是冲突后,在 VS Code 设置里 rebind 快捷键。
一个完整的编辑器工作流(给小白看)
Section titled “一个完整的编辑器工作流(给小白看)”下面是一个真实周二上午的工作流——从开始到结束半小时:
09:30 在 VS Code 打开一个 Python 项目09:31 点编辑器右上角 ✱ → Claude 面板出现在右侧09:32 选中 main.py 第 10-30 行 → 按 Option+K → 对话框里自动出现 @main.py#10-3009: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 个杀手锏功能(内嵌对照视图 / @ 引用文件 / 计划模式 / 多标签页)
- 跟命令行双开——主力用编辑器扩展 + 内置终端跑命令
接下来 03 区还有:
→ 桌面客户端:可视化界面替代命令行(即将上线)—— 不只编辑器,Claude 还有独立的桌面客户端,适合不想装编辑器的人
→ Hooks(钩子):Claude 改完文件自动跑你的脚本(即将上线)—— 自动化触发器
→ MCP(外部服务连接器):让 Claude 接外部数据源(即将上线)—— 连 Slack 群、Google Drive、GitHub 等
想第一时间收到,可以收藏 niuxue.org 主页。
你用 Claude Code 编辑器扩展撞上的最爽的瞬间 / 最坑的瞬间?发邮箱 [email protected],精选会进编辑器用法社区集。
评论
不记名、不需要注册——不要邮箱，不要手机号，不要任何身份信息，填个昵称就能留言。放心说。