导航菜单

终端里claude已经会用得顺手了，但一回到VS Code又找不到入口——本讲把Spark图标、侧边栏会话、Plan模式走通，让你在IDE里也能做到“先看清再改”。

 

本节在系列里讲什么

《Claude Code官方指南》全10讲，第1~2讲在终端完成安装、第一次会话与斜杠命令。本讲只做VS Code（及Cursor等VS Code系编辑器）扩展：图形界面、并排diff、@-mention。CLAUDE.md与记忆放到第4讲；权限与检查点留到第6讲。

 

官方文档参考

VS Code扩展：https://code.claude.com/docs/en/vscode-extension
Spark面板：https://code.claude.com/docs/en/spark-panel

细节以官方页面为准；以下是结合文档和实际使用的个人笔记。

 

先安装VS Code扩展

在VS Code扩展市场搜索“Claude Code”并安装。安装完成后，编辑器左侧活动栏会出现Spark图标——一个菱形带火花标记的按钮。点击它就能打开Claude Code的面板，而不用再切回终端。

 

需要注意的是，Spark面板本质上和终端版共享同一套会话和权限，你不需要重新登录。终端里用过claude，这里的授权状态会自动同步，登录过一次就能直接用。

 

三种查看diff的方式

AI改完代码后，你需要先看清楚改了哪里再决定是否接受。Spark面板提供了三种查看方式：

 

• Inline diff：在代码行内直接显示改动标记，适合逐行检查。
• 并排diff：左右对比原文件和AI生成的修改版本，适合整体对比。
• 预览窗口：直接看最终效果，适合快速验收。

 

第一次用建议先看并排diff，从全局把握改动范围，再逐项确认。

 

Plan模式：先方案再执行

这是Spark面板里最推荐新手先用的模式。

 

开启Plan模式后，Claude Code会先分析需求并输出一个执行方案，而不是直接上手改文件。你审阅方案没问题后，再手动点击“执行修改”让它真正落地。

 

这个模式的好处是让你始终掌握主动权——先看清楚AI想怎么改，再决定要不要让它动手。对于刚开始建立信任的阶段，Plan模式比“直接生成代码”更安全。

 

@-mention：让AI精准定位文件

在会话输入框输入@，会弹出项目中的文件和文件夹列表。你可以用它快速引用特定文件：

 

“@src/utils/api.ts 帮我看看这个文件的结构”
“@README.md 按这个文档要求实现功能”

 

相比打字描述文件路径，@-mention更直观，不容易出拼写错误，AI理解也更准确。

 

跟做清单

• VS Code扩展市场搜索并安装Claude Code扩展
• 点击活动栏Spark图标，侧边栏能正常打开
• 跑过一次会话，让AI帮你看一段代码
• 体验过并排diff，知道改动点在哪里
• 用过Plan模式，确认方案后再执行修改
• 用过@-mention，精准引用过文件