Appearance
VS Code 扩展
Claude Code VS Code 扩展提供原生图形界面，直接集成到编辑器中。安装后可以审查 Claude 的计划、查看内联 diff、@提及文件和代码行、管理多个对话，还支持 Checkpoint 回退、插件管理、Chrome 浏览器连接等高级功能。扩展和 CLI 共享会话历史，可以随时切换使用。
Claude Code VS Code 扩展提供原生图形界面，直接集成到编辑器中。你可以在 VS Code 里审查 Claude 的计划、查看内联 diff、@提及特定文件范围，以及管理多个对话。
安装要求
- VS Code 1.98.0 或更高版本
- Anthropic 账户（首次打开扩展时登录）。如果使用 Amazon Bedrock、Google Vertex AI 或 Microsoft Foundry，见下方使用第三方提供商。
安装扩展
或者在 VS Code 扩展视图（Cmd+Shift+X / Ctrl+Shift+X）中搜索"Claude Code"并安装。
安装后如果不显示，运行"Developer: Reload Window"重启扩展。
快速开始
打开 Claude 面板
有几种方式打开 Claude Code 面板：
- 编辑器工具栏：打开文件后点击右上角的 Spark 图标（最快）
- 活动栏：点击左侧边栏的 Spark 图标，查看会话列表
- 命令面板：
Cmd+Shift+P输入"Claude Code"，选择"Open in New Tab" - 状态栏：点击右下角的"✱ Claude Code"（即使没有打开文件也可用）
首次打开会看到"Learn Claude Code"引导清单，点击各项学习，或点击 X 关闭。
发送提示
Claude 自动看到你选中的文本。选中的行数会显示在提示框底部。点击选中指示符可以切换 Claude 是否看到选中内容（眼睛划线图标表示已隐藏）。
插入 @提及文件： 按 Option+K (Mac) / Alt+K (Windows/Linux) 将当前文件和选中行数作为 @提及引用插入提示框（如 @file.ts#5-10）。
引用文件和目录：
解释 @auth 中的逻辑（模糊匹配 auth.js、AuthService.ts 等）
@src/components/ 目录下有什么？（目录需要加斜杠）也可以 Shift+拖动文件到提示框添加为附件。点击附件上的 X 可移除。
多行输入： 按 Shift+Enter 换行而不发送。在问题对话框的"其他"文本输入中也适用。
命令菜单： 点击 / 或输入 / 打开命令菜单，可以附加文件、切换模型、开启延伸思考、查看用量（/usage）、启动 Remote Control（/remote-control）等。
审查改动
Claude 要编辑文件时，会显示并排的对比（原版 vs 建议改动），然后请求你的确认。你可以接受、拒绝，或告诉 Claude 换个方式。
恢复过去的对话
点击 Claude Code 面板顶部的下拉菜单可以查看对话历史，按关键词搜索或按时间（今天/昨天/近7天）浏览。点击任意对话即可继续。悬停对话可以看到重命名和删除操作。
恢复来自 claude.ai 的远程会话
如果你使用 Claude Code on the web，可以直接在 VS Code 中恢复那些远程会话。需要用 Claude.ai Subscription 登录（不支持 Console 账号）。
权限模式
点击提示框底部的模式指示器切换：
| 模式 | 行为 |
|---|---|
| 默认 | 每次操作前询问 |
| 计划模式 | 描述计划后等待批准，VS Code 自动将计划作为 Markdown 文档打开，可以在文档中添加内联注释再让 Claude 开始执行 |
| 自动接受 | 无需确认直接编辑文件 |
在 VS Code 设置中设置默认模式：claudeCode.initialPermissionMode
自定义工作区
调整 Claude 面板位置
可以把 Claude 面板拖到 VS Code 任意位置：
- 副侧边栏（右侧）：写代码时保持 Claude 可见
- 主侧边栏（左侧）：与资源管理器等并排
- 编辑器区域：作为标签页打开，与文件并排
多对话管理
在新标签页打开：命令面板 → "Open in New Tab"，或使用 Cmd+Shift+Esc (Mac) / Ctrl+Shift+Esc (Windows/Linux)
每个对话有独立的历史和上下文，可以同时处理不同任务。标签上有状态点：蓝色表示有待确认的权限请求，橙色表示 Claude 在后台完成了任务。
管理插件
在提示框输入 /plugins 打开插件管理界面。
安装插件
插件对话框有两个标签：Plugins（插件）和 Marketplaces（市场）。
在 Plugins 标签页：
- 已安装的插件显示在顶部，有开关可以启用/禁用
- 来自配置市场的可用插件显示在下方
- 支持按名称或描述搜索
- 点击 Install 安装插件时，可选择安装范围：
- Install for you：所有项目可用（用户级）
- Install for this project：与项目协作者共享（项目级）
- Install locally：仅在此仓库对你自己可用（本地级）
管理市场
切换到 Marketplaces 标签页可以添加或移除插件来源：
- 输入 GitHub 仓库、URL 或本地路径添加新市场
- 点击刷新图标更新市场插件列表
- 点击垃圾桶图标移除市场
连接 Chrome 浏览器
可以把 Claude 连接到 Chrome 浏览器，直接测试 Web 应用、调试控制台日志，无需离开 VS Code。需要安装 Claude in Chrome 扩展（v1.0.36 或更高）。
在提示框输入 @browser 加上要做的事：
@browser 打开 localhost:3000 并检查控制台报错Claude 会打开新标签页处理浏览器任务，并能访问你已登录的所有网站。详见使用 Claude Code 配合 Chrome。
快捷键
| 快捷键 | 说明 |
|---|---|
Cmd+Esc / Ctrl+Esc | 在编辑器和 Claude 之间切换焦点 |
Cmd+Shift+Esc / Ctrl+Shift+Esc | 在新标签页打开对话 |
Cmd+N / Ctrl+N | 开始新对话（需要 Claude 处于焦点，且需开启 enableNewConversationShortcut） |
Option+K / Alt+K | 插入当前文件和选中内容的 @提及（需要编辑器处于焦点） |
在命令面板（Cmd+Shift+P / Ctrl+Shift+P）中输入"Claude Code"可以查看所有可用命令。
从其他工具打开 VS Code 标签
扩展注册了 URI 处理器 vscode://anthropic.claude-code/open，可从 shell 脚本、浏览器书签等任何能打开 URL 的地方启动新的 Claude Code 标签。
macOS 示例：
bash
open "vscode://anthropic.claude-code/open"Linux 用 xdg-open，Windows 用 start。
可选的查询参数：
| 参数 | 说明 |
|---|---|
prompt | 预填提示框的文本（URL 编码），预填但不自动发送 |
session | 要恢复的会话 ID，会话必须属于当前打开的工作区 |
示例：
vscode://anthropic.claude-code/open?prompt=review%20my%20changes配置说明
扩展设置（VS Code 内）
Cmd+, → 扩展 → Claude Code：
| 设置 | 默认值 | 说明 |
|---|---|---|
useTerminal | false | 使用 CLI 终端模式而不是图形面板 |
initialPermissionMode | default | 初始权限模式：default、plan、acceptEdits 或 bypassPermissions |
preferredLocation | panel | Claude 打开位置：sidebar（右侧）或 panel（新标签页） |
autosave | true | Claude 读写文件前自动保存 |
useCtrlEnterToSend | false | 用 Ctrl/Cmd+Enter 发送而不是 Enter |
enableNewConversationShortcut | false | 启用 Cmd/Ctrl+N 开始新对话 |
hideOnboarding | false | 隐藏引导清单（毕业帽图标） |
respectGitIgnore | true | 文件搜索中排除 .gitignore 模式 |
usePythonEnvironment | true | 运行 Claude 时激活工作区 Python 环境（需要 Python 扩展） |
disableLoginPrompt | false | 跳过认证提示（第三方提供商配置时使用） |
allowDangerouslySkipPermissions | false | 在模式选择器中增加 Auto 模式和绕过权限选项 |
Claude Code 设置（跨扩展和 CLI 共用）
VS Code 扩展设置和 Claude Code settings 不是同一层：扩展设置控制面板位置、默认权限模式、快捷键和登录提示；Claude Code settings 控制权限规则、Hooks、MCP、statusLine、默认模型等核心行为。
| 目标 | 应该在哪里改 |
|---|---|
| 默认打开位置、是否使用终端模式 | VS Code 扩展设置 |
| 初始权限模式 | VS Code 扩展设置 claudeCode.initialPermissionMode |
| 允许或拒绝哪些工具 | settings.json 的 permissions |
| 项目 Hooks、MCP、Skills | 项目 .claude/settings.json |
| 默认模型、statusLine、环境变量 | settings.json 和 环境变量 |
需要排查配置是否生效时，在扩展的集成终端运行 claude 并输入 /status，确认当前工作目录和配置来源。
回退检查点
扩展支持检查点功能，悬停任何消息就能看到回退按钮，有三个选项：
- 从此分叉对话：保留所有代码改动，创建新对话分支
- 回退代码到此处：保留对话历史，回退文件改动
- 分叉并回退代码：两者同时执行
完整说明见检查点文档。
连接 MCP 服务器
在集成终端（Ctrl+` 或 Cmd+`）中运行：
bash
claude mcp add --transport http github https://api.githubcopilot.com/mcp/配置好后，在聊天面板输入 /mcp 管理 MCP 服务器（启用/禁用、重连、OAuth 认证）。详见 MCP 文档。
内置 IDE MCP 服务器
扩展激活时，会在本地运行一个 MCP 服务器，CLI 会自动连接。这是 CLI 在 VS Code 中打开 diff 视图、读取你的选中内容用于 @提及，以及在 Jupyter notebook 中执行代码的机制。服务器名为 ide，不会在 /mcp 中显示（无需配置）。
如果你的组织用 PreToolUse hook 白名单 MCP 工具，需要了解此服务器的存在。它绑定在 127.0.0.1 随机高位端口上，仅本机可访问，每次扩展激活时生成新的随机 auth token。
对话中模型可见的工具只有两个：
| 工具名 | 功能 | 是否写入 |
|---|---|---|
mcp__ide__getDiagnostics | 返回语言服务器诊断（VS Code Problems 面板中的错误和警告），可按文件过滤 | 否 |
mcp__ide__executeCode | 在当前活跃 Jupyter notebook 的内核中运行 Python 代码 | 是 |
mcp__ide__executeCode 每次调用都会请求你的确认：代码作为新 cell 插入到 notebook 末尾，VS Code 滚动到该位置，然后弹出 Quick Pick 让你选择 Execute 或 Cancel。
使用第三方提供商
如果你的组织用 Amazon Bedrock、Google Vertex AI 或 Microsoft Foundry：
- 打开 Disable Login Prompt 设置 并勾选
- 按照对应提供商的配置指南设置
扩展 vs CLI 的功能差异
| 功能 | CLI | VS Code 扩展 |
|---|---|---|
| 命令和 Skills | 全部 | 部分（输入 / 查看可用的） |
| MCP 服务器配置 | 完整 | 部分（用 CLI 添加，/mcp 管理） |
| 检查点回退 | 是 | 是 |
! Bash 快捷方式 | 是 | 否 |
| Tab 自动补全 | 是 | 否 |
Remote Control（/remote-control） | 是 | 是（v2.1.79+） |
需要 CLI 专属功能时，打开集成终端运行 claude。CLI 自动与 VS Code 集成，可以在 VS Code 中打开 diff 视图。如果使用外部终端，在 Claude Code 内运行 /ide 连接到 VS Code。
扩展和 CLI 共享对话历史。要在 CLI 中继续扩展里的对话，在终端运行 claude --resume 并选择对应会话。
在 VS Code 中引用终端输出，可以用 @terminal:name（name 是终端标题）。
故障排查题
找不到 Spark 图标
- 需要打开一个文件（仅有文件夹不够）
- VS Code 版本需要 1.98.0 以上
- 运行"Developer: Reload Window"
- 临时禁用其他 AI 扩展（Cline、Continue 等）
状态栏右下角的"✱ Claude Code"即使没有文件打开也始终可用。
Claude Code 无响应
- 检查网络连接
- 尝试开始新对话
- 在终端运行
claude查看详细错误信息
卸载
在扩展视图中搜索"Claude Code"，点击卸载。
同时删除扩展数据：
bash
rm -rf ~/.vscode/globalStorage/anthropic.claude-code相关资源
- 快速开始：第一个任务
- 常见工作流：实际开发场景
- MCP 配置：连接外部工具
- 设置：配置选项详解
- JetBrains IDE 集成：JetBrains / IDEA / WebStorm 场景
- 桌面应用快速入门：不用 IDE 扩展时的桌面版入口
常见问题
Q: 如何安装Claude Code for VS Code扩展？
在VS Code扩展视图（Ctrl+Shift+X）中搜索“Claude Code”直接安装，或通过官方市场链接安装。需要VS Code 1.98.0以上版本和Anthropic账户登录。
Q: Claude Code VS Code扩展的主要功能有哪些？
主要功能包括：在编辑器内直接使用Claude AI、通过@提及引用文件和代码行、查看内联diff审查改动、管理多个并行对话、切换计划/自动接受等权限模式，以及丰富的快捷键支持。
Q: 如何在VS Code中使用Claude Code引用特定代码行？
选中代码后，按Option+K（Mac）或Alt+K（Windows/Linux），即可将当前文件和行号以@提及格式（如@file.ts#5-10）插入提示框，供Claude精确参考。
Q: Claude Code扩展与CLI版本有什么区别？
扩展提供图形界面、内联diff和便捷的对话管理；CLI则支持全部命令、Skills、Bash快捷方式和Tab补全。两者共享项目 CLAUDE.md、.claude/settings.json、MCP、Hooks 和 Skills，可在终端运行 claude 命令切换使用。
Q: VS Code 扩展会读取 ~/.claude/settings.json 吗？
会。扩展内的 Claude Code 会读取用户级和项目级 settings；但 VS Code 扩展自己的 UI 选项仍在 VS Code 设置里，例如面板位置、初始权限模式、是否使用终端模式。
Q: 为什么VS Code中找不到Claude Code的Spark图标？
请确保已打开文件（仅文件夹不够）、VS Code版本≥1.98.0，并尝试运行“Developer: Reload Window”。状态栏的“✱ Claude Code”始终可用，也可通过命令面板启动。