VS Code 集成

在 VS Code 中使用 Claude Code 扩展

VS Code 集成¶

除了在终端使用 Claude Code CLI，你还可以通过 VS Code 扩展在编辑器中直接使用 Claude Code，获得更便捷的开发体验。

前提条件¶

在配置 VS Code 扩展前，请确保：

1. Claude Code CLI 已安装并可正常使用

2. 参考 安装教程 完成安装

3. 参考 环境变量配置 完成配置

4. VS Code 版本 >= 1.98.0

安装步骤¶

步骤 1：安装 VS Code¶

如果尚未安装 VS Code，请访问 VS Code 官网 下载安装。

步骤 2：安装 Claude Code 扩展¶

在 VS Code 中：

1. 打开扩展面板（Ctrl+Shift+X / Cmd+Shift+X）

2. 搜索 "Claude Code for VS Code"

3. 点击 安装

或者使用命令行安装：

code --install-extension anthropic.claude-code

步骤 3：配置 primaryApiKey¶

这是关键步骤！Claude Code 扩展需要在配置文件中设置 primaryApiKey。

{
  "primaryApiKey": "qcode"
}

# 创建目录（如果不存在）
mkdir -p ~/.claude

# 创建配置文件
cat > ~/.claude/config.json << 'EOF'
{
  "primaryApiKey": "qcode"
}
EOF

# 创建目录（如果不存在）
mkdir -p ~/.claude

# 创建配置文件
cat > ~/.claude/config.json << 'EOF'
{
  "primaryApiKey": "qcode"
}
EOF

注意：primaryApiKey 的值可以是任意内容（如 qcode），只要配置了这个字段即可。实际的 API 认证仍然使用你在环境变量中配置的 ANTHROPIC_AUTH_TOKEN。

重要：配置文件是 config.json，不是 settings.json。请仔细区分这两个文件。

步骤 4：重启 VS Code¶

配置完成后，重启 VS Code 使配置生效。

使用方法¶

快捷键¶

常用功能¶

1. 代码解释

2. 选中代码

3. 右键选择 "Ask Claude" 或使用快捷键

4. 输入问题，如 "解释这段代码"

5. 代码生成

6. 打开 Claude 面板

7. 描述你需要的功能

8. Claude 会生成代码并提供插入选项

9. 代码重构

10. 选中需要重构的代码

11. 让 Claude 帮助重构

12. 预览并应用更改

13. 错误修复

14. 当代码出现错误时

15. 选中错误代码或错误信息
16. 让 Claude 分析并提供修复方案

配置选项¶

在 VS Code 设置中，你可以配置 Claude Code 扩展的行为：

1. 打开设置（Ctrl+, / Cmd+,）

2. 搜索 "Claude Code"

3. 根据需要调整选项

常用设置¶

{
  "claude-code.autoSuggest": true,
  "claude-code.inlineChat": true
}

与终端 CLI 配合使用¶

VS Code 扩展和终端 CLI 可以配合使用：

故障排除¶

扩展无法启动¶

1. 确认 Claude Code CLI 已正确安装

2. 检查环境变量配置

3. 验证 config.json 文件格式正确

primaryApiKey 错误¶

1. 确认文件路径正确：

2. Windows: C:\Users\你的用户名\.claude\config.json

3. macOS/Linux: ~/.claude/config.json

4. 确认是 config.json 而不是 settings.json

5. 确认 JSON 格式正确

连接超时¶

1. 检查网络连接

2. 验证 ANTHROPIC_BASE_URL 环境变量设置

3. 尝试在终端中运行 claude 确认 CLI 正常工作

下一步¶

• 查看 Cursor 集成 了解在 Cursor 中使用 Claude Code

• 探索 CLI 技巧 提升使用效率

• 学习 工作流技巧 优化开发流程