在 VS Code 中使用 Claude Code

​

前置条件

• VS Code 1.98.0 或更高版本
• Anthropic 账户（首次打开扩展时您将登录）。如果您使用第三方提供商（如 Amazon Bedrock 或 Google Vertex AI），请参阅使用第三方提供商。

​

安装扩展

• 为 VS Code 安装
• 为 Cursor 安装

​

开始使用

1

打开 Claude Code 面板

在整个 VS Code 中，Spark 图标表示 Claude Code：打开 Claude 的最快方式是点击编辑器工具栏（编辑器右上角）中的 Spark 图标。当您打开文件时，该图标才会出现。打开 Claude Code 的其他方式：

• 命令面板：Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux），输入”Claude Code”，然后选择一个选项，如”在新选项卡中打开”
• 状态栏：点击窗口右下角的**✱ Claude Code**。即使没有打开文件也可以使用。

首次打开面板时，会出现学习 Claude Code 检查清单。通过点击显示给我来完成每一项，或用 X 关闭它。要稍后重新打开它，在 VS Code 设置中的扩展 → Claude Code 下取消选中隐藏入门。您可以拖动 Claude 面板在 VS Code 中重新定位到任何位置。有关详细信息，请参阅自定义您的工作流。

2

发送提示

要求 Claude 帮助您处理代码或文件，无论是解释某些内容的工作原理、调试问题还是进行更改。

Claude 会自动看到您选择的文本。按 Option+K（Mac）/ Alt+K（Windows/Linux）也可以在您的提示中插入 @-提及引用（如 @file.ts#5-10）。

以下是询问文件中特定行的示例：

3

审查更改

当 Claude 想要编辑文件时，它会显示原始内容和建议更改的并排比较，然后请求许可。您可以接受、拒绝或告诉 Claude 改为做什么。

​

使用提示框

• 权限模式：点击提示框底部的模式指示器以切换模式。在正常模式下，Claude 在每个操作前请求许可。在 Plan Mode 下，Claude 描述它将做什么并等待批准后再进行更改。在自动接受模式下，Claude 进行编辑而不询问。在 VS Code 设置中的 claudeCode.initialPermissionMode 下设置默认值。
• 命令菜单：点击 / 或输入 / 以打开命令菜单。选项包括附加文件、切换模型、切换扩展思考和查看计划使用情况（/usage）。自定义部分提供对 MCP servers、hooks、memory、permissions 和 plugins 的访问。带有终端图标的项目在集成终端中打开。
• Context 指示器：提示框显示您使用了多少 Claude 的 context window。Claude 在需要时自动压缩，或者您可以手动运行 /compact。
• 扩展思考：让 Claude 花更多时间推理复杂问题。通过命令菜单（/）切换打开。有关详细信息，请参阅扩展思考。
• 多行输入：按 Shift+Enter 添加新行而不发送。这也适用于问题对话框的”其他”自由文本输入。

​

引用文件和文件夹

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

​

恢复过去的对话

​

从 Claude.ai 恢复远程会话

​

自定义您的工作流

​

选择 Claude 的位置

• 次级侧栏：窗口的右侧。在您编码时保持 Claude 可见。
• 主侧栏：左侧边栏，带有资源管理器、搜索等图标。
• 编辑器区域：将 Claude 作为选项卡打开，与您的文件并排。适用于辅助任务。

​

运行多个对话

​

切换到终端模式

​

管理 plugins

​

安装 plugins

• 已安装的 plugins 显示在顶部，带有切换开关以启用或禁用它们
• 来自您配置的市场的可用 plugins 显示在下方
• 搜索以按名称或描述过滤 plugins
• 点击任何可用 plugin 上的安装

• 为您安装：在您的所有项目中可用（用户范围）
• 为此项目安装：与项目协作者共享（项目范围）
• 本地安装：仅适用于您，仅在此存储库中（本地范围）

​

管理市场

• 输入 GitHub 存储库、URL 或本地路径以添加新市场
• 点击刷新图标以更新市场的 plugin 列表
• 点击垃圾桶图标以删除市场

​

使用 Chrome 自动化浏览器任务

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

​

VS Code 命令和快捷键

​

配置设置

• 扩展设置在 VS Code 中：控制扩展在 VS Code 中的行为。使用 Cmd+,（Mac）或 Ctrl+,（Windows/Linux）打开，然后转到扩展 → Claude Code。您也可以输入 / 并选择常规配置以打开设置。
• Claude Code 设置在 ~/.claude/settings.json 中：在扩展和 CLI 之间共享。用于允许的命令、环境变量、hooks 和 MCP servers。有关详细信息，请参阅设置。

​

扩展设置

​

VS Code 扩展与 Claude Code CLI

​

使用 checkpoints 进行回退

• 从此处分叉对话：从此消息启动新的对话分支，同时保持所有代码更改完整
• 将代码回退到此处：将文件更改恢复到对话中的此点，同时保持完整的对话历史记录
• 分叉对话并回退代码：启动新的对话分支并将文件更改恢复到此点

​

在 VS Code 中运行 CLI

​

在扩展和 CLI 之间切换

​

在提示中包含终端输出

​

监控后台进程

​

使用 MCP 连接到外部工具

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

​

使用 git

​

创建提交和拉取请求

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

​

使用 git worktrees 进行并行任务

# Create a worktree for a new feature
git worktree add ../project-feature-a -b feature-a

# Run Claude Code in each worktree
cd ../project-feature-a && claude

​

使用第三方提供商

​

安全和隐私

• 为不受信任的工作区启用 VS Code 受限模式
• 使用手动批准模式而不是自动接受编辑
• 在接受更改前仔细审查它们

​

修复常见问题

​

扩展无法安装

• 确保您有兼容版本的 VS Code（1.98.0 或更高版本）
• 检查 VS Code 是否有权安装扩展
• 尝试从 VS Code Marketplace 直接安装

​

Spark 图标不可见

1. 打开文件：该图标需要打开文件。仅打开文件夹是不够的。
2. 检查 VS Code 版本：需要 1.98.0 或更高版本（帮助 → 关于）
3. 重启 VS Code：从命令面板运行”Developer: Reload Window”
4. 禁用冲突的扩展：临时禁用其他 AI 扩展（Cline、Continue 等）
5. 检查工作区信任：扩展在受限模式下不工作

​

Claude Code 从不响应

1. 检查您的互联网连接：确保您有稳定的互联网连接
2. 启动新对话：尝试启动新对话以查看问题是否仍然存在
3. 尝试 CLI：从终端运行 claude 以查看是否获得更详细的错误消息

​

卸载扩展

1. 打开扩展视图（Mac 上为 Cmd+Shift+X 或 Windows/Linux 上为 Ctrl+Shift+X）
2. 搜索”Claude Code”
3. 点击卸载

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

​

后续步骤

• 探索常见工作流以充分利用 Claude Code
• 设置 MCP servers 以使用外部工具扩展 Claude 的功能。使用 CLI 配置 servers，然后在扩展中使用它们。
• 配置 Claude Code 设置以自定义允许的命令、hooks 等。这些设置在扩展和 CLI 之间共享。