教程

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

相关文章推荐

教程Claude Code JetBrains IDE 集成完整指南:IntelliJ、PyCharm、WebStorm 使用教程Claude Code JetBrains 插件完整使用指南:支持 9 种 IDE(IntelliJ/PyCharm/WebStorm/GoLand/Rider/CLion/Android Studio 等);Marketplace 安装步骤;4 大核心功能(侧边栏对话面板/@ 文件引用/选中代码触发/Inline Diff 审查);Java 重构/Python 类型注解/Kotlin 依赖升级 3 个工作流;VS Code 扩展 vs JetBrains 插件对比;以及快捷键配置和常见问题解决。2026/5/6教程Claude Code VS Code 插件完整指南:@-mentions、多会话、Checkpoint 回滚与 CLI 对比Claude Code VS Code 插件完整指南:安装方法(直接链接/Extensions 搜索/Cursor 支持)、四种打开面板方式(编辑器工具栏/Activity Bar/命令面板/状态栏)、@-mentions 文件引用(模糊匹配/目录/PDF 指定页/拖拽附件)、三种权限模式(Ask/Plan 自动 Markdown 文档/Auto-accept)、提示框命令菜单(/usage/MCP/扩展思考)、多会话管理(标签页/侧边栏)、远程会话续接(Local/Remote 两标签)、Checkpoint 回滚、Chrome 浏览器自动化、VS Code 插件 vs CLI 功能对比表,以及四大常见问题解决。2026/3/8教程Claude Code Dev Container 完整指南:隔离环境、持久认证、网络出口和组织策略Claude Code Dev Container 官方文档中文整理:为什么在容器内运行 Claude Code、devcontainer feature 安装、认证和 settings 持久化、组织 policy、环境变量、网络出口限制、无权限提示模式的风险,以及团队安全落地建议。2026/5/20教程Claude Code 高级提示技巧:TDD 驱动、截图验证、面试需求、让 AI 自我检查 7 个方法Claude Code 高级提示技巧 7 个方法:TDD 先写测试、截图验证 UI、面试确认需求、新会话 Reviewer 自检、参考现有模式、可中断大型任务、三阶段探索-计划-执行工作流。2026/4/13教程Claude Code Remote Control 详解:用手机或另一台电脑控制本地 AI 编程会话Claude Code Remote Control 完整指南:3 种启动方式(Server/交互/现有会话)、手机扫码连接步骤、实际使用场景,以及与网页版的核心区别、安全机制和常见报错解决方法。2026/4/13教程Claude Code 定时任务完整指南:每天自动 review 代码、检查依赖、生成日报Claude Code 定时任务完整配置指南:Desktop 本地任务、云端任务、/loop 三种方式对比,含 5 个实用任务模板(每日代码 review、依赖漏洞扫描、技术债报告),以及权限防卡死和补跑机制详解。2026/4/13