Appearance
VSCode 中使用 Claude Code 教程
Claude Code 除了可以在终端中使用 CLI，还提供了 VSCode 扩展，让你直接在编辑器内与 Claude 交互，获得更流畅的开发体验。
前提条件
- VS Code 版本 >= 1.75.2
- 已按照 CLI 安装教程 配置好 Claude Code CLI 并可正常使用
步骤 1：安装 Claude Code 扩展
- 打开 VS Code
- 使用快捷键打开扩展面板：
- macOS：
Cmd + Shift + X - Windows / Linux：
Ctrl + Shift + X
- macOS：
- 在搜索框中输入 Claude Code
- 找到发布者为 Anthropic 的扩展，点击 Install 安装
注意
请认准发布者为 Anthropic 的官方扩展，避免安装第三方仿冒插件。
步骤 2：配置 VBCode.io API
VSCode 扩展与 CLI 共享配置文件。如果你已经按照 CLI 安装教程 配置好了 Claude Code CLI 并可以正常使用（即 settings.json 和 claude.json 已配置完成），无需额外配置，可以直接跳到步骤 3。
如果你还没有配置过 CLI，请先完成以下配置：
2.1 获取 Auth Token
访问 VBCode.io API 控制台 进行以下操作：
- 点击「添加令牌」
- 名称：随便填写方便自己区分即可
- 令牌分组：根据实际需要选择，分组有详细描述（必填项，不能留空）
- 额度建议：设置为无限额度
- 其他选项保持默认
2.2 配置 settings.json
重要提示
请将下方的 ANTHROPIC_AUTH_TOKEN 替换为您在 https://vbcode.io/console/token 生成的 API 密钥！
配置位置：
| 系统 | 路径 |
|---|---|
| macOS / Linux | ~/.claude/settings.json |
| Windows | %USERPROFILE%\.claude\settings.json |
json
{
"env": {
"ANTHROPIC_AUTH_TOKEN": "你的API密钥",
"ANTHROPIC_BASE_URL": "https://www.vbcode.io"
}
}2.3 配置 claude.json
⚠️ 特别注意 - 请仔细阅读！
在 ~/.claude.json（Windows 为 %USERPROFILE%\.claude.json）文件中添加：
json
{
"... (其他现有配置保持不变)": "",
"hasCompletedOnboarding": true
}❌ 不要看错文件！不要添加到 ~/.claude/settings.json
这是两个不同的文件：
- ✅ 正确：
~/.claude.json（用户根目录下的文件） - ❌ 错误：
~/.claude/settings.json（.claude 文件夹内的文件）
步骤 3：启动 Claude Code
配置完成后，有以下方式启动 Claude Code：
方式一：侧边栏图标
点击 VSCode 左侧活动栏中的 Claude Code 图标，即可打开 Claude Code 面板。
方式二：快捷键
- macOS：
Cmd + Esc - Windows / Linux：
Ctrl + Esc
方式三：命令面板
- 打开命令面板（
Cmd + Shift + P/Ctrl + Shift + P） - 输入
Claude Code搜索相关命令 - 选择 Claude Code: Open 打开面板
启动后，如果配置正确，Claude Code 面板会显示对话界面，你可以直接开始提问。
验证连接
在对话框中输入任意问题（如"你好"），如果能正常收到回复，说明 VBCode.io API 配置成功。
步骤 4：常用功能与使用技巧
对话交互
在 Claude Code 面板的输入框中直接输入问题或指令，Claude 会根据你的项目上下文给出回答。常见用法：
- 提问代码相关问题
- 请求生成代码片段
- 让 Claude 解释某段代码的逻辑
- 请求重构或优化建议
文件上下文共享
Claude Code 会自动感知你当前的工作上下文：
- 当前打开的文件：Claude 可以读取你正在编辑的文件内容
- 选中的代码：选中一段代码后与 Claude 对话，它会针对选中内容进行分析
- 项目结构：Claude 可以浏览你的项目文件，理解整体架构
权限模式
Claude Code 提供不同的权限模式来控制 AI 对文件的操作：
| 模式 | 说明 |
|---|---|
| 自动编辑 | Claude 可以直接修改文件，适合信任度高的场景 |
| 请求批准 | 每次修改前需要你确认，适合谨慎操作 |
| 计划模式 | Claude 先制定方案，经你批准后再执行 |
你可以根据任务复杂度和信任程度选择合适的模式。
Diff 查看器
当 Claude 修改文件时，VSCode 会以 Diff 视图 展示变更内容：
- 绿色高亮：新增的代码
- 红色高亮：删除的代码
- 你可以逐个审查并接受或拒绝每处变更
Git 集成
Claude Code 可以帮你完成常见的 Git 操作：
- 生成有意义的 commit message
- 创建 Pull Request
- 查看 diff 和变更历史
示例指令：
帮我提交当前的修改，写一个合适的 commit message常用斜杠命令
在对话框中输入 / 可以使用斜杠命令：
| 命令 | 说明 |
|---|---|
/model | 切换使用的模型 |
/status | 查看当前连接状态和配置信息 |
/clear | 清除当前对话历史 |
/help | 查看帮助信息 |
/compact | 压缩对话上下文，释放 token 空间 |
常见问题
扩展安装后没有看到 Claude Code 图标？
尝试重启 VSCode，或检查扩展是否已启用。确保 VS Code 版本 >= 1.75.2。
提示连接失败或 API 错误？
- 检查
~/.claude/settings.json中的ANTHROPIC_AUTH_TOKEN和ANTHROPIC_BASE_URL是否正确 - 确认
~/.claude.json中已添加"hasCompletedOnboarding": true - 确认网络可以正常访问 vbcode.io
CLI 和 VSCode 扩展可以同时使用吗？
可以。两者共享 ~/.claude/settings.json 和 ~/.claude.json 配置文件，配置一次即可在两个环境中使用。