教程

Claude Code VS Code 插件使用指南:安装、@ 文件引用、内联 diff 和多会话并行

Claude Code VS Code 插件完整指南:安装配置、@ 引用精确代码行、内联 diff 审阅、多会话标签页并行、Plan 模式文档预览,及与 CLI 的功能对比表。

2026/4/103分钟 阅读ClaudeEagle

已经有命令行 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,无文件时也可用

拖动面板到任意位置:右侧边栏(推荐)、左侧边栏、编辑区标签页。


核心功能

@ 引用文件和代码行

text
@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 + 多会话真正并行

bash
# 为每个功能创建独立工作目录
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