> ## 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 User Guide

> Claude Code 集成指南 - Ace Data Cloud

Claude Code is an **Agentic Coding** tool launched by Anthropic, also known as one of the world's strongest programming agents. The Claude Code extension for VS Code provides a native graphical interface, supporting inline Diff views, `@`-mentions, plan reviews, and more, making it the recommended way to use Claude Code in VS Code.

This document mainly introduces how to configure and use the Claude Code extension in VS Code through the AceData Cloud proxy service.

## Application Process

To use Claude Messages service page, first open the [Ace Data Cloud Console](https://platform.acedata.cloud/console/applications) and copy your API Token.

![](https://cdn.acedata.cloud/5hmkdg.jpg)

If you are not logged in, you will be redirected to sign in and brought back to this page automatically.

**A single API Token works across every service on the platform — no need to subscribe per service.** New accounts receive free starter credit; when it runs low you can top up your shared balance in the [console](https://platform.acedata.cloud/console/coin).

> 📘 Full documentation: [Claude Messages service page →](https://platform.acedata.cloud/documents/claude-messages)

## Install Plugin

### System Requirements

* VS Code 1.98.0 or higher (Cursor is also supported)

### Installation Steps

In the VS Code / Cursor extension marketplace, press `Cmd+Shift+X` (Mac) or `Ctrl+Shift+X` (Windows/Linux) to open the extension view, search for **Claude Code**, find the plugin published by Anthropic, and click "Install":

![Claude Code Plugin in VS Code Marketplace](https://cdn.acedata.cloud/10ddf71320.png)

You can also install directly via the following links:

* [VS Code Installation Link](vscode:extension/anthropic.claude-code)
* [Cursor Installation Link](cursor:extension/anthropic.claude-code)

After installation, select trust in the pop-up information prompt to complete the installation.

> If the extension does not appear after installation, please restart VS Code or execute "Developer: Reload Window" in the command palette.

## Configure AceData Cloud API

The first time you open the plugin, you will be prompted to log in to the official Anthropic account. You can skip the official login and use the AceData Cloud proxy API configuration instead, **without an official subscription**.

### Step 1: Configure Environment Variables

You can choose to configure environment variables in any of the following locations:

**Option A: User-level Configuration (Applicable to all projects)**

Edit `~/.claude/settings.json` (create it if it does not exist), add the `env` configuration, and replace `{token}` with the API token obtained from the AceData Cloud console:

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

**Option B: Project-level Configuration (Only for the current project)**

Create `.claude/settings.json` (shared configuration) or `.claude/settings.local.json` (personal configuration, gitignored) in the project root directory:

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

> **Tip**: The API token can be viewed in the [AceData Cloud console](https://platform.acedata.cloud/console). The value of `ANTHROPIC_AUTH_TOKEN` will automatically have the `Bearer` prefix added when sent to the server. Project-level configuration takes precedence over user-level configuration. It is recommended to use `.claude/settings.json` for shared configurations in team projects, while personal sensitive information should be placed in `.claude/settings.local.json`.

### Step 2: Disable Login Prompt (Optional)

If you do not want to see the login prompt every time you open it, you can check **Disable Login Prompt** in the VS Code settings:

Search for "Claude Code login" in the settings, find the **Disable Login Prompt** option, and check it.

After configuration, reopen the Claude Code plugin panel to start using it normally.

## Open Claude Code Panel

After installation and configuration, there are multiple ways to open Claude Code:

| Method              | Action                                                                                      |
| ------------------- | ------------------------------------------------------------------------------------------- |
| **Editor Toolbar**  | Click the ✦ Spark icon in the upper right corner of the editor (a file needs to be open)    |
| **Status Bar**      | Click "✱ Claude Code" on the right side of the bottom status bar (no file needs to be open) |
| **Command Palette** | `Cmd+Shift+P` / `Ctrl+Shift+P`, search for "Claude Code"                                    |
| **Shortcut Key**    | `Cmd+Esc` (Mac) / `Ctrl+Esc` (Windows/Linux) to switch focus                                |

Unlike tools like Cursor / Copilot that use a sidebar, Claude Code defaults to an **editor view** as the chat area, providing a larger visible area and richer content display. You can also drag the panel to the sidebar or other locations.

![Claude Code Panel in VS Code](https://cdn.acedata.cloud/b84b878420.jpg)

## Basic Usage

### Conversational Interaction

You can directly input natural language in the Claude Code panel to interact with Claude. For example:

* "Help me analyze the overall architecture of this project"
* "This piece of code has a bug, help me fix it"
* "Refactor this function to improve readability"
* "Write unit tests for this module"

Claude Code will automatically understand the context of your codebase, analyzing and editing across files. When Claude needs to modify a file, a Diff comparison view will be displayed, allowing you to choose to accept or reject the changes.

![Claude Code Conversation and Prompts in VS Code](https://cdn.acedata.cloud/650377f5cc.png)

### Contextual References

Using the `@` symbol in the conversation allows you to reference specific files or contexts:

* `@filename.py` — Reference a specific file (supports fuzzy matching)
* `@src/components/` — Reference an entire directory (requires a trailing slash)
* `@terminal:name` — Reference terminal output

After selecting code in the editor, pressing `Option+K` (Mac) / `Alt+K` (Windows/Linux) can quickly insert an `@` reference (e.g., `@app.ts#5-10`).

### Slash Commands

Click the `/` icon in the dialog box, or directly type `/`, to use a variety of built-in functions:

Common commands include:

| Command    | Function                 |
| ---------- | ------------------------ |
| `/new`     | Start a new conversation |
| `/model`   | Switch model             |
| `/compact` | Compress context         |
| `/mcp`     | Configure MCP service    |
| `/config`  | Open settings            |
| `/usage`   | View usage               |
| `/memory`  | Manage Claude memory     |
| `/help`    | Display help information |

### View Conversation History

Click the dropdown menu at the top of the panel to view the history of conversations, supporting keyword searches and browsing by time periods (Today, Yesterday, Last 7 days, etc.), making it easy to trace back previous interactions. Click any conversation to restore the full message history.

### Review Code Changes

When Claude needs to modify a file, a Diff comparison view will be displayed, showing the comparison between the original code and the modified version. You can choose to accept or reject each modification, or tell Claude what different approach you want:
![Diff comparison view in VS Code](https://cdn.acedata.cloud/c42381ea9f.png)

### Permission Modes

You can switch between different permission modes using the mode indicator at the bottom of the panel:

| Mode                  | Description                                                                        |
| --------------------- | ---------------------------------------------------------------------------------- |
| **Default (Ask)**     | Asks for confirmation before each operation (default)                              |
| **Plan**              | Claude first makes a plan and waits for approval, only executes after confirmation |
| **acceptEdits**       | Automatically accepts file edits, but terminal commands still require confirmation |
| **bypassPermissions** | Skips all permission prompts, fully automated (use with caution)                   |

### Multi-session Parallelism

You can start multiple independent conversations using **Open in New Tab** or **Open in New Window** in the command panel, with each conversation maintaining its own history and context, allowing for parallel processing of different tasks.

## Other Settings

### Switch Model

Claude Code supports switching between different models, such as Claude Sonnet, Claude Opus, etc. You can configure this through the `/model` command or in the plugin settings under **Selected Model**.

### Automatic Mode

In the plugin settings, you can set **Initial Permission Mode** to `bypassPermissions`, which, when enabled, allows Claude Code to perform file edits, terminal commands, and other operations without popping up confirmation for each, achieving a fully automated workflow.

You can also set it to `acceptEdits` to achieve a semi-automatic mode that automatically accepts edits but still requires confirmation for terminal commands.

> **Note**: Please ensure you understand the risks before enabling automatic mode; it is recommended to use it in trusted project environments.

### Using CLI in Terminal

If you prefer a command-line style, you can check **Use Terminal** in the VS Code settings, and Claude Code will run in CLI mode in the integrated terminal. You can also directly open the VS Code integrated terminal and run the `claude` command.

## Frequently Asked Questions

### What to do if the connection fails?

1. Ensure that the environment variable configuration in `~/.claude/settings.json` or `.claude/settings.json` is correct, especially `ANTHROPIC_AUTH_TOKEN` and `ANTHROPIC_BASE_URL`
2. Confirm that the API token is valid (can be checked in the [console](https://platform.acedata.cloud/console))
3. Check if the network connection is normal and ensure access to `https://api.acedata.cloud`
4. Restart VS Code and try again

### Why is the Spark icon not appearing?

1. Ensure that a file is open (just opening a folder is not enough)
2. Confirm that the VS Code version is 1.98.0 or higher
3. Execute "Developer: Reload Window" in the command panel
4. Or directly click on "✱ Claude Code" in the bottom status bar

### How to check the remaining quota?

Log in to the [AceData Cloud console](https://platform.acedata.cloud/console) to view the current account's remaining quota and usage.

## Learn More

* 📖 [Claude Code VS Code Official Documentation](https://code.claude.com/docs/en/vs-code)
* ⌨️ [VS Code Commands and Shortcuts Reference](https://code.claude.com/docs/en/vs-code#vs-code-commands-and-shortcuts)
* 🔧 [AceData Cloud Claude Code Service](https://platform.acedata.cloud/documents/claude-messages)
* 💬 If you have any questions, feel free to contact us through the platform's customer service