canonical_url: https://yycode.net/docs/zh-TW/vscode-gui-guide
lang: zh-TW
updated_at: 2026-07-04T13:33:48.616Z
source_html: https://yycode.net/docs/zh-TW/vscode-gui-guide

# yycode × Claude Code VS Code 圖形化操作教學


## 前置條件

- 已完成 [Node.js 環境安裝](nodejs-setup)
- 已安裝 Claude Code（`npm install -g @anthropic-ai/claude-code`）

---

## 1. 安裝 VS Code

前往 [VS Code 官網](https://code.visualstudio.com/Download) 下載對應平台的安裝包。

Mac 使用者注意選擇正確的芯片架構：

- **ARM64**：M1 / M2 / M3 / M4 芯片
- **x64**：Intel 芯片

---

## 2. 安裝 Claude Code for VS Code 插件

打開 VS Code，點選左側 **擴展市場**（Extensions），搜尋 `Claude Code for VS Code`，認準發布者為 **Anthropic**，點選 **安裝**。

![](https://r2.bozhouai.com/dragoncode/file-20260401164747215.png)

安裝完成後，打開任意專案，點選右上角的 **Claude Code 圖標** 打開插件面板。

![](https://r2.bozhouai.com/dragoncode/file-20260401164814316.png)

---

## 3. 建立 API Key

登入 [yycode 控制台](https://yycode.net/console/token)，進入 **權杖管理** 頁面，點選 **新增權杖**。

![](https://r2.yycode.net/yycode/i9bq1Ik.png)
![](https://r2.yycode.net/yycode/9KXR1Ik.png)

填寫金鑰名稱，選擇分組（模型和倍率），按需設定 IP 限制、額度限制、模型限制和有效期。新手建議直接使用預設設定。

> **安全提示**：API Key 等同於帳號憑證，請妥善保管，切勿提交到程式碼儲存庫或公開分享。

---

## 4. 導入金鑰


點選金鑰旁的 **複製** 按鈕取得 API Key。

![](https://r2.yycode.net/yycode/EDOv1Ik.png)

需要設置以下兩個環境變數：

| 變數名 | 值 |
|---|---|
| `ANTHROPIC_BASE_URL` | `https://yycode.net` |
| `ANTHROPIC_AUTH_TOKEN` | 您的 API Key |

**臨時設置（目前終端機會話有效）**

Windows (PowerShell)：
```powershell
$env:ANTHROPIC_BASE_URL = "https://yycode.net"
$env:ANTHROPIC_AUTH_TOKEN = "YOUR_API_KEY"
```

macOS / Linux：
```bash
export ANTHROPIC_BASE_URL="https://yycode.net"
export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"
```

**永久設置（重啟後依然有效）**

Windows (PowerShell)：
```powershell
[System.Environment]::SetEnvironmentVariable("ANTHROPIC_BASE_URL", "https://yycode.net", [System.EnvironmentVariableTarget]::User)
[System.Environment]::SetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN", "YOUR_API_KEY", [System.EnvironmentVariableTarget]::User)
```

macOS (Zsh)：
```bash
echo 'export ANTHROPIC_BASE_URL="https://yycode.net"' >> ~/.zshrc
echo 'export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"' >> ~/.zshrc
source ~/.zshrc
```

Linux (Bash)：
```bash
echo 'export ANTHROPIC_BASE_URL="https://yycode.net"' >> ~/.bashrc
echo 'export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"' >> ~/.bashrc
source ~/.bashrc
```

---

## 5. 跳過官方登入

首次打開插件可能出現 Anthropic 官方登入頁面，顯示三種登入方式。

**不要選擇任何一種**——等待 3-5 秒頁面會自動消失。如果已按上一步設定好環境變數，插件會自動使用 Dragon Code 的 API Key，無需登入。

![](https://r2.bozhouai.com/dragoncode/file-20260401164915737.png)

如果登入頁面沒有自動消失，左下角點選設置，然後搜尋Claude code，勾選 **Disable Login Prompt** 手動關閉。
![](https://r2.bozhouai.com/dragoncode/file-20260401165140845.png)

![](https://r2.bozhouai.com/dragoncode/file-20260401165116806.png)

設定成功後介面如下：

![](https://r2.bozhouai.com/dragoncode/file-20260401165223172.png)

---

## 6. 開始使用

在輸入框中用自然語言描述需求，通過對話形式與 Claude Code 交互，插件會自動讀取和修改目前專案的程式碼。

![](https://r2.bozhouai.com/dragoncode/file-20260401165343382.png)

---

## 7. 使用技巧

### 三種操作模式

左下角可切換操作模式：

![](https://r2.bozhouai.com/dragoncode/file-20260401165410771.png)

**1. Ask before edits（編輯前詢問）**

最保守的模式。Claude 每一次修改都會先展示變更內容，征求你的確認後才會寫入檔案。適合剛上手不熟悉工具時使用，或在修改關鍵程式碼時需要逐步把關的場景。

**2. Edit automatically（自動編輯）**

最高自動化的模式。Claude 會直接修改程式碼檔案，不再逐步確認。適合需求已經明確、希望快速落地修改的場景。需要注意改動可能超出預期，建議事後檢查 Git diff 確認變更範圍。

**3. Plan mode（規劃模式）**

不直接改程式碼，而是先掃描專案結構，給出完整的修改方案和執行步驟，等你確認後再執行。適合複雜任務，比如程式碼重構、多檔案聯動改動、架構調整等。先看方案再動手，避免大規模改動失控。

### 多視窗並行開發

點選右上角 **+** 號可開啟多個 Claude Code 視窗，例如一個負責開發、一個負責測試。

![](https://r2.bozhouai.com/dragoncode/file-20260401170043951.png)

### 引用專案檔案

在輸入框中輸入 `@` 後選擇檔案名稱，可將檔案內容作為上下文傳遞給 Claude Code。

![](https://r2.bozhouai.com/dragoncode/file-20260401170057102.png)

### 上傳檔案

輸入 `/attach file`，從檔案選擇器中上傳檔案。

![](https://r2.bozhouai.com/dragoncode/file-20260401170128374.png)

> **注意**：右下角的附件圖標是 **引用檔案**（新增上下文），不是上傳檔案，注意區分。

### 切換模型

輸入 `/model`，選擇 **Switch Model**，按需切換模型。

![](https://r2.bozhouai.com/dragoncode/file-20260401170141185.png)

---

## 常見問題（FAQ）

**Q：插件安裝後找不到 Claude Code 圖標？**
A：確認插件已安裝成功，嘗試重啟 VS Code。圖標位於編輯器右上角工具欄。

**Q：登入頁面一直不消失？**
A：在對話框輸入 `/config`，勾選 `Disable Login Prompt` 關閉登入提示。

**Q：插件提示連接失敗或 401 錯誤？**
A：檢查 `ANTHROPIC_BASE_URL` 是否為 `https://yycode.net`，以及 `ANTHROPIC_AUTH_TOKEN` 是否填寫正確且未過期。

**Q：如何切換不同模型或倍率？**
A：在 [yycode 控制台](https://yycode.net/console/token) 建立不同分組的金鑰，通過 CC Switch 在多個設定間快速切換。

**Q：VS Code 應該選哪個版本？**
A：Mac 使用者根據芯片選擇：M 系列芯片選 ARM64，Intel 芯片選 x64。Windows 使用者直接下載預設版本即可。