CÁCH SỬ DỤNG CLAUSE CODE TRÊN VISUAL CODE

1. Tổng quan về Claude Code và Kiến trúc Agentic

Claude Code là công cụ AI agent điều khiển qua dòng lệnh (CLI) và extension cho VS Code do Anthropic phát triển. Khác với các công cụ gợi ý mã nguồn tự động thông thường (như GitHub Copilot), Claude Code hoạt động như một trợ lý lập trình tự chủ:

• Khả năng hiểu Context rộng: Duy trì ngữ cảnh dự án toàn cục nhờ mô hình Claude 3.7 Sonnet / Claude 3.5 Sonnet với cửa sổ ngữ cảnh lên tới 200k tokens.
• Tự chủ thực thi: Tự động đọc file, tìm kiếm codebase, chỉnh sửa mã nguồn, chạy lệnh terminal, kiểm tra lỗi lint và sửa bug trực tiếp trên cây thư mục dự án.

2. Chuẩn bị Môi trường & Yêu cầu Hệ thống

• Trước khi bắt đầu cài đặt, hãy đảm bảo hệ thống đáp ứng các điều kiện sau:

Thành phần	Yêu cầu tối thiểu	Khuyến nghị
Node.js	v18.0.0+	v20.x LTS trở lên
VS Code	v1.85.0+	Phiên bản mới nhất
Hệ điều hành	macOS 10.15+, Ubuntu 20.04+, Windows WSL2	macOS / Linux / Windows WSL2
Tài khoản	Anthropic Console API Key hoặc Claude Pro/Team	Tài khoản API có credit hoạt động

 

3. Cài đặt và Xấu hình Claude Code CLI

Dù sử dụng extension hay làm việc qua terminal của VS Code, bạn vẫn cần cài đặt công cụ dòng lệnh lõi:

1. Cài đặt qua NPM global:

Bash

npm install -g @anthropic-ai/claude-code

2. Xác thực API Key: Chạy lệnh lần đầu tiên để liên kết tài khoản:

Bash

claude

Hệ thống sẽ mở trình duyệt để xác thực OAuth hoặc yêu cầu bạn nhập ANTHROPIC_API_KEY. Bạn cũng có thể thiết lập biến môi trường trong file .bashrc / .zshrc:

4. Tích hợp và Thiết lập trên Visual Studio Code

Để có trải nghiệm mượt mà nhất trong VS Code, hãy làm theo các bước thiết lập tích hợp:

1.Mở Integrated Terminal:Shortcut: Ctrl + (hoặc Cmd + trên macOS).

Đảm bảo bạn đã mở thư mục gốc của dự án (Root Workspace) trong VS Code trước khi mở terminal.

2.Cài đặt Claude Code Extension:Khuyến nghị cho trải nghiệm Sidebar.

Vào tab Extensions (Ctrl+Shift+X), tìm kiếm Claude Code và nhấn Install để bật giao diện bảng điều khiển bên (Side Panel).

3.Khởi chạy Session:Kết nối dự án.

Tại Integrated Terminal của VS Code, gõ lệnh claude để bắt đầu một phiên làm việc interactive.

5. Cấu trúc Lệnh CLI & Cách Đặt Prompt Hiệu quả

Claude Code hỗ trợ cả câu lệnh tự nhiên lẫn các slash command chuyên dụng trong phiên làm việc.

Các Slash Commands thông dụng:

• /compact: Nén lịch sử trò chuyện để giải phóng dung lượng context window.
• /clear: Xóa lịch sử phiên hiện tại và bắt đầu lại context mới.
• /cost: Hiển thị lượng token và chi phí API đã sử dụng trong phiên.
• /doctor: Kiểm tra sức khỏe kết nối API và quyền truy cập file.

Kỹ thuật Prompt cho Claude Code:

• Cụ thể hóa yêu cầu: Thay vì gõ "Fix bug trong auth", hãy gõ "Kiểm tra file src/services/auth.ts, tìm nguyên nhân JWT token không hết hạn đúng lúc và bổ sung unit test".
• Giới hạn phạm vi: Chỉ định rõ thư mục hoặc module nếu dự án quá lớn.

6. Quy trình Làm việc Thực tế (Workflow Demo)

Giả sử bạn cần tạo một API endpoint mới trong dự án Node.js/TypeScript:

1. Khảo sát mã nguồn:

Plaintext

> Hãy tìm tất cả các file liên quan đến User Routing và đọc cấu trúc schema database của User.

Claude Code sẽ tự động dùng grep/glob search để liệt kê các file và đọc nội dung.

2. Yêu cầu tạo Feature:

Plaintext

> Thêm endpoint POST /api/v1/users/reset-password vào controller. Tạo DTO validation và bổ sung logic gửi email.

Claude Code sẽ đề xuất chỉnh sửa trên các file tương ứng.

3. Duyệt và Xác nhận: Claude Code sẽ hiển thị Diff (sự thay đổi mã nguồn). Bạn bấm y để đồng ý cho ghi file hoặc n để yêu cầu điều chỉnh.

7. Quản lý Quản lý File .claudeignore và Cấu hình Project

Để tránh việc Claude Code quét vào các file rác, file nhạy cảm hoặc bộ nhớ tạm làm tốn token:

1. Tạo file .claudeignore tại thư mục gốc dự án.
2. Cấu trúc nội dung tương tự .gitignore:

Plaintext

node_modules/

dist/

build/

.env*

*.log

coverage/

3. Tạo file CLAUDE.md tại thư mục gốc để cung cấp "luật dự án" cho AI (ví dụ: quy chuẩn đặt tên, thư viện ưu tiên sử dụng, lệnh test mặc định).

8. Tự động hóa Testing, Debugging và Code Review

• Tự chạy và sửa Unit Test: Khi một test case bị lỗi, bạn có thể truyền lệnh test cho Claude Code:

Plaintext

> Chạy npm test và tự động sửa các file mã nguồn gây ra lỗi test thất bại.

• Code Review trước khi Commit:

Plaintext

> Chạy git diff và kiểm tra xem có vi phạm quy chuẩn mã nguồn hoặc hổng bảo mật nà

9. Quản lý Chi phí API và Hiệu năng (Cost Optimization)

Sử dụng Claude Code hiệu quả giúp bạn tiết kiệm chi phí đáng kể:

• Sử dụng /compact định kỳ: Khi hội thoại kéo dài hơn 20 câu, hãy dùng /compact để làm gọn bộ nhớ context.
• Tránh đưa file binary/media vào context: Không yêu cầu Claude đọc các file ảnh, pdf hoặc database dump dung lượng lớn.
• Theo dõi chi phí: Thường xuyên gõ /cost cuối mỗi buổi làm việc để nắm rõ ngân sách API đã tiêu tốn.

10. Best Practices và Các Cạm bẫy Cần Tránh

Nên làm (Do's):

• Luôn sử dụng Git để quản lý phiên bản trước khi cho phép Claude Code chỉnh sửa hàng loạt file.
• Review kỹ các thay đổi (Diff view trong VS Code) trước khi xác nhận Yes.
• Viết file CLAUDE.md chi tiết để định hướng phong cách lập trình cho AI.

Nên tránh (Don'ts):

• Không giao API key hoặc dữ liệu nhạy cảm (mật khẩu, credential production) vào câu lệnh.
• Không mặc định tin tưởng 100% mã nguồn AI viết mà bỏ qua bước chạy test tự động.

Dưới đây là mẫu file CLAUDE.md hoàn chỉnh, chuẩn hóa cho một dự án Web Fullstack TypeScript (Next.js / Node.js / Nest.js / React, PostgreSQL, Prisma, Tailwind CSS).

File này đặt tại thư mục gốc (Root directory) của dự án để Claude Code tự động đọc và tuân thủ các quy định về kiến trúc, cách chạy lệnh,

# Project Guidelines for Claude Code

## 1. Overview & Architecture Stack

Dự án là ứng dụng Web Fullstack sử dụng ngôn ngữ TypeScript làm chủ đạo trên toàn bộ hệ thống:

- **Frontend**: Next.js (App Router), React, Tailwind CSS, Shadcn UI, Zustand (State Management).

- **Backend**: Node.js, Express / NestJS, RESTful APIs & WebSocket.

- **Database & ORM**: PostgreSQL, Prisma ORM.

- **Testing**: Jest (Unit / Integration Tests), Playwright (E2E Tests).

- **Package Manager**: pnpm (hoặc npm / yarn).

---

## 2. Common Terminal Commands

Khi thực hiện tác vụ, hãy ưu tiên sử dụng các lệnh chuẩn sau đây:

### Development & Build

- Khởi chạy môi trường Dev: `pnpm dev`

- Build dự án (Fullstack): `pnpm build`

- Khởi chạy ứng dụng sau Build: `pnpm start`

- Type checking toàn dự án: `pnpm typecheck` (hoặc `npx tsc --noEmit`)

### Database Operations (Prisma)

- Tạo migration mới: `npx prisma migrate dev --name <migration_name>`

- Generate Prisma Client: `npx prisma generate`

- Mở Prisma Studio (GUI): `npx prisma studio`

- Seed dữ liệu giả: `pnpm db:seed`

 

### Testing & Code Quality

- Chạy tất cả Unit test: `pnpm test`

- Chạy test cho 1 file cụ thể: `pnpm test <path/to/file.test.ts>`

- Chạy Coverage report: `pnpm test:cov`

- Kiểm tra Linter: `pnpm lint`

- Sửa lỗi Linter tự động: `pnpm lint:fix`

- Format code bằng Prettier: `pnpm format`

---

## 3. Code Style & Conventions

### TypeScript Rules

- **Strict Mode**: Luôn bật strict mode. Không sử dụng kiểu `any`. Sử dụng `unknown` nếu chưa xác định được type và ép kiểu an toàn.

- **Interfaces vs Types**:

  - Dùng `interface` cho Object Definitions, Data Models và Component Props.

  - Dùng `type` cho Union types, Intersection types hoặc Primitives alias.

- **Explicit Return Types**: Khai báo rõ kiểu trả về cho tất cả các function công khai (Public APIs, Service Methods, Async Functions).

### Naming Conventions

- **Files & Directories**:

  - Components / Pages: `kebab-case.tsx` (ví dụ: `user-profile-card.tsx`).

  - Services / Utilities / Hooks: `kebab-case.ts` (ví dụ: `use-auth.ts`, `auth-service.ts`).

- **Variables & Functions**: `camelCase` (ví dụ: `getUserById`, `isEmailVerified`).

- **Interfaces / Types / Classes**: `PascalCase` (ví dụ: `UserProfile`, `AuthService`).

- **Constants / Enum**: `UPPER_SNAKE_CASE` (ví dụ: `MAX_LOGIN_ATTEMPTS`, `USER_ROLE`).

### Code Organization & Imports

- Thứ tự Import ưu tiên (cách nhau bằng 1 khoảng trống line):

  1. React / Next.js core libraries.

  2. Third-party packages (zod, lucide-react, etc.).

  3. Internal Aliases (@/components, @/lib, @/services, @/types).

  4. Relative Imports (./, ../).

  5. Styles / Assets.

- Ưu tiên sử dụng Path Aliases (`@/components/...`, `@/server/...`) thay vì đường dẫn tương đối dài (`../../..`).

---

## 4. Frontend Conventions (React / Next.js)

- **Component Pattern**: Sử dụng Functional Components với Arrow Functions.

- **Server vs Client Components**:

  - Mặc định các components trong Next.js App Router là Server Components.

  - Chỉ thêm `'use client'` ở dòng đầu tiên khi component thực sự cần React Hooks (`useState`, `useEffect`) hoặc Event Listeners (`onClick`).

- **Form & Validation**: Dùng **React Hook Form** kết hợp với **Zod** schema validation.

--

## 5. Backend Conventions (API & Database)

- **Architecture**: Phân tầng rõ ràng: `Controller / Route` -> `Service (Business Logic)` -> `Repository / Prisma Client (Database)`.

- **API Response Format**: Chuẩn hóa định dạng trả về từ API:

  ```typescript

  interface ApiResponse<T> {

    success: boolean;

    data?: T;

    error?: {

      code: string;

      message: string;

      details?: unknown;

    };

  }

Error Handling: Không nuốt lỗi (silent error). Mọi lỗi phải được catch và xử lý bằng Custom Error Classes (ví dụ: AppError, UnauthorizedError) hoặc truyền tới Global Error Handler Middleware.

Safety & Workflow Rules for Claude Code

• Git Safety: Tuyệt đối không tự động commit trực tiếp vào nhánh main hoặc master.
• Environment Variables: Không ghi cứng các thông tin nhạy cảm (API Keys, DB Passwords, Secrets) vào file code. Luôn đọc từ process.env.* và ghi nhận biến mới vào file .env.example.
• Destructive Commands: Nhắc nhở và chờ xác nhận trước khi thực hiện các lệnh làm mất dữ liệu như prisma migrate reset hoặc xóa nhiều file cùng lúc.
• Testing Policy: Sau khi thêm tính năng mới hoặc sửa bug, luôn đề xuất hoặc tự động viết/chạy Unit Test liên quan để đảm bảo không làm gãy code cũ.

Chúc các bạn thành công.