Hướng dẫn thao tác đồ họa yycode × Claude Code VS Code

Điều kiện tiên quyết

Đã hoàn tất cài đặt môi trường Node.js
Đã cài Claude Code (npm install -g @anthropic-ai/claude-code)

1. Cài đặt VS Code

Truy cập trang chủ VS Code để tải gói cài đặt tương ứng với nền tảng.

Người dùng Mac chú ý chọn đúng kiến trúc chip:

ARM64: chip M1 / M2 / M3 / M4
x64: chip Intel

2. Cài plugin Claude Code for VS Code

Mở VS Code, nhấp Extensions ở bên trái, tìm Claude Code for VS Code, chọn đúng publisher là Anthropic, nhấp Install.

Sau khi cài xong, mở bất kỳ dự án nào, nhấp icon Claude Code ở góc trên phải để mở bảng plugin.

3. Tạo API Key

Đăng nhập bảng điều khiển yycode, vào trang Quản lý token, nhấp Thêm token.

Điền tên khóa, chọn nhóm (mô hình và hệ số), cấu hình giới hạn IP, giới hạn hạn mức, giới hạn mô hình và thời hạn hiệu lực theo nhu cầu. Người mới nên dùng trực tiếp cấu hình mặc định.

Lưu ý bảo mật: API Key tương đương thông tin xác thực tài khoản, hãy bảo quản cẩn thận, tuyệt đối không commit vào kho mã hoặc chia sẻ công khai.

4. Nhập khóa

Nhấp nút Sao chép cạnh khóa để lấy API Key.

Cần thiết lập hai biến môi trường sau:

Tên biến	Giá trị
`ANTHROPIC_BASE_URL`	`https://yycode.net`
`ANTHROPIC_AUTH_TOKEN`	API Key của bạn

Thiết lập tạm thời (có hiệu lực trong phiên terminal hiện tại)

Windows (PowerShell):

$env:ANTHROPIC_BASE_URL = "https://yycode.net"
$env:ANTHROPIC_AUTH_TOKEN = "YOUR_API_KEY"

macOS / Linux:

export ANTHROPIC_BASE_URL="https://yycode.net"
export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"

Thiết lập vĩnh viễn (vẫn có hiệu lực sau khi khởi động lại)

Windows (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):

echo 'export ANTHROPIC_BASE_URL="https://yycode.net"' >> ~/.zshrc
echo 'export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"' >> ~/.zshrc
source ~/.zshrc

Linux (Bash):

echo 'export ANTHROPIC_BASE_URL="https://yycode.net"' >> ~/.bashrc
echo 'export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"' >> ~/.bashrc
source ~/.bashrc

5. Bỏ qua đăng nhập chính thức

Lần đầu mở plugin có thể xuất hiện trang đăng nhập chính thức Anthropic, hiển thị ba cách đăng nhập.

Đừng chọn bất kỳ cách nào — đợi 3-5 giây trang sẽ tự biến mất. Nếu đã cấu hình biến môi trường ở bước trước, plugin sẽ tự dùng API Key của Dragon Code, không cần đăng nhập.

Nếu trang đăng nhập không tự biến mất, nhấp cài đặt ở góc dưới trái, sau đó tìm Claude code, tích Disable Login Prompt để tắt thủ công.

Sau khi cấu hình thành công, giao diện như sau:

6. Bắt đầu sử dụng

Dùng ngôn ngữ tự nhiên mô tả nhu cầu trong ô nhập, tương tác với Claude Code theo dạng đối thoại; plugin sẽ tự động đọc và chỉnh sửa code của dự án hiện tại.

7. Mẹo sử dụng

Ba chế độ thao tác

Góc dưới trái có thể chuyển chế độ thao tác:

1. Ask before edits

Chế độ thận trọng nhất. Mỗi lần Claude sửa đổi, nó sẽ hiển thị nội dung thay đổi trước và hỏi xác nhận của bạn rồi mới ghi file. Phù hợp khi mới làm quen với công cụ, hoặc khi sửa code quan trọng cần kiểm soát từng bước.

2. Edit automatically

Chế độ tự động hóa cao nhất. Claude sẽ trực tiếp sửa file code, không xác nhận từng bước nữa. Phù hợp khi nhu cầu đã rõ và muốn triển khai nhanh. Cần lưu ý thay đổi có thể vượt dự kiến, sau đó nên kiểm tra Git diff để xác nhận phạm vi thay đổi.

3. Plan mode

Không sửa code trực tiếp, mà quét cấu trúc dự án trước, đưa ra phương án sửa đổi và bước thực hiện đầy đủ, đợi bạn xác nhận rồi mới thực thi. Phù hợp nhiệm vụ phức tạp như refactor, thay đổi nhiều file liên động, điều chỉnh kiến trúc. Xem phương án rồi mới làm giúp tránh mất kiểm soát khi thay đổi lớn.

Phát triển song song nhiều cửa sổ

Nhấp dấu + ở góc trên phải để mở nhiều cửa sổ Claude Code, ví dụ một cửa sổ phụ trách phát triển, một cửa sổ phụ trách test.

Tham chiếu file dự án

Nhập @ trong ô nhập rồi chọn tên file, có thể truyền nội dung file cho Claude Code làm ngữ cảnh.

Upload file

Nhập /attach file, chọn file từ file picker để upload.

Lưu ý: icon đính kèm ở góc dưới phải là tham chiếu file (thêm ngữ cảnh), không phải upload file, cần phân biệt.

Chuyển mô hình

Nhập /model, chọn Switch Model, chuyển mô hình theo nhu cầu.

Câu hỏi thường gặp (FAQ)

Q: Sau khi cài plugin không tìm thấy icon Claude Code?
A: Xác nhận plugin đã cài thành công, thử khởi động lại VS Code. Icon nằm ở toolbar góc trên phải của editor.

Q: Trang đăng nhập cứ không biến mất?
A: Nhập /config trong hộp thoại, tích Disable Login Prompt để tắt nhắc đăng nhập.

Q: Plugin báo kết nối thất bại hoặc lỗi 401?
A: Kiểm tra ANTHROPIC_BASE_URL có phải https://yycode.net không, và ANTHROPIC_AUTH_TOKEN có điền đúng và chưa hết hạn không.

Q: Làm sao chuyển mô hình hoặc hệ số khác?
A: Tạo khóa thuộc nhóm khác trong bảng điều khiển yycode, dùng CC Switch để nhanh chóng chuyển giữa nhiều cấu hình.

Q: VS Code nên chọn phiên bản nào?
A: Người dùng Mac chọn theo chip: chip dòng M chọn ARM64, chip Intel chọn x64. Người dùng Windows tải trực tiếp phiên bản mặc định là được.