> ## Documentation Index
> Fetch the complete documentation index at: https://docs.acedata.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Claude Code for VS Code 使用教程

> Claude Code 集成指南 - Ace Data Cloud

Claude Code 是 Anthropic 推出的一款 **Agentic Coding** 工具，也被称为世界最强编程 Agent 之一。Claude Code 的 VS Code 扩展提供了原生的图形化界面，支持内联 Diff 视图、`@`-mentions 引用、计划审查等功能，是在 VS Code 中使用 Claude Code 的推荐方式。

本文档主要介绍如何通过 AceData Cloud 的代理服务，在 VS Code 中配置和使用 Claude Code 扩展。

## 申请流程

要使用 Claude Code，首先可以到 [Claude Messages 服务页面](https://platform.acedata.cloud/documents/claude-messages) 点击「Acquire」按钮，获取请求所需要的凭证：

![](https://cdn.acedata.cloud/nyq0xz.png)

如果你尚未登录或注册，会自动跳转到登录页面邀请您来注册和登录，登录注册之后会自动返回当前页面。

在首次申请时会有免费额度赠送，可以免费体验 Claude Code 服务。

## 安装插件

### 系统要求

* VS Code 1.98.0 或更高版本（也支持 Cursor）

### 安装步骤

在 VS Code / Cursor 的扩展市场中，按 `Cmd+Shift+X`（Mac）或 `Ctrl+Shift+X`（Windows/Linux）打开扩展视图，搜索 **Claude Code**，找到 Anthropic 官方发布的插件并点击「Install」安装：

![VS Code Marketplace 中的 Claude Code 插件](https://cdn.acedata.cloud/10ddf71320.png)

也可以通过以下链接直接安装：

* [VS Code 安装链接](vscode:extension/anthropic.claude-code)
* [Cursor 安装链接](cursor:extension/anthropic.claude-code)

安装后在弹出的信息提示中选择信任，即可完成安装。

> 如果安装后扩展没有出现，请重启 VS Code 或在命令面板中执行「Developer: Reload Window」。

## 配置 AceData Cloud API

第一次打开插件时，会提示登录 Anthropic 官方账号。我们可以跳过官方登录，通过配置 AceData Cloud 的代理 API 来使用，**无需官方订阅**。

### 步骤一：配置环境变量

你可以选择在以下任一位置配置环境变量：

**选项 A：用户级配置（所有项目适用）**

编辑 `~/.claude/settings.json`（如果不存在则创建），添加 `env` 配置，将 `{token}` 替换为你在 AceData Cloud 控制台获取的 API 令牌：

```json theme={null}
{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "{token}",
    "ANTHROPIC_BASE_URL": "https://api.acedata.cloud"
  }
}
```

**选项 B：项目级配置（仅当前项目）**

在项目根目录创建 `.claude/settings.json`（共享配置）或 `.claude/settings.local.json`（个人配置，gitignored）：

```json theme={null}
{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "{token}",
    "ANTHROPIC_BASE_URL": "https://api.acedata.cloud"
  }
}
```

> **提示**：API 令牌可在 [AceData Cloud 控制台](https://platform.acedata.cloud/console) 中查看。`ANTHROPIC_AUTH_TOKEN` 的值会被自动添加 `Bearer` 前缀发送到服务端。项目级配置优先级高于用户级配置。建议在团队项目中使用 `.claude/settings.json` 共享配置，个人敏感信息放在 `.claude/settings.local.json` 中。

### 步骤二：禁用登录提示（可选）

如果不想每次打开都看到登录提示，可以在 VS Code 设置中勾选 **Disable Login Prompt**：

在设置中搜索「Claude Code login」，找到 **Disable Login Prompt** 选项并勾选即可。

配置完成后，重新打开 Claude Code 插件面板，即可正常开始使用。

## 打开 Claude Code 面板

安装并配置完成后，有多种方式打开 Claude Code：

| 方式         | 操作                                             |
| ---------- | ---------------------------------------------- |
| **编辑器工具栏** | 点击编辑器右上角的 ✦ Spark 图标（需要打开一个文件）                 |
| **状态栏**    | 点击底部状态栏右侧的「✱ Claude Code」（无需打开文件）              |
| **命令面板**   | `Cmd+Shift+P` / `Ctrl+Shift+P`，搜索「Claude Code」 |
| **快捷键**    | `Cmd+Esc`（Mac）/ `Ctrl+Esc`（Windows/Linux）切换焦点  |

与 Cursor / Copilot 等工具使用侧边栏不同，Claude Code 默认采用**编辑区视图**作为聊天区域，可视区域更大，内容展示更丰富。你也可以将面板拖动到侧边栏或其他位置。

![VS Code 中的 Claude Code 面板](https://cdn.acedata.cloud/b84b878420.jpg)

## 基本使用

### 对话交互

在 Claude Code 面板中直接输入自然语言即可与 Claude 交互。例如：

* 「帮我分析这个项目的整体架构」
* 「这段代码有 Bug，帮我修一下」
* 「把这个函数重构一下，提升可读性」
* 「给这个模块写单元测试」

Claude Code 会自动理解你的代码库上下文，跨文件进行分析和编辑。当 Claude 需要修改文件时，会显示 Diff 对比视图，你可以选择接受或拒绝修改。

![VS Code 中的 Claude Code 对话和提示](https://cdn.acedata.cloud/650377f5cc.png)

### 上下文引用

在对话中使用 `@` 符号可以引用特定文件或上下文：

* `@filename.py` — 引用指定文件（支持模糊匹配）
* `@src/components/` — 引用整个目录（需要尾部斜杠）
* `@terminal:name` — 引用终端输出

选中编辑器中的代码后，按 `Option+K`（Mac）/ `Alt+K`（Windows/Linux）可以快速插入 `@` 引用（如 `@app.ts#5-10`）。

### 斜杠命令

点击对话框中的 `/` 图标，或直接输入 `/`，可以使用丰富的内置功能：

常用命令包括：

| 命令         | 功能           |
| ---------- | ------------ |
| `/new`     | 新建对话         |
| `/model`   | 切换模型         |
| `/compact` | 压缩上下文        |
| `/mcp`     | 配置 MCP 服务    |
| `/config`  | 打开设置         |
| `/usage`   | 查看用量         |
| `/memory`  | 管理 Claude 记忆 |
| `/help`    | 显示帮助信息       |

### 查看历史对话

点击面板顶部的下拉菜单即可查看历史对话记录，支持按关键词搜索和按时间段（Today、Yesterday、Last 7 days 等）浏览，方便回溯之前的交互内容。点击任意对话即可恢复完整消息历史。

### 审阅代码变更

当 Claude 需要修改文件时，会显示 Diff 对比视图，展示原始代码和修改后的对比。你可以选择接受或拒绝每项修改，也可以告诉 Claude 你想要的不同做法：
![VS Code 中的 Diff 对比视图](https://cdn.acedata.cloud/c42381ea9f.png)

### 權限模式

透過面板底部的模式指示器可以切換不同的權限模式：

| 模式                    | 說明                      |
| --------------------- | ----------------------- |
| **Default（Ask）**      | 每次操作前詢問確認（預設）           |
| **Plan**              | Claude 先制定計畫等待審批，確認後才執行 |
| **acceptEdits**       | 自動接受文件編輯，但終端命令仍需確認      |
| **bypassPermissions** | 跳過所有權限提示，完全自動化（謹慎使用）    |

### 多會話並行

使用命令面板中的 **Open in New Tab** 或 **Open in New Window** 可以啟動多個獨立對話，每個對話維護獨自的歷史和上下文，可以並行處理不同任務。

## 其他設定

### 切換模型

Claude Code 支援切換不同的模型，例如 Claude Sonnet、Claude Opus 等。可以透過 `/model` 命令或在插件設定的 **Selected Model** 中配置。

### 自動模式

在插件設定中可以將 **Initial Permission Mode** 設為 `bypassPermissions`，開啟後 Claude Code 執行文件編輯、終端命令等操作時不再逐一彈窗確認，實現全自動化工作流。

也可以設為 `acceptEdits` 實現自動接受編輯但終端命令仍需確認的半自動模式。

> **注意**：開啟自動模式前請確保你了解其風險，建議在可信的專案環境中使用。

### 在終端中使用 CLI

如果你更偏好命令行風格，可以在 VS Code 設定中勾選 **Use Terminal**，Claude Code 會以 CLI 模式在集成終端中運行。你也可以直接打開 VS Code 集成終端，運行 `claude` 命令。

## 常見問題

### 連接失敗怎麼辦？

1. 確認 `~/.claude/settings.json` 或 `.claude/settings.json` 中環境變數配置正確，特別是 `ANTHROPIC_AUTH_TOKEN` 和 `ANTHROPIC_BASE_URL`
2. 確認 API 令牌有效（可在 [控制台](https://platform.acedata.cloud/console) 查看）
3. 檢查網路連接是否正常，確保能訪問 `https://api.acedata.cloud`
4. 重啟 VS Code 後重試

### Spark 圖標沒有出現？

1. 確保已打開一個文件（僅打開文件夾不夠）
2. 確認 VS Code 版本為 1.98.0 或更高
3. 在命令面板中執行「Developer: Reload Window」
4. 或者直接點擊底部狀態欄的「✱ Claude Code」

### 如何查看剩餘額度？

登錄 [AceData Cloud 控制台](https://platform.acedata.cloud/console)，即可查看當前賬戶的剩餘額度和使用情況。

## 了解更多

* 📖 [Claude Code VS Code 官方文檔](https://code.claude.com/docs/en/vs-code)
* ⌨️ [VS Code 命令和快捷鍵參考](https://code.claude.com/docs/en/vs-code#vs-code-commands-and-shortcuts)
* 🔧 [AceData Cloud Claude Code 服務](https://platform.acedata.cloud/documents/claude-messages)
* 💬 如有任何問題，歡迎透過平台客服聯繫我們