VS Code 集成

VS Code Integration

Claude Code 提供了原生的 VS Code 扩展，将 AI 编程助手直接嵌入你最熟悉的编辑器中。通过图形化界面，你可以在不离开编辑器的情况下完成代码生成、重构、调试等任务。

安装 VS Code 扩展

Installing the VS Code Extension

前置条件

在安装扩展之前，请确保满足以下条件：

条件	要求
VS Code 版本	1.80 或更高
Node.js	18.0 或更高
Claude Code CLI	已安装并完成认证
操作系统	macOS、Linux 或 Windows（WSL）

安装步骤

方法一：从扩展市场安装

打开 VS Code
按下 Ctrl+Shift+X（macOS: Cmd+Shift+X）打开扩展面板
搜索 "Claude Code"
点击 Install 安装

方法二：通过命令行安装

bash

code --install-extension anthropic.claude-code

方法三：从 CLI 自动安装

bash

claude install-vscode-extension

验证安装

安装成功后，你会在 VS Code 侧边栏看到 Claude Code 图标。点击后即可打开聊天面板。

# 如果 CLI 尚未认证，先完成认证
claude auth login

图形化界面介绍

Graphical Interface Overview

VS Code 扩展提供了一个完整的图形化界面，主要包含以下区域：

聊天面板

聊天面板是你与 Claude 交互的主要区域，位于侧边栏中。

区域	功能描述
消息输入框	输入指令和问题
对话历史	查看当前会话的所有消息
文件引用	通过 @-mention 引用项目文件
工具调用面板	查看 Claude 执行的工具调用详情
权限提示	审批文件修改和命令执行

状态栏

在 VS Code 底部状态栏中，你会看到 Claude Code 的状态指示器：

就绪：Claude 已连接，等待输入
思考中：Claude 正在处理请求
等待审批：需要你确认文件修改或命令执行

布局选项

json

// settings.json 中可以调整面板位置
{
  "claude-code.panelPosition": "sidebar",  // 或 "panel"、"editor"
  "claude-code.showStatusBar": true
}

@-mentions 引用文件/文件夹

@-mentions for Files and Folders

VS Code 扩展支持通过 @ 符号快速引用项目中的文件和文件夹，让 Claude 获取精确的上下文信息。

基本用法

在聊天输入框中输入 @，即可触发文件搜索：

@src/components/Header.tsx 这个组件有个 bug，点击菜单按钮无响应

引用类型

引用方式	示例	说明
单个文件	`@src/index.ts`	引用指定文件内容
文件夹	`@src/components/`	引用整个文件夹结构
多个文件	`@fileA.ts @fileB.ts`	同时引用多个文件
终端内容	`@terminal`	引用当前终端输出
Git 变更	`@git-diff`	引用当前未提交的变更

使用技巧

# 引用文件并提出具体问题
@utils/validation.ts 请为这个文件中的每个函数添加输入验证

# 引用多个文件进行对比
@old-api.ts @new-api.ts 对比这两个版本的 API 差异并生成迁移指南

# 引用文件夹分析架构
@src/services/ 分析这个服务层的架构设计，找出潜在问题

多标签会话

Multi-Tab Sessions

VS Code 扩展支持同时运行多个独立的 Claude 会话，每个会话拥有独立的上下文。

创建新会话

点击聊天面板顶部的 + 按钮创建新标签
使用快捷键 Ctrl+Shift+P，输入 Claude Code: New Session
每个标签都是独立的对话，可以执行不同的任务

会话管理

# 常见的多标签使用场景

标签 1: 正在进行代码重构
标签 2: 同时编写单元测试
标签 3: 调试一个独立的 bug

会话恢复

如果 VS Code 意外关闭，扩展会自动保存会话状态。重新打开后，你可以选择恢复之前的会话。

操作	快捷键
新建会话	`Ctrl+Shift+N`（扩展内）
切换会话	点击标签页
关闭会话	点击标签页上的 `x`
恢复会话	自动提示

自动接受编辑

Auto-Accept Edits

默认情况下，Claude 的每次文件修改都需要你手动确认。自动接受功能可以跳过这一步，加速工作流。

启用方式

json

// settings.json
{
  "claude-code.autoAcceptEdits": true
}

也可以在聊天面板中点击 Auto-accept 开关来切换。

安全考虑

场景	推荐设置
个人项目、快速原型	开启自动接受
团队项目、生产代码	关闭自动接受，逐步审查
学习和探索	关闭自动接受，理解每步变更

临时覆盖

即使启用了自动接受，你仍然可以通过 Ctrl+Z（撤销）快速回退任何不满意的修改。VS Code 的撤销历史会完整记录 Claude 的所有改动。

内联 Diff 查看

Inline Diff Viewer

当 Claude 修改文件时，VS Code 扩展会以内联 diff 的方式展示变更，让你清晰看到每一处改动。

Diff 展示模式

扩展支持两种 diff 展示模式：

内联模式（推荐）

在编辑器中直接高亮显示变更，绿色为新增行，红色为删除行：

diff

- const result = data.filter(item => item.active);
+ const result = data.filter((item) => item.active && item.verified);

并排模式

以左右对照的方式展示修改前后的完整文件。

操作按钮

每个 diff 块上方都有操作按钮：

按钮	功能
Accept	接受当前变更
Reject	拒绝当前变更
Accept All	接受所有变更
Reject All	拒绝所有变更

终端集成

Terminal Integration

VS Code 扩展与编辑器内置终端深度集成，Claude 可以直接在终端中执行命令。

终端命令执行

当 Claude 需要执行命令时（如安装依赖、运行测试），你会看到终端命令预览：

bash

# Claude 可能会执行以下命令
npm install lodash @types/lodash
npm run test -- --watch

终端上下文共享

你可以将终端的输出内容引用到对话中：

# 选中终端中的错误输出，右键选择 "Send to Claude"
# 或使用 @terminal 引用当前终端内容

@terminal 这个编译错误怎么修复？

Shell 环境

扩展会继承 VS Code 的终端环境配置，包括 PATH、环境变量等。确保你的终端配置正确：

json

// settings.json
{
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.env.linux": {
    "ANTHROPIC_API_KEY": "${env:ANTHROPIC_API_KEY}"
  }
}

快捷键列表

Keyboard Shortcuts

以下是 VS Code 扩展的默认快捷键列表：

快捷键	功能	macOS
`Ctrl+Shift+A`	打开 Claude 面板	`Cmd+Shift+A`
`Ctrl+Shift+P` → Claude	命令面板搜索	`Cmd+Shift+P`
`Ctrl+L`	清除当前对话	`Cmd+L`
`Ctrl+Enter`	发送消息	`Cmd+Enter`
`Escape`	取消当前操作	`Escape`
`Ctrl+Shift+N`	新建会话标签	`Cmd+Shift+N`

自定义快捷键

你可以在 keybindings.json 中自定义快捷键：

json

[
  {
    "key": "ctrl+shift+c",
    "command": "claude-code.openPanel",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+r",
    "command": "claude-code.newSession"
  }
]

设置同步

Settings Sync

VS Code 的设置同步功能可以将 Claude Code 扩展的配置同步到所有设备。

同步内容

项目	是否同步
扩展设置	是
快捷键	是
会话历史	否（保存在本地）
API 密钥	否（安全考虑）
权限记忆	否（保存在项目中）

配置示例

json

{
  "claude-code.autoAcceptEdits": false,
  "claude-code.panelPosition": "sidebar",
  "claude-code.showStatusBar": true,
  "claude-code.theme": "auto",
  "claude-code.fontSize": 14,
  "claude-code.maxContextFiles": 10
}

与 CLI 的功能对比

Comparison with CLI

VS Code 扩展和 CLI 各有优势，选择取决于你的工作场景。

功能	VS Code 扩展	CLI
文件编辑预览	内联 diff，可视化	终端 diff 输出
文件引用	@-mention 自动补全	手动指定路径
多会话	多标签支持	使用 `--resume`
权限管理	弹窗确认	终端交互确认
自动完成	支持 Tab 补全	有限支持
无头模式	不支持	`claude -p`
CI/CD 集成	不适用	完全支持
MCP 工具	支持	支持
键盘操作	GUI + 快捷键	纯键盘操作
启动速度	随编辑器启动	即时启动

使用建议

日常开发：推荐使用 VS Code 扩展，可视化反馈更直观
脚本自动化：使用 CLI 的无头模式
远程服务器：使用 CLI（SSH 环境无 GUI）
快速问答：使用 CLI，启动更快

同时使用

VS Code 扩展和 CLI 可以同时使用，它们共享相同的认证信息和项目配置文件（CLAUDE.md、.claude/settings.json）。

bash

# CLI 中执行快速任务
claude -p "列出 src/ 下所有未使用的导出"

# 同时在 VS Code 中进行交互式开发
# 两者互不干扰

常见问题

FAQ

Q: 扩展安装后无法启动？

确保 Claude Code CLI 已正确安装且在 PATH 中可用：

bash

which claude
claude --version

Q: 扩展响应缓慢？

检查以下设置：

json

{
  "claude-code.maxContextFiles": 5,
  "claude-code.timeout": 30000
}

减少同时引用的文件数量，或增加超时时间。

Q: 如何在远程 SSH 环境中使用？

VS Code Remote SSH 连接时，扩展会在远程服务器上运行。确保远程服务器也安装了 Claude Code CLI 并完成认证。

VS Code 集成 ​

安装 VS Code 扩展 ​

前置条件 ​

安装步骤 ​

验证安装 ​

图形化界面介绍 ​

聊天面板 ​

状态栏 ​

布局选项 ​

@-mentions 引用文件/文件夹 ​

基本用法 ​

引用类型 ​

使用技巧 ​

多标签会话 ​

创建新会话 ​

会话管理 ​

会话恢复 ​

自动接受编辑 ​

启用方式 ​

安全考虑 ​

临时覆盖 ​

内联 Diff 查看 ​

Diff 展示模式 ​

操作按钮 ​

终端集成 ​

终端命令执行 ​

终端上下文共享 ​

Shell 环境 ​

快捷键列表 ​

自定义快捷键 ​

设置同步 ​

同步内容 ​

配置示例 ​

与 CLI 的功能对比 ​

使用建议 ​

同时使用 ​

常见问题 ​

VS Code 集成

安装 VS Code 扩展

前置条件

安装步骤

验证安装

图形化界面介绍

聊天面板

状态栏

布局选项

@-mentions 引用文件/文件夹

基本用法

引用类型

使用技巧

多标签会话

创建新会话

会话管理

会话恢复

自动接受编辑

启用方式

安全考虑

临时覆盖

内联 Diff 查看

Diff 展示模式

操作按钮

终端集成

终端命令执行

终端上下文共享

Shell 环境

快捷键列表

自定义快捷键

设置同步

同步内容

配置示例

与 CLI 的功能对比

使用建议

同时使用

常见问题