在 VS Code 中使用

目标：在 VS Code 中安装和配置 Claude Code，提升编辑体验
预计时间：15 分钟
对应官方文档：VS Code

安装扩展

方式一：VS Code 市场

1. 打开 VS Code
2. 点击左侧扩展图标（或按 Ctrl+Shift+X）
3. 搜索 "Claude Code"
4. 点击 Install

方式二：命令行

code --install-extension anthropic.claude-code

登录

安装后，VS Code 右下角会提示登录：

1. 点击 "Sign in to Claude"
2. 浏览器打开登录页面
3. 使用 Claude 账号授权
4. 回到 VS Code，状态栏显示 ✅ 已连接

打开 Claude Code 面板

方式一：侧边栏

点击左侧的 Claude 图标（🅒），打开聊天面板。

方式二：快捷键

Ctrl+Shift+J    # 打开/关闭 Claude 面板
Ctrl+L          # 聚焦到输入框

方式三：命令面板

Ctrl+Shift+P → "Claude Code: Open Panel"

VS Code 中使用 Claude Code 的工作流程

以下展示了在 VS Code 中使用 Claude Code 完成一次内联编辑的完整流程：

核心功能

1. 内联编辑（Inline Edits）

选中代码，按 Ctrl+I（或右键 → "Edit with Claude"）：

# 选中这段代码，按 Ctrl+I
def fib(n):
    if n < 2:
        return n
    return fib(n-1) + fib(n-2)

输入提示："添加类型注解和缓存"

Claude 会直接在编辑器中显示 diff：

+ from functools import lru_cache
+
+ @lru_cache(maxsize=None)
  def fib(n: int) -> int:
      if n < 2:
          return n
      return fib(n-1) + fib(n-2)

按 Tab 接受，Esc 拒绝。

2. @ 提及文件和符号

在聊天框中：

请解释 @src/auth.py 中的 login 函数

支持：

• @文件名 - 引用文件
• @#符号名 - 引用函数/类
• @文件夹/ - 引用整个目录

3. 终端集成

Claude Code 终端直接嵌入 VS Code：

1. 打开终端（`Ctrl+``）
2. 输入 claude 启动
3. 与侧边栏共享会话状态

4. 计划审查（Plan Review）

对于复杂任务，Claude 会先生成执行计划：

我将按以下步骤重构：
1. 提取配置到单独文件
2. 更新所有导入语句
3. 添加兼容性测试

[查看计划] [执行] [修改]

点击 查看计划 可以逐条审阅，确认后再执行。

VS Code 特有功能

配置

扩展设置

打开设置（Ctrl+,），搜索 "Claude Code"：

{
  "claude.code.enableInlineEdits": true,
  "claude.code.defaultMode": "ask",
  "claude.code.showDiffInEditor": true,
  "claude.code.autoRunTests": false
}

键盘快捷键自定义

// keybindings.json
[
  {
    "key": "ctrl+shift+c",
    "command": "claude.code.openPanel"
  },
  {
    "key": "ctrl+shift+i",
    "command": "claude.code.inlineEdit"
  }
]

更多代码示例

示例 1：在 settings.json 中为不同项目配置不同模式

在 VS Code 的工作区设置中（.vscode/settings.json）：

{
  "claude.code.defaultMode": "auto-edits",
  "claude.code.enableInlineEdits": true,
  "claude.code.showDiffInEditor": true,
  "claude.code.autoRunTests": false,
  "claude.code.ignoredFiles": [
    "node_modules/**",
    "dist/**",
    "*.min.js"
  ]
}

这样该工作区打开时，Claude 默认使用 Auto Edits 模式，并且内联编辑和 diff 预览都自动启用。

示例 2：自定义键盘快捷键以提升效率

在 keybindings.json 中添加以下绑定：

[
  {
    "key": "ctrl+shift+c",
    "command": "claude.code.openPanel"
  },
  {
    "key": "ctrl+shift+i",
    "command": "claude.code.inlineEdit"
  },
  {
    "key": "ctrl+shift+a",
    "command": "claude.code.addSelectionToContext"
  },
  {
    "key": "ctrl+shift+e",
    "command": "claude.code.explainSelection"
  }
]

配置完成后：

• Ctrl+Shift+C：快速打开/关闭 Claude 面板
• Ctrl+Shift+I：对当前选中的代码发起内联编辑
• Ctrl+Shift+A：将当前选中的代码块加入 Claude 上下文
• Ctrl+Shift+E：让 Claude 解释当前选中的代码

示例 3：使用 @ 符号精确引用代码符号

在 Claude 面板中输入：

请解释 @src/services/order.py 中的 #calculate_total 方法，
并检查 @src/models/product.py 中 #Product.price 的数值类型是否匹配。

Claude 会：

1. 自动读取 order.py 中的 calculate_total 方法
2. 读取 product.py 中的 Product 类及 price 字段
3. 给出方法解释并检查类型一致性（如 Decimal vs float）

实战场景

场景 1：在 VS Code 中使用内联编辑优化算法

背景：你在 src/sorting.py 中写了一个冒泡排序用于临时测试，现在需要将其替换为更高效的 TimSort（Python 内置 sorted()），同时保持原有的函数签名和日志记录逻辑。

操作步骤：

1. 在 VS Code 中打开 src/sorting.py，选中整个 bubble_sort 函数（约 15 行）
2. 按 Ctrl+I 触发内联编辑
3. 在弹出的输入框中输入：

   使用 Python 内置 sorted() 替代冒泡排序实现，
   保留原有的日志记录和参数校验逻辑。
   

4. VS Code 编辑器中会直接显示 diff：
   • 红色：原冒泡排序循环代码
   • 绿色：新的 result = sorted(data, key=key, reverse=reverse) 调用
   • 保留的日志代码不变
5. 按 Tab 接受修改，或直接点击编辑器中的 ✅ 按钮
6. 保存文件（Ctrl+S），Claude 自动询问是否运行相关测试
7. 在侧边栏按 Y 确认运行测试，确认排序结果一致

预期结果：算法从 O(n²) 提升到 O(n log n)，原有日志和参数校验保留，测试通过，全程无需离开编辑器。

场景 2：跨文件重构——批量更新 API 调用方式

背景：你的团队决定将项目中的所有 requests.get 调用改为内部封装的 http_client.get，以增加统一的超时和重试逻辑。涉及 12 个文件，需要逐一修改。

操作步骤：

1. 在 VS Code 侧边栏打开 Claude Code 面板（Ctrl+Shift+J）
2. 先让 Claude 定位所有需要修改的位置：

   > 搜索整个项目中所有使用 requests.get 的文件，
   > 列出文件路径和行号。
   

3. Claude 在面板中返回：

   Found requests.get in:
   - src/api/users.py:23
   - src/api/orders.py:41
   - src/services/payment.py:15
   - ...（共 12 个文件）
   

4. 下达批量修改指令：

   > 将所有文件中的 requests.get(url, ...) 替换为 http_client.get(url, ...)，
   > 同时：
   > 1. 在文件顶部添加 from src.http_client import http_client
   > 2. 移除不再需要的 import requests
   > 3. 确保保留原有的 headers、timeout 等参数
   > 4. 每改完一个文件运行对应测试
   

5. Claude 切换到 Auto Edits 模式，逐文件修改并在面板中展示进度：

   Modified src/api/users.py ✓ (tests passed)
   Modified src/api/orders.py ✓ (tests passed)
   ...
   

6. 全部完成后，Claude 输出总结，你可以在 VS Code 的"源代码管理"面板中查看所有变更的完整 diff

预期结果：12 个文件全部更新，import 语句正确替换，参数完整保留，测试全部通过。相比在终端 CLI 中操作，VS Code 中可以同时查看代码变更、测试输出和 diff，体验更流畅。

与终端 CLI 的区别

建议： 复杂编辑用 VS Code，快速查询用终端。

常见问题

下一步

→ 07. 常见问题排错