【AI Coding】Claude Code 入门（三）：VSCode 插件模式 — 编辑器内的 AI 编程搭档

灯盏菜

45人浏览 · 2026-06-17 17:29:26

灯盏菜 · 2026-06-17 17:29:26 发布

【AI Coding】Claude Code 入门（三）：VSCode 插件模式 — 编辑器内的 AI 编程搭档

本篇讲解如何在 VSCode 中使用 Claude Code 插件，包括安装配置、核心功能和高效工作流。

一、为什么要用 VSCode 插件模式？

CLI 模式虽然强大，但在编辑器内直接使用有更直观的体验：

对比维度	CLI 模式	VSCode 插件模式
文件上下文	需要手动指定	自动感知当前打开的文件
代码选中	无法选中	选中代码直接提问
错误诊断	需要描述	直接读取编辑器错误
Diff 预览	终端输出	可视化 diff 面板
终端集成	独立窗口	内置终端面板
多文件操作	依赖描述	可视化展示所有改动

一句话总结：VSCode 插件模式 = CLI 的全部能力 + 编辑器原生体验。

二、安装 Claude Code VSCode 插件

2.1 安装步骤

方法一：VSCode 扩展商店搜索

打开 VSCode
Ctrl+Shift+X 打开扩展面板
搜索 Claude Code
点击安装（发布者为 Anthropic）

方法二：命令行安装

code --install-extension anthropic.claude-code

方法三：从 VSIX 安装

# 如果有 .vsix 文件
code --install-extension claude-code-x.x.x.vsix

2.2 安装后界面

安装完成后，VSCode 会发生以下变化：

┌─────────────────────────────────────────────────────┐
│  VSCode 顶部状态栏                                    │
│  [...文件...编辑...查看...]  [Claude 图标] ← 新增    │
├────────────┬──────────────────────┬──────────────────┤
│            │                      │                  │
│  资源管理器  │    编辑器区域        │  Claude 面板     │
│            │                      │  ← 侧边栏新增    │
│            │                      │                  │
├────────────┴──────────────────────┴──────────────────┤
│  终端面板（Claude 可在此输出）                        │
└─────────────────────────────────────────────────────┘

2.3 首次配置

插件使用与 CLI 相同的配置文件（~/.claude/settings.json），所以如果你已经在第一篇教程中配置好了 API，插件可以直接使用。

验证方式：

点击侧边栏的 Claude 图标
输入 你是什么模型？
如果收到正常回复，配置成功

三、核心功能详解

3.1 对话面板（Chat Panel）

侧边栏的 Claude 面板是主要交互区域：

┌─────────────────────────┐
│  Claude Code             │
│  ┌─────────────────────┐│
│  │ 🤖 Claude           ││
│  │ 你好！我可以帮你写代 ││
│  │ 码、修 bug、做重构。 ││
│  │ 有什么需要帮忙的？   ││
│  └─────────────────────┘│
│                          │
│  ┌─────────────────────┐│
│  │ 👤 You              ││
│  │ 帮我创建一个 React  ││
│  │ 组件...             ││
│  └─────────────────────┘│
│                          │
│  ┌─────────────────────┐│
│  │ 输入你的问题...  ➤  ││
│  └─────────────────────┘│
│  [模型: Opus] [⚡medium] │
└─────────────────────────┘

3.2 代码上下文感知

VSCode 模式下 Claude 自动感知编辑器上下文：

打开的文件

Claude 知道你当前打开了哪些文件
不需要手动告诉它 “看一下 XXX 文件”

选中的代码

选中一段代码后在 Claude 面板提问
Claude 会基于选中的代码回答

编辑器错误

红色波浪线标记的错误，Claude 可以直接读取
问 “这个错误怎么修” 即可

终端输出

Claude 可以读取 VSCode 终端的输出
编译错误、运行日志都能直接分析

3.3 Inline Chat（行内对话）

Ctrl+I 打开行内对话，在代码编辑区域直接与 Claude 交互：

# 在代码中选中一段，按 Ctrl+I
┌──────────────────────────────────────────┐
│  输入指令...                    [Send]   │
│                                          │
│  常用指令示例：                           │
│  - "给这个方法添加错误处理"               │
│  - "优化这段代码的性能"                   │
│  - "将这段代码转换为 TypeScript"          │
│  - "添加 JSDoc 注释"                     │
└──────────────────────────────────────────┘

Inline Chat 的特点：

精准定位：Claude 知道你要改的是哪段代码
即时预览：改动直接在编辑器中显示
一键接受/拒绝：改动以 diff 形式展示，按 Tab 接受，Esc 拒绝

3.4 Diff 预览与接受

Claude 修改代码时会生成可视化 diff：

  function calculateTotal(items) {
-   let total = 0;
-   for (let i = 0; i < items.length; i++) {
-     total += items[i].price;
-   }
-   return total;
+   return items.reduce((sum, item) => sum + item.price, 0);
  }

  [✓ Accept] [✗ Reject] [✎ Edit]

操作方式：

操作	快捷键	说明
接受改动	`Tab` 或点击 ✓	应用修改到文件
拒绝改动	`Esc` 或点击 ✗	丢弃修改
部分接受	手动选择	在 diff 中选择性保留

3.5 多文件改动

当 Claude 需要修改多个文件时，会展示文件列表：

Claude wants to modify 3 files:

📄 src/service/UserService.java      +15 -3
📄 src/controller/UserController.java +8 -2
📄 src/test/UserServiceTest.java     +42 -0

[Accept All] [Review Each] [Reject All]

四、高效工作流

4.1 开发新功能

Step 1: 在 Claude 面板描述需求
> 创建一个用户注册功能，包含邮箱验证和密码强度校验

Step 2: Claude 生成代码
- 自动创建 Service、Controller、DTO 等文件
- 展示每个文件的 diff

Step 3: 逐个审查并接受改动
- 点击 Review Each 逐个文件确认
- 或 Accept All 一键接受

Step 4: 让 Claude 生成测试
> 为刚才创建的注册功能生成单元测试

Step 5: 让 Claude 运行测试
> 运行测试，如果有失败帮我修复

4.2 Bug 修复流程

Step 1: 复制错误信息（或让 Claude 读取终端）
> 看一下控制台的报错，帮我修复

Step 2: Claude 分析错误原因
- 自动定位相关文件
- 解释错误原因
- 提出修复方案

Step 3: 接受修复并验证
> 修复好了吗？帮我运行一下确认

4.3 代码重构流程

> 这个 Controller 太臃肿了，帮我按职责拆分成多个文件

Claude 会：
1. 分析现有 Controller 的职责
2. 规划拆分方案
3. 创建新的 Controller 文件
4. 更新路由映射
5. 确保所有引用都更新

4.4 Git 工作流集成

# 在 Claude 面板中：
> 帮我提交当前改动，生成有意义的 commit message

> 创建一个 PR，描述清楚做了什么改动

> 帮我 review 一下 feature-login 分支和 main 的差异

五、快捷键速查

5.1 全局快捷键

快捷键	功能	说明
`Ctrl+Shift+P` → “Claude”	命令面板	所有 Claude 命令
`Ctrl+L`	聚焦 Claude 面板	快速切换到对话
`Ctrl+I`	Inline Chat	在编辑器中行内对话
`Ctrl+Shift+I`	新建对话	清空上下文重新开始

5.2 Claude 面板快捷键

快捷键	功能
`Enter`	发送消息
`Shift+Enter`	换行
`Ctrl+L`	清空对话
`@`	引用文件/符号

5.3 Diff 操作快捷键

快捷键	功能
`Tab`	接受当前改动
`Esc`	拒绝当前改动
`Ctrl+Z`	撤销

六、@ 引用系统

Claude Code VSCode 插件支持丰富的 @ 引用，精确控制上下文：

# 在输入框中使用 @ 引用

@file src/main.ts              # 引用特定文件
@folder src/components         # 引用整个目录
@symbol UserService            # 引用类/函数/变量
@selection                     # 引用当前选中的代码
@terminal                      # 引用终端输出
@diagnostics                   # 引用编辑器中的错误/警告
@git                           # 引用 Git 状态

实用示例：

# 精确引用文件
> 参考 @file UserService.java 的风格，帮我创建一个 OrderService

# 引用错误
> @diagnostics 这些报错是什么原因？怎么修？

# 引用终端
> @terminal 这个编译错误帮我修一下

# 引用 Git 改动
> @git 帮我 review 这些未提交的改动

七、Settings 配置优化

7.1 VSCode 专属设置

在 VSCode 的 settings.json 中（非 Claude 配置）：

{
  // Claude Code 面板位置
  "claude.panelLocation": "sidebar",

  // 自动附加打开的文件作为上下文
  "claude.autoAttachOpenFiles": true,

  // Diff 显示方式
  "claude.diffViewType": "inline",

  // 自动保存 Claude 修改的文件
  "claude.autoSaveFiles": true
}

7.2 模型和努力级别切换

在 VSCode 面板底部状态栏：

┌─────────────────────────────┐
│  [Opus ▼] [Medium Effort ▼] │
└─────────────────────────────┘

# 点击可快速切换：
# - 模型：Opus / Sonnet / Haiku
# - 努力级别：Low / Medium / High / Max

八、CLAUDE.md：项目级配置

8.1 什么是 CLAUDE.md？

CLAUDE.md 是放在项目根目录的配置文件，Claude 每次启动都会读取它。相当于给 Claude 的"项目说明书"。

8.2 创建 CLAUDE.md

# 在项目根目录创建
# 或在 Claude 中输入 /init 自动生成

# 方式一：手动创建
touch CLAUDE.md

# 方式二：让 Claude 帮你生成
claude
> /init

8.3 CLAUDE.md 示例

# 项目说明

本项目是一个电商后台管理系统，使用 Java 17 + Spring Boot 3.2。

## 技术栈
- 后端：Spring Boot 3.2, MyBatis-Plus, MySQL 8.0
- 前端：Vue 3, Element Plus, Vite
- 部署：Docker, Nginx

## 代码规范
- Java 代码遵循阿里巴巴 Java 开发规范
- 方法必须有 Javadoc 注释
- 所有 Service 方法需要 @Transactional
- Controller 只做参数校验和转发，业务逻辑放 Service

## 常用命令
- 启动：`mvn spring-boot:run`
- 测试：`mvn test`
- 打包：`mvn clean package -DskipTests`

## 项目结构
- src/main/java/com/example/controller — 控制器层
- src/main/java/com/example/service — 服务层
- src/main/java/com/example/mapper — 数据访问层
- src/main/java/com/example/entity — 实体类

8.4 CLAUDE.md 的作用

有了 CLAUDE.md，Claude 会：

自动遵循你定义的代码规范
使用你指定的技术栈和框架
理解项目结构和业务逻辑
生成的代码风格与项目一致

九、插件 vs CLI：如何选择？

场景	推荐模式
快速问答/生成代码片段	CLI (`claude -p`)
大型项目开发	VSCode 插件
CI/CD 集成	CLI (`--print` 模式)
代码审查	VSCode 插件（可视化 diff）
文件批量操作	CLI 或插件均可
需要看到代码高亮和 diff	VSCode 插件
远程服务器/SSH	CLI
多文件重构	VSCode 插件

最佳实践：日常开发用 VSCode 插件，脚本和自动化用 CLI。

十、总结

安装插件 → 配置 API（复用 CLI 配置）
    ↓
侧边栏对话：Ctrl+L 聚焦，@ 引用精确上下文
    ↓
行内对话：Ctrl+I，直接在代码中提问
    ↓
Diff 预览：Tab 接受，Esc 拒绝
    ↓
CLAUDE.md：项目级配置，让 Claude 理解你的规范

Claude Code 的 VSCode 插件模式让 AI 编程真正融入了日常开发流程。它不是独立的工具，而是你编辑器里的"同事" — 随时可以问、随时可以改、随时可以审查。

系列目录

【AI Coding】Claude Code 入门（一）：安装配置 & CC Switch 多模型切换

【AI Coding】Claude Code 入门（二）：CLI 命令行模式

【AI Coding】Claude Code 入门（三）：VSCode 插件模式 ← 本篇

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

AI 代码审查与质量保障 — 主流 AI 应用方向深度调研

AtomGit开源社区

yolov5 train.py参数解释

• --exist-ok：如果保存的目录已经存在，不会自动新建带编号的文件夹（如 exp1），而是直接覆盖，常用于重跑某个实验。• --sync-bn：同步批归一化，只有多卡分布式训练（DDP 模式）时有效，能让 BN 统计跨 GPU 同步，提升精度。• --cache-images：将图片缓存在内存或磁盘，减少反复读图的 IO 时间，加快训练，但会占用更多系统内存。• --image-weigh