安装并配置 VS Code 的 Claude Code 扩展，可以在编辑器中获得智能编码辅助，包括内联 diff、@ 引用、计划审查和丰富的快捷键支持。

VS Code 扩展为 Claude Code 提供了原生图形界面，直接集成在 IDE 中，是在 VS Code 中使用 Claude Code 的推荐方式。通过扩展，你可以：

  • 在应用更改前审查和编辑 Claude 的计划
  • 选择是否自动接受编辑
  • 使用 @ 引用文件和行号
  • 访问对话历史
  • 在多个标签页或窗口中并行打开多段对话

扩展内置了 CLI（命令行工具），可在 VS Code 集成终端中使用高级功能。详情可参考官方文档中 “VS Code 扩展 vs Claude Code CLI” 部分。

前置条件

安装前请确认：

  • VS Code 版本为 1.98.0 或更高
  • 拥有 Anthropic 账号（首次打开扩展时会登录）
  • 如果你通过 Amazon Bedrock、Google Vertex AI 等第三方访问 Claude，请参考“使用第三方提供商”章节进行配置

安装扩展

你可以通过以下方式安装：

  • 直接点击官方提供的 VS Code / Cursor 安装链接
  • 或在 VS Code 中按 Cmd+Shift+X（Mac）或 Ctrl+Shift+X（Windows/Linux）打开扩展视图，搜索 “Claude Code”，点击 Install 安装

如果安装后扩展没有出现，可以尝试：

  • 重启 VS Code
  • 或在命令面板中运行 “Developer: Reload Window”

快速上手

安装完成后，可以通过 VS Code 界面开始使用 Claude Code。

1. 打开 Claude Code 面板

在 VS Code 中，火花形图标（Spark）代表 Claude Code：

最便捷的方式是点击编辑器右上角 Editor Toolbar 中的 Spark 图标（需要先打开一个文件）：

其他打开方式：

  • 活动栏（Activity Bar）：左侧边栏的 Spark 图标，点击可打开会话列表，再选择会话或新建会话
  • 命令面板：Cmd+Shift+P / Ctrl+Shift+P，输入 “Claude Code”，选择如 “Open in New Tab” 等命令
  • 状态栏：点击右下角的 ✱ Claude Code，即使没有打开文件也可使用

首次打开面板时，会出现 Learn Claude Code 新手清单，可通过 Show me 逐项学习，也可以关闭。之后可在 VS Code 设置中（Extensions → Claude Code）取消勾选 Hide Onboarding 来重新显示。

Claude 面板可以拖动到 VS Code 的任意位置，具体见后文“自定义工作流”。

2. 发送提示（Prompt）

你可以让 Claude：

  • 解释代码逻辑
  • 调试错误
  • 直接修改文件

Claude 会自动看到你在编辑器中选中的文本。按 Option+K（Mac）或 Alt+K（Windows/Linux）可以在提示中插入一个 @ 引用（如 @file.ts#5-10）。

3. 审查修改

当 Claude 需要修改文件时，会先展示原始内容与修改后内容的并排 diff 视图，并请求你的许可。你可以：

  • 接受修改
  • 拒绝修改
  • 或给出进一步指示

更多使用思路可参考官方的 “Common workflows”，也可以在命令面板中运行 “Claude Code: Open Walkthrough” 查看引导式教程。

使用提示输入框

Claude 面板底部的提示输入框支持多种增强功能：

  • 权限模式（Permission modes）：
    • 普通模式：每次操作前询问是否执行
    • 计划模式（Plan）：先给出详细计划，待你确认后再执行；VS Code 会将计划以 Markdown 文档形式打开，你可以在其中添加行内评论
    • 自动接受模式：无需确认，直接应用修改
    • 默认模式可在 VS Code 设置中通过 claudeCode.initialPermissionMode 配置
  • 命令菜单：
    • 点击 / 或输入 / 打开命令菜单
    • 可用于：附加文件、切换模型、开启扩展思考、查看计划用量（/usage）、启动远程控制会话（/remote-control）等
    • “Customize” 区域可访问 MCP 服务器、hooks、记忆、权限和插件等
  • 上下文指示器：
    • 显示当前对话占用的上下文窗口大小
    • Claude 会在需要时自动压缩上下文，也可手动运行 /compact
  • 扩展思考（Extended thinking）：
    • 适合复杂问题，让 Claude 花更多时间推理
    • 在命令菜单中开启，详见官方 “Extended thinking” 文档
  • 多行输入：
    • 在输入框中按 Shift+Enter 换行而不发送
    • 在问题对话框的自由文本输入中同样适用

使用 @ 引用文件和文件夹

通过 @ 引用可以为 Claude 提供精确上下文：

  • 输入 @ 后跟文件或文件夹名，Claude 会读取对应内容
  • 支持模糊匹配，可以只输入部分名称

示例：

> Explain the logic in @auth (fuzzy matches auth.js, AuthService.ts, etc.)
> What's in @src/components/ (include a trailing slash for folders)

对于较大的 PDF，可以只让 Claude 阅读指定页码范围，如单页、1–10 页或从第 3 页开始的区间。

当你在编辑器中选中文本时：

  • Claude 默认可以看到高亮代码
  • 提示框底部会显示选中行数
  • 按 Option+K（Mac）或 Alt+K（Windows/Linux）可插入带行号的 @ 引用，如 @app.ts#5-10
  • 点击选区指示器可切换是否让 Claude 看到选中内容（带斜杠的眼睛图标表示隐藏）

你也可以按住 Shift 将文件拖入提示框，作为附件添加。点击附件右侧的 X 可将其从上下文中移除。

恢复历史对话

在 Claude 面板顶部的下拉菜单中可以访问对话历史：

  • 支持按关键字搜索
  • 支持按时间分组浏览（今天、昨天、最近 7 天等）
  • 点击任意会话即可在保留完整历史的前提下继续对话

新会话会根据首条消息自动生成标题。将鼠标悬停在会话上可以：

  • 重命名（便于区分）
  • 从列表中移除（删除本地记录）

从 Claude.ai 恢复远程会话

如果你使用 Claude Code on the web，可以在 VS Code 中恢复这些远程会话（需要使用 Claude.ai 订阅账号登录，而不是 Anthropic Console）。

步骤：

  1. 在 Claude 面板顶部点击 Past Conversations 下拉菜单
  2. 在弹窗中切换到 Remote 标签页，查看来自 claude.ai 的会话
  3. 浏览或搜索远程会话，点击任意条目即可下载并在本地继续

注意：

  • 只有在网页端以 GitHub 仓库为基础创建的会话才会出现在 Remote 标签中
  • 恢复后会话历史会加载到本地，但后续更改不会同步回 claude.ai

自定义工作流

当你熟悉基础用法后，可以通过调整面板位置、多会话和终端模式来优化工作流。

调整 Claude 面板位置

你可以拖动 Claude 面板的标签或标题栏，将其放置在：

  • 右侧次级侧边栏（Secondary sidebar）：适合一边编码一边与 Claude 交互
  • 左侧主侧边栏（Primary sidebar）：与资源管理器、搜索等图标同列
  • 编辑区（Editor area）：以标签页形式与代码文件并排显示

常见用法是：

  • 将主会话固定在侧边栏
  • 为临时任务在编辑区打开额外的 Claude 标签页

Claude 会记住你偏好的位置。注意：

  • 活动栏中的会话列表图标始终可见
  • Claude 面板图标只有在面板停靠在左侧边栏时才会出现在活动栏中

多会话并行

通过命令面板中的 Open in New Tab 或 Open in New Window 可以开启额外会话：

  • 每个会话都有独立的上下文和历史
  • 适合同时处理多个任务或项目

当使用多个标签页时，Spark 图标上的小圆点表示状态：

  • 蓝色：有待处理的权限请求
  • 橙色：Claude 在标签页隐藏时已完成响应

切换到终端模式

如果你更习惯 CLI 风格界面，可以启用终端模式：

  • 在设置中勾选 Use Terminal（可通过 VS Code 设置界面或官方链接进入）
  • 或在 VS Code 设置中（Cmd+, / Ctrl+,）→ Extensions → Claude Code → 勾选 Use Terminal

启用后，Claude 将在终端中以 CLI 形式运行，而不是图形聊天面板。

管理插件

VS Code 扩展内置了图形化的插件管理界面。输入 /plugins 即可打开 Manage plugins 面板。

安装插件

插件对话框包含两个标签页：Plugins 和 Marketplaces。

在 Plugins 标签页中：

  • 已安装插件显示在顶部，可通过开关启用/禁用
  • 配置的插件市场中可用的插件显示在下方
  • 支持按名称或描述搜索
  • 点击 Install 安装插件

安装时需要选择作用范围：

  • Install for you：用户级，所有项目可用
  • Install for this project：项目级，项目协作者共享
  • Install locally：仅当前仓库、仅当前用户可用

管理插件市场

切换到 Marketplaces 标签页可以管理插件源：

  • 输入 GitHub 仓库、URL 或本地路径添加新市场
  • 点击刷新图标更新市场插件列表
  • 点击垃圾桶图标移除市场

更改后会出现提示，要求重启 Claude Code 以应用更新。

VS Code 中的插件管理与 CLI 使用同一套命令：

  • 在扩展中配置的插件和市场会同步到 CLI
  • 在 CLI 中配置的同样会出现在扩展中

使用 Chrome 自动化浏览器任务

你可以将 Claude 连接到 Chrome 浏览器，在 VS Code 内完成：

  • Web 应用测试
  • 控制台日志调试
  • 浏览器自动化操作

前提条件：安装 Claude in Chrome 浏览器扩展（版本 ≥ 1.0.36）。

在提示框中输入：

@browser go to localhost:3000 and check the console for errors

也可以通过附件菜单选择具体浏览器工具，如打开新标签页、读取页面内容等。

Claude 会：

  • 为浏览器任务打开新标签页
  • 共享你的登录状态，访问你已登录的网站

更多能力列表、配置步骤和故障排查可参考 “Use Claude Code with Chrome” 文档。

VS Code 命令与快捷键

打开命令面板（Cmd+Shift+P / Ctrl+Shift+P），输入 “Claude Code” 可以查看所有可用命令。

部分快捷键依赖当前焦点：

  • 光标在代码文件中：焦点在编辑器
  • 光标在 Claude 提示框中：焦点在 Claude

使用 Cmd+Esc / Ctrl+Esc 在编辑器和 Claude 之间切换焦点。

常用命令与快捷键：

命令快捷键说明
Focus InputCmd+Esc / Ctrl+Esc在编辑器与 Claude 之间切换焦点
Open in Side Bar-在左侧边栏打开 Claude
Open in Terminal-以终端模式打开 Claude
Open in New TabCmd+Shift+Esc / Ctrl+Shift+Esc在编辑区新建会话标签页
Open in New Window-在新窗口中打开会话
New ConversationCmd+N / Ctrl+N在 Claude 焦点下新建会话
Insert @-Mention ReferenceOption+K / Alt+K在 Claude 提示中插入当前文件与选区引用（需编辑器焦点）
Show Logs-查看扩展调试日志
Logout-登出 Anthropic 账号

从其他工具中打开 VS Code 标签页

扩展注册了一个 URI 处理器：vscode://anthropic.claude-code/open。

你可以在：

  • Shell 别名
  • 浏览器书签
  • 任意能打开 URL 的脚本

中调用该 URI 来在 VS Code 中打开新的 Claude Code 标签页：

  • 如果 VS Code 未运行，会先启动 VS Code
  • 如果已运行，则在当前聚焦窗口中打开

在 macOS 上示例：

open "vscode://anthropic.claude-code/open"

Linux 使用 xdg-open，Windows 使用 start。

URI 支持两个可选查询参数：

参数说明
prompt预填充到提示框中的文本（需 URL 编码），不会自动发送
session要恢复的会话 ID，必须属于当前工作区；如果找不到则新建会话；若该会话已在某个标签页中打开，则直接聚焦该标签页

示例：打开一个预填充 “review my changes” 的标签页：

vscode://anthropic.claude-code/open?prompt=review%20my%20changes

配置设置

扩展有两类设置：

  1. VS Code 扩展设置：控制扩展在 VS Code 内的行为
    • 打开方式：Cmd+, / Ctrl+, → Extensions → Claude Code
    • 也可在 Claude 提示框中输入 /，选择 General Config 打开
  2. Claude Code 全局设置：位于 ~/.claude/settings.json
    • 在扩展与 CLI 之间共享
    • 用于配置允许的命令、环境变量、hooks、MCP 服务器等

建议在 settings.json 中添加：

"$schema": "https://json.schemastore.org/claude-code-settings.json"

这样可以在 VS Code 中获得自动补全和内联校验。

常用扩展设置

设置项默认值说明
selectedModeldefault新会话默认模型，可通过 /model 在会话中切换
useTerminalfalse是否使用终端模式而非图形面板
initialPermissionModedefault新会话的默认权限模式：default、plan、acceptEdits、auto、bypassPermissions
preferredLocationpanelClaude 打开位置：sidebar（右侧）或 panel（新标签页）
autosavetrue在 Claude 读取或写入文件前自动保存
useCtrlEnterToSendfalse使用 Ctrl/Cmd+Enter 发送提示，而不是 Enter
enableNewConversationShortcuttrue启用 Cmd/Ctrl+N 新建会话快捷键
hideOnboardingfalse隐藏新手引导清单
respectGitIgnoretrue在文件搜索时忽略 .gitignore 中的路径
environmentVariables[]为 Claude 进程设置环境变量（更推荐在全局设置中配置）
disableLoginPromptfalse跳过登录提示（适用于第三方提供商场景）
allowDangerouslySkipPermissionsfalse在模式选择器中启用 Auto 和 Bypass 模式；Auto 需要团队版和特定模型；Bypass 仅建议在无网络沙箱中使用
claudeProcessWrapper-启动 Claude 进程时使用的可执行文件路径

VS Code 扩展 vs Claude Code CLI

Claude Code 既可以通过 VS Code 扩展（图形面板）使用，也可以通过 CLI（终端命令行）使用。

  • 某些功能仅在 CLI 中提供
  • 如需 CLI 专属功能，可在 VS Code 集成终端中运行 claude

功能对比示例：

功能CLIVS Code 扩展
命令与技能全部可用子集（在提示框中输入 / 查看）
MCP 服务器配置完整支持部分支持（通过 CLI 添加服务器，在扩展中用 /mcp 管理）
Checkpoints支持支持
! bash 快捷执行支持不支持
Tab 补全支持不支持

使用 Checkpoints 回滚

VS Code 扩展支持 checkpoints，用于跟踪 Claude 对文件的修改，并在需要时回滚。

在任意消息上悬停可以看到回滚按钮，提供三种选项：

  • Fork conversation from here：从该消息分叉出新会话，保留当前代码状态
  • Rewind code to here：将文件内容回滚到该消息对应的状态，但保留完整对话历史
  • Fork conversation and rewind code：同时分叉会话并回滚代码

在 VS Code 中运行 CLI

如果想在 VS Code 中使用 CLI：

  1. 打开集成终端：Ctrl+``（Windows/Linux）或 Cmd+``（Mac）

  2. 运行：

    claude

CLI 会自动与 IDE 集成，支持 diff 查看、诊断共享等。

如果使用外部终端，可在 Claude CLI 中运行 /ide 将其连接到 VS Code。

在扩展与 CLI 之间切换

扩展与 CLI 共享同一套会话历史。

  • 在终端中运行 claude --resume，可以通过交互式选择器搜索并恢复扩展中的会话

在提示中引用终端输出

使用 @terminal:name 可以在提示中引用终端输出，其中 name 为终端标题。这样无需复制粘贴即可让 Claude 看到命令输出、错误信息或日志。

监控后台进程

当 Claude 运行耗时命令时，扩展会在状态栏显示进度。但与 CLI 相比，对后台任务的可见性有限。

如果需要更清晰的进度和控制，建议让 Claude 输出命令，由你在 VS Code 集成终端中手动运行。

使用 MCP 连接外部工具

MCP（Model Context Protocol）可以让 Claude 访问外部工具、数据库和 API。

添加 MCP 服务器示例：

claude mcp add --transport http github https://api.githubcopilot.com/mcp/

配置完成后，你可以直接让 Claude 使用这些工具，例如：“Review PR #456”。

在 VS Code 中管理 MCP：

  • 在 Claude 面板中输入 /mcp 打开 MCP 管理对话框
  • 可以启用/禁用服务器、重新连接、管理 OAuth 认证

更多可用服务器详见官方 MCP 文档。

与 Git 协同工作

Claude Code 与 Git 深度集成，可以在 VS Code 中直接完成版本控制相关任务：

  • 提交代码
  • 创建 Pull Request
  • 在分支之间协同工作

创建提交与 Pull Request

你可以直接用自然语言让 Claude 操作 Git：

> commit my changes with a descriptive message
> create a pr for this feature
> summarize the changes I've made to the auth module

在创建 PR 时，Claude 会基于实际代码变更生成描述，并可补充测试情况和实现细节。

使用 Git worktree 并行任务

使用 --worktree（或 -w）参数可以在独立 worktree 中启动 Claude：

claude --worktree feature-auth

每个 worktree：

  • 拥有独立的文件状态和分支
  • 共享同一 Git 历史

这样可以避免多个 Claude 实例在不同任务间互相干扰。更多细节可参考 “Run parallel sessions with Git worktrees”。

使用第三方云提供商

默认情况下，Claude Code 直接连接 Anthropic API。如果你的组织通过 Amazon Bedrock、Google Vertex AI 或 Microsoft Foundry 使用 Claude，可以将扩展配置为使用这些提供商。

步骤：

  1. 关闭登录提示
    • 在设置中勾选 Disable Login Prompt
    • 或在 VS Code 设置（Cmd+, / Ctrl+,）中搜索 “Claude Code login”，勾选 Disable Login Prompt
  2. 配置提供商
    • 按照对应文档配置：
      • Claude Code on Amazon Bedrock
      • Claude Code on Google Vertex AI
      • Claude Code on Microsoft Foundry
    • 这些文档会指导你在 ~/.claude/settings.json 中完成配置，从而在扩展与 CLI 之间共享设置

安全与隐私

Claude Code 会处理你的代码以提供辅助，但不会将其用于训练模型。

关于数据处理和如何选择退出日志记录，详见官方 “Data and privacy” 文档。

当启用自动编辑权限时，Claude Code 可能会修改 VS Code 的配置文件（如 settings.json、tasks.json），这些文件可能被 VS Code 自动执行。为降低处理不可信代码时的风险，建议：

  • 对不可信工作区启用 VS Code 的 Restricted Mode
  • 使用手动审批模式，而不是自动接受编辑
  • 在接受修改前仔细审查 diff

内置 IDE MCP 服务器

当扩展激活时，会在本地运行一个名为 ide 的 MCP 服务器，CLI 会自动连接它。这是 CLI 能够：

  • 在 VS Code 原生 diff 视图中打开差异
  • 读取当前选区以支持 @ 引用
  • 在 Jupyter 笔记本中请求 VS Code 执行单元

该服务器：

  • 绑定在 127.0.0.1 的随机高端口
  • 每次扩展激活都会生成新的随机认证 token
  • token 写入 ~/.claude/ide/ 下的锁文件，目录权限为 0700，文件权限为 0600，仅当前用户可读

服务器暴露十余个工具，但只有两个对模型可见，其余为 CLI 内部 RPC：

工具名（在 hooks 中可见）功能是否写入
mcp__ide__getDiagnostics返回语言服务器诊断信息（VS Code Problems 面板中的错误与警告），可选按文件过滤否
mcp__ide__executeCode在当前 Jupyter 笔记本的 Python 内核中执行代码是

Jupyter 执行的确认流程

mcp__ide__executeCode 无法静默执行：

  • 每次调用都会在当前笔记本末尾插入一个新单元
  • VS Code 会滚动到该单元并弹出 Quick Pick，要求你选择 Execute 或 Cancel
  • 按 Esc 或选择 Cancel 会向 Claude 返回错误，代码不会执行
  • 若没有活动笔记本、未安装 ms-toolsai.jupyter 扩展或内核不是 Python，该工具会直接拒绝执行

Quick Pick 确认与 PreToolUse hooks 是分离的：

  • 在 allowlist 中允许 mcp__ide__executeCode 只意味着 Claude 可以“提议”执行
  • 真正执行仍需 VS Code 内部的 Quick Pick 确认

常见问题排查

扩展无法安装

  • 确认 VS Code 版本 ≥ 1.98.0
  • 检查 VS Code 是否有安装扩展的权限
  • 尝试从 VS Code Marketplace 直接安装

看不到 Spark 图标

Spark 图标位于编辑器右上角的 Editor Toolbar，仅在打开文件时显示。如果看不到：

  1. 确认已打开某个文件（仅打开文件夹不够）
  2. 检查 VS Code 版本（Help → About），需 ≥ 1.98.0
  3. 在命令面板中运行 “Developer: Reload Window” 重载窗口
  4. 临时禁用其他 AI 扩展（如 Cline、Continue 等）排查冲突
  5. 检查当前工作区是否处于 Restricted Mode（受限模式下扩展无法正常工作）

替代方式：

  • 点击右下角状态栏中的 “✱ Claude Code”
  • 或通过命令面板（Cmd+Shift+P / Ctrl+Shift+P）输入 “Claude Code” 打开

Claude Code 没有响应

如果 Claude 对提示没有任何响应：

  1. 检查网络连接是否正常
  2. 尝试新建一个会话，看问题是否仍然存在
  3. 在终端中运行 claude，查看是否有更详细的错误信息

若问题持续存在，可以在 GitHub 上提交 issue，并附上错误详情。

卸载扩展

卸载 Claude Code 扩展：

  1. 打开扩展视图（Cmd+Shift+X / Ctrl+Shift+X）
  2. 搜索 “Claude Code”
  3. 点击 Uninstall

如果还希望删除扩展数据并重置所有设置，可在终端中执行：

rm -rf ~/.vscode/globalStorage/anthropic.claude-code