VS Code 插件

概述

Claude Code 提供了官方的 VS Code 扩展，让你无需离开编辑器即可使用 Claude 的强大能力。通过 VS Code 扩展，你可以在编写代码的同时与 Claude 对话、获取内联建议、进行代码审查，享受无缝集成的 AI 编程体验。

扩展功能一览

内置 Claude Code 聊天面板，支持完整的对话功能
选中代码后直接向 Claude 提问
内联代码建议和自动补全
与 VS Code 命令面板深度集成
终端内嵌 Claude Code 会话
文件差异预览和一键应用修改

安装 VS Code 扩展

方法一：从扩展市场安装

打开 VS Code
点击左侧活动栏中的扩展图标（或按 Ctrl+Shift+X / Cmd+Shift+X）
在搜索栏中输入 Claude Code
找到由 Anthropic 发布的官方扩展
点击安装按钮

方法二：通过命令行安装

code --install-extension anthropic.claude-code

方法三：从 CLI 自动安装

如果你已经安装了 Claude Code CLI，可以直接在终端中运行：

claude install-extension vscode

⚠️

注意

请确保从 Anthropic 官方发布的扩展安装，注意核实发布者信息。市场上可能存在第三方仿冒扩展。

验证安装

安装成功后，你会在 VS Code 的活动栏中看到 Claude Code 的图标。点击它即可打开 Claude Code 面板。

打开 Claude Code 面板

有多种方式可以打开 Claude Code 的聊天面板：

通过活动栏

点击 VS Code 左侧活动栏中的 Claude Code 图标，聊天面板会在侧边栏中打开。

通过命令面板

按下 Ctrl+Shift+P（macOS 为 Cmd+Shift+P）打开命令面板，输入 “Claude Code” 即可看到相关命令：

Claude Code: Open Chat — 打开聊天面板
Claude Code: New Conversation — 开始新的对话
Claude Code: Focus Chat Input — 聚焦到聊天输入框

通过快捷键

快捷键	功能
`Ctrl+Shift+A` / `Cmd+Shift+A`	打开 / 聚焦 Claude Code 面板
`Ctrl+Shift+L` / `Cmd+Shift+L`	将选中代码发送到 Claude

内联代码建议

Claude Code VS Code 扩展可以在你编写代码时提供智能的内联建议。

工作方式

当你在编辑器中编写代码时，Claude 会根据上下文自动提供代码补全建议。建议会以灰色文本显示在光标位置：

// 当你输入以下代码时：
function validateEmail(email: string) {
  // Claude 会自动建议完整的实现
  // 按 Tab 接受建议，按 Escape 忽略
}

触发内联建议

自动触发：在你暂停输入后，Claude 会自动分析上下文并给出建议
手动触发：按 Ctrl+Space / Cmd+Space 主动请求建议
接受建议：按 Tab 键接受当前建议
拒绝建议：按 Escape 键忽略建议
查看下一条：按 Alt+] 查看其他备选建议

💡

提示

内联建议会结合当前文件内容、项目上下文和你的编码模式来生成。打开的文件越多、项目结构越清晰，建议的质量就越高。

选中代码交互

这是 VS Code 扩展最实用的功能之一：选中一段代码，然后直接向 Claude 提问。

使用步骤

在编辑器中选中你想要讨论的代码
右键点击，选择 Ask Claude about Selection（或使用快捷键 Ctrl+Shift+L / Cmd+Shift+L）
选中的代码会自动作为上下文发送到 Claude 面板
在面板中输入你的问题

常见使用场景

# 选中一段代码后，可以提问：

"解释这段代码的逻辑"
"这段代码有什么潜在的 bug？"
"如何优化这段代码的性能？"
"帮我为这段代码写单元测试"
"将这段代码重构为更函数式的风格"

多段代码选择

你还可以在不同文件中选中多段代码，它们都会作为上下文附加到当前对话中。这对于分析跨文件的逻辑特别有用。

并排编辑

Claude Code 支持并排编辑模式，让你可以在编辑器中直接预览和应用 Claude 提出的修改。

差异预览

当 Claude 建议修改代码时，VS Code 会以差异视图（diff view）展示变更：

左侧显示原始代码
右侧显示修改后的代码
红色标注被删除的行
绿色标注新增的行

接受或拒绝修改

在差异预览中，你可以：

接受全部修改：点击 “Accept All” 按钮
逐个接受：点击每个修改块旁边的 “Accept” 按钮
拒绝修改：点击 “Reject” 按钮回到原始代码
编辑后接受：先手动调整 Claude 的建议，然后接受

ℹ️

信息

并排编辑模式让你对每一行代码变更都有完全的控制权。Claude 永远不会在未经你确认的情况下修改文件。

命令面板集成

Claude Code 扩展在 VS Code 命令面板中注册了丰富的命令，帮助你快速访问各种功能。

常用命令

按 Ctrl+Shift+P / Cmd+Shift+P 打开命令面板，输入 “Claude” 可以看到以下命令：

命令	功能
`Claude Code: Open Chat`	打开聊天面板
`Claude Code: New Conversation`	开始新对话
`Claude Code: Explain Selection`	解释选中代码
`Claude Code: Fix Selection`	修复选中代码的问题
`Claude Code: Add Tests`	为选中代码生成测试
`Claude Code: Add Documentation`	为选中代码添加文档注释
`Claude Code: Optimize Selection`	优化选中代码
`Claude Code: Open in Terminal`	在终端中打开 Claude Code
`Claude Code: Toggle Inline Suggestions`	开关内联建议

扩展设置

你可以通过 VS Code 的设置界面自定义 Claude Code 扩展的行为。

打开设置

按 Ctrl+, / Cmd+, 打开设置
搜索 “Claude Code”
根据需要调整各项设置

主要设置项

{
  // 是否启用内联代码建议
  "claudeCode.inlineSuggestions.enabled": true,

  // 内联建议的触发延迟（毫秒）
  "claudeCode.inlineSuggestions.delay": 500,

  // 聊天面板的默认位置
  "claudeCode.panel.position": "sidebar",

  // 是否在保存时自动分析文件
  "claudeCode.autoAnalyzeOnSave": false,

  // 发送到 Claude 的最大上下文行数
  "claudeCode.context.maxLines": 500,

  // 聊天面板字体大小
  "claudeCode.chat.fontSize": 14,

  // 是否显示工具调用详情
  "claudeCode.showToolCalls": true,

  // 自动确认文件修改（谨慎开启）
  "claudeCode.autoApplyEdits": false
}

⚠️

注意

不建议启用 autoApplyEdits 选项，除非你完全信任 Claude 的修改建议。保持手动确认可以避免意外的代码变更。

工作区级别设置

你可以为不同项目设置不同的配置。在项目的 .vscode/settings.json 中添加 Claude Code 相关的配置项即可：

{
  "claudeCode.context.maxLines": 1000,
  "claudeCode.inlineSuggestions.enabled": true
}

快捷键配置

默认快捷键

快捷键	功能
`Ctrl+Shift+A` / `Cmd+Shift+A`	打开 Claude Code 面板
`Ctrl+Shift+L` / `Cmd+Shift+L`	发送选中代码到 Claude
`Ctrl+Shift+K` / `Cmd+Shift+K`	内联修复（Fix Inline）
`Tab`	接受内联建议
`Escape`	忽略内联建议
`Alt+]` / `Option+]`	查看下一个建议
`Alt+[` / `Option+[`	查看上一个建议

自定义快捷键

如果默认快捷键与你的其他扩展冲突，可以通过 VS Code 的键盘快捷方式设置进行修改：

按 Ctrl+K Ctrl+S / Cmd+K Cmd+S 打开键盘快捷方式
搜索 “Claude Code”
双击要修改的快捷键，设置新的按键组合

最佳实践

1. 充分利用文件上下文

在向 Claude 提问时，确保相关文件已在编辑器中打开。Claude 会将打开的文件作为额外上下文，从而给出更准确的回答。

# 打开 UserService.ts 和 UserController.ts 后提问：
"分析 UserService 和 UserController 之间的依赖关系"

2. 结合终端使用

VS Code 扩展和内置终端中的 Claude Code 可以互补使用：

聊天面板：适合代码解释、小范围修改、快速提问
终端 Claude Code：适合大规模重构、文件操作、复杂的多步骤任务

# 在 VS Code 内置终端中直接使用 Claude Code CLI
claude

3. 善用代码选择

养成”选中代码再提问”的习惯，而不是用文字描述代码位置。这样可以：

避免描述歧义
让 Claude 获得精确的上下文
节省对话轮次

4. 保持对话聚焦

每个对话围绕一个主题或任务展开。当切换到不同的任务时，开始新的对话，以避免上下文混乱。

5. 利用工作区信任

VS Code 的工作区信任机制同样适用于 Claude Code 扩展。在受信任的工作区中，Claude Code 可以执行更多操作（如运行终端命令）。在受限工作区中，部分功能会被禁用以保证安全。

💡

提示

将 VS Code 和 Claude Code 结合使用时，你可以获得两者的优势：VS Code 强大的编辑器功能 + Claude 的 AI 理解和生成能力。这是目前最流行的 Claude Code 使用方式之一。

常见问题

扩展安装后没有显示

确保 VS Code 版本为 1.85 或更高。较旧的版本可能不支持 Claude Code 扩展所需的 API。

内联建议不出现

检查以下设置是否正确：

claudeCode.inlineSuggestions.enabled 是否为 true
当前文件类型是否在支持列表中
认证是否已完成（检查扩展状态栏图标）

响应速度慢

减小 claudeCode.context.maxLines 的值以减少发送的上下文量
确保网络连接稳定
关闭不需要的大文件以减少上下文负担

下一步

如果你使用 JetBrains 系列 IDE（如 IntelliJ IDEA、WebStorm、PyCharm），下一节将介绍如何在 JetBrains 中使用 Claude Code。