已经有命令行 Claude Code 了,为什么还要装 VS Code 插件?因为插件提供了 CLI 没有的东西:内联 diff 审阅、计划预览文档、多会话标签、@ 精确引用代码行。
安装(2 分钟)
前置条件:VS Code 1.98.0+、Anthropic 账号
# 方法 1:点链接直接安装
vscode:extension/anthropic.claude-code
# 方法 2:应用商店搜索
Cmd+Shift+X → 搜索 "Claude Code" → Install
# Cursor 用户
cursor:extension/anthropic.claude-code
安装后看不到图标?命令面板运行 Developer: Reload Window。
找到入口
| Spark ⚡ 图标位置 | 说明 |
|---|---|
| 编辑器右上角 | 最快,有文件打开时才显示 |
| 左侧活动栏 | 显示会话列表,始终可见 |
| 底部状态栏 | ✱ Claude Code,无文件时也可用 |
拖动面板到任意位置:右侧边栏(推荐)、左侧边栏、编辑区标签页。
核心功能
@ 引用文件和代码行
@src/auth/session.ts 里的 refreshToken 有竞态条件,修复
@src/components/ # 引用整个目录
@app.ts#45-80 # 精确行号
@auth # 模糊匹配(自动找 auth.js、AuthService.ts 等)快捷键:选中代码 → Option+K(Mac)/ Alt+K(Win),自动插入带行号的 @ 引用。
内联 diff 审阅
Claude 提出修改时显示并排 diff,逐项选择:接受 / 拒绝 / 告诉 Claude 怎么改。比 CLI 直接改文件更可控。
权限模式(Prompt 框底部切换)
| 模式 | 行为 |
|---|---|
| 普通 | 每次操作前询问 |
| Plan | 先展示计划 Markdown,批准后执行 |
| 自动接受 | 无需确认直接执行 |
Plan 模式特别之处:计划打开为完整 Markdown 文档,可以直接在文档里写注释反馈,Claude 参考后再执行。
多会话标签页
命令面板 → Claude Code: Open in New Tab
状态点:蓝色 = 等待确认,橙色 = 后台完成。
终端输出加入提示
点「Include terminal output」,把终端最新报错直接加入上下文,不用复制粘贴。
VS Code 插件 vs CLI 对比
| 功能 | VS Code 插件 | CLI |
|---|---|---|
| 内联 diff 审阅 | ✅ | ❌ |
| @ 引用带行号 | ✅(快捷键) | 需手动 |
| 多会话标签 | ✅ | 需多终端 |
| Plan Markdown 预览 | ✅ | ❌ |
| 插件 GUI 管理 | ✅ | 命令行 |
| 终端直接输入 | ❌ | ✅ |
| CI/CD 非交互模式 | ❌ | ✅ |
建议:日常开发用插件,自动化/CI 用 CLI。两者可以混用——插件包含完整 CLI,在 VS Code 内置终端里也能运行 claude 命令。
Git Worktrees + 多会话真正并行
# 为每个功能创建独立工作目录
git worktree add ../project-auth feature/auth
git worktree add ../project-payments feature/payments
# 分别在不同 VS Code 窗口打开
code ../project-auth
code ../project-payments
# 两个 Claude Code 会话并行,互不覆盖文件常见问题
安装后图标不出现:命令面板 → Developer: Reload Window
设了 ANTHROPIC_API_KEY 还要求登录:从终端启动 VS Code(code .),让它继承 shell 环境变量。
恢复网页会话:Past Conversations → Remote 标签 → 选择会话下载到本地继续。
来源:Claude Code VS Code 官方文档 | 整理:ClaudeEagle