Claude Code 提供了官方 VS Code 扩展，让你在编辑器内直接与 AI 对话、查看差异、应用代码更改，无需在终端和编辑器之间频繁切换。
安装 VS Code 扩展
方法一：扩展市场安装
- 打开 VS Code
- 按
Ctrl+Shift+X（Mac:Cmd+Shift+X）打开扩展面板 - 搜索「Claude Code」
- 点击安装
方法二：命令行安装
bash
code --install-extension anthropic.claude-code方法三：从 Claude Code CLI 启动
bash
claud # 在 VS Code 终端中运行，自动集成核心功能
内联差异对比（Diff View）
Claude Code 提出代码修改时，VS Code 扩展会显示专用的差异视图：
- 左侧：原始代码
- 右侧：AI 建议的修改
- 可以逐块接受或拒绝
直接在编辑器中打开文件
Claude Code 打开或编辑文件时，直接在 VS Code 编辑器标签页中显示，而不是在终端中打印。
侧边栏对话面板
不需要切换到终端窗口，直接在 VS Code 侧边栏与 Claude Code 对话。
键盘快捷键
| 功能 | Windows/Linux | macOS |
|---|---|---|
| 打开 Claude Code 面板 | Ctrl+Shift+C | Cmd+Shift+C |
| 接受当前差异 | Ctrl+Enter | Cmd+Enter |
| 拒绝当前差异 | Ctrl+Backspace | Cmd+Backspace |
| 接受所有差异 | Ctrl+Shift+Enter | Cmd+Shift+Enter |
| 新建对话 | Ctrl+Shift+N | Cmd+Shift+N |
工作流示例
重构现有代码
bash
# 1. 在 VS Code 中打开项目
cd my-project && code .
# 2. 在集成终端启动 Claude Code
claude
# 3. 描述重构目标
> 把 utils.js 中的所有回调函数改成 async/await 风格
# 4. Claude Code 展示差异，在 VS Code 中查看和接受添加单元测试
bash
> 为 src/auth.js 中的所有导出函数写 Jest 单元测试
# Claude Code 在 VS Code 中打开差异视图
# 你可以逐个函数检查和接受测试代码代码审查辅助
bash
> 审查 src/ 目录下最近修改的文件，找出潜在的安全问题
# Claude Code 在 VS Code 中逐文件展示发现的问题VS Code 扩展 vs 纯终端模式
| 特性 | VS Code 扩展 | 纯终端 |
|---|---|---|
| 代码差异可视化 | 原生差异视图 | 终端文本 |
| 文件导航 | 编辑器标签页 | 终端路径 |
| 对话界面 | 侧边栏面板 | 全终端 |
| 代码高亮 | VS Code 原生 | 有限 |
| 多文件并行 | 多标签页 | 单终端 |
| 快捷键集成 | 完整支持 | 无 |
设置 VS Code 为默认编辑器
让 Claude Code 优先使用 VS Code 打开文件：
bash
# 设置环境变量
export EDITOR=code
export VISUAL=code
# 或在 claude.json 中配置
{
"editor": "vscode"
}与 Cursor 的对比
Claude Code 官方 VS Code 扩展 vs Cursor（内置 Claude 的 VS Code fork）：
- Claude Code 扩展：官方支持，功能由 Anthropic 控制，可在标准 VS Code 中使用
- Cursor：集成更深，有自己的 UI，但依赖第三方实现
- 推荐：如果你已经使用 VS Code，优先用官方扩展；如果从零开始选编辑器，Cursor 也是好选择
常见问题
扩展无法连接到 Claude Code？确保在 VS Code 的集成终端中运行 claude，扩展会自动检测并连接。
差异视图不显示？检查扩展版本，运行 claude --version 确保 CLI 和扩展版本兼容。
原文整理自：Claude Code VS Code Integration | 来源：Anthropic 官方文档