Claude Code trong Terminal: Hướng dẫn dành cho người mới bắt đầu để phát triển nhanh hơn gấp 10 lần

Sau đây là hướng dẫn dành cho người mới bắt đầu về cách tối ưu hóa quy trình phát triển phần mềm với Claude Code.

Tại sao nên sử dụng Claude trong Terminal?

Tóm lại: Terminal Claude Code nhanh hơn gấp 10 lần cho công việc phát triển thực tế.

Bắt đầu

Cài đặt:

# Install Claude Code globally
npm install -g @anthropic-ai/claude-code

# Navigate to your project
cd your-project

# Start Claude Code
claude

Lệnh đầu tiên: /init

> /init

Thao tác này sẽ tạo ra một file CLAUDE.md trong thư mục gốc của dự án. File này vô cùng quan trọng!

Các lệnh thiết yếu bạn cần biết

1. /help - Điểm khởi đầu của bạn

> /help

Hiển thị tất cả các lệnh có sẵn. Hãy bắt đầu từ đây!

2. /add - Thêm file vào ngữ cảnh

Claude chỉ có thể thấy các file bạn thêm một cách rõ ràng:

# Add a single file
> /add src/components/Header.tsx

# Add multiple files
> /add src/App.tsx src/index.tsx

# Add entire directory
> /add src/components

# Add with pattern
> /add src/**/*.tsx

Tại sao điều này quan trọng?

Khi bạn khởi động Claude Code, theo mặc định nó không thể thấy bất kỳ file nào trong dự án của bạn. Điều này giống như việc bạn yêu cầu ai đó sửa code của mình mà không cho họ xem code!

Ví dụ - Cách sai:

> Tại sao thành phần Header của tôi không hiển thị đúng cách?

# ❌ Claude không biết nội dung bên trong thành phần Header của bạn
# Nó sẽ đưa ra lời khuyên chung chung, có thể không áp dụng cho code của bạn

Ví dụ - Cách đúng:

> /add src/components/Header.tsx
> /add src/App.tsx
> Tại sao thành phần Header của tôi không hiển thị đúng cách?

# ✅ Claude giờ đây CÓ THỂ THẤY code thực tế của bạn
# Nó sẽ đưa ra lời khuyên cụ thể dựa trên các file CỦA BẠN

Hãy nghĩ theo cách này

Nguyên tắc chung: Trước khi hỏi bất kỳ câu hỏi nào về code của bạn, hãy luôn thêm các file liên quan trước. Sử dụng /ls để kiểm tra lại xem Claude có thể thấy những gì.

3. /ls - Kiểm tra những gì Claude thấy

> /ls

Lệnh này liệt kê tất cả các file hiện đang nằm trong ngữ cảnh (bộ nhớ) của Claude.

Ví dụ đầu ra:

> /ls

File trong ngữ cảnh:
  src/App.tsx
  src/components/Header.tsx
  src/utils/api.ts

Tổng cộng: 3 file

Tại sao sử dụng /ls?

Sau khi thêm nhiều file, bạn có thể quên mất Claude có thể thấy những gì. Trước khi hỏi, hãy chạy /ls để xác minh:

> /add src/components/Header.tsx
> /add src/components/Footer.tsx
> /add src/utils/helpers.ts

# Khoan, tôi đã thêm gì nữa nhỉ?
> /ls

# Giờ bạn có thể xác nhận Claude có đúng các file trước khi đặt câu hỏi

Kiểm tra nhanh: Nếu Claude đưa ra câu trả lời kỳ lạ, hãy chạy /ls - có thể bạn đã quên thêm file liên quan!

4. /clear - Khởi động lại

> /clear

Lệnh này xóa tất cả các file khỏi ngữ cảnh của Claude và bắt đầu lại từ đầu.

Khi nào nên sử dụng /clear

Ví dụ về quy trình làm việc:

# Làm việc với thành phần Header
> /add src/components/Header.tsx
> /code Fix the navigation menu
> /code Add mobile responsive styles

# Xong Header! Bây giờ làm việc với Footer
> /clear

# Bắt đầu lại cho nhiệm vụ mới
> /add src/components/Footer.tsx
> /code Add social media links

Điều gì xảy ra nếu bạn không xóa?

# Đã thêm các file Header trước đó...
> /add src/components/Header.tsx

# Bây giờ hỏi về Footer mà không xóa
> /code Fix the Footer styling

# ❌ Claude có thể vô tình tham chiếu đến Header.tsx
# hoặc nhầm lẫn về thành phần bạn đang muốn nói đến

Thói quen tốt: Khi bạn chuyển đổi nhiệm vụ, hãy chạy /clear trước. Chỉ mất 1 giây và tránh nhầm lẫn!

5. /code - Viết và chỉnh sửa code

Đây là lệnh mạnh mẽ nhất - nó cho Claude biết thực sự viết hoặc sửa đổi code.

# Tạo thành phần mới
> /code Create a Button component with TypeScript and Tailwind

# Chỉnh sửa file hiện có (thêm nó trước!)
> /add src/App.tsx
> /code Add a dark mode toggle to the header

# Tái cấu trúc
> /add src/components/OldComponent.tsx
> /code Refactor this to use React hooks instead of class component

Cách hoạt động

Tạo file mới: Chỉ cần mô tả những gì bạn muốn - Claude sẽ tự động tạo file

> /code Create a useAuth hook for handling authentication

# Claude tạo: src/hooks/useAuth.ts (hoặc tương tự)
# với đầy đủ mã nguồn!

Chỉnh sửa các file hiện có: Thêm file trước, sau đó mô tả các thay đổi

> /add src/components/LoginForm.tsx
> /code Add email validation that checks for @ symbol

# Claude sửa đổi file LoginForm.tsx hiện tại của bạn
# Bạn sẽ thấy các thay đổi trong trình chỉnh sửa ngay lập tức

Tái cấu trúc: Thêm file, mô tả những gì bạn muốn cải thiện

> /add src/utils/api.ts
> /code Refactor to use async/await instead of .then() chains

# Claude viết lại code theo các thực tiễn tốt nhất

Cụ thể hơn = Kết quả tốt hơn

Ví dụ - Mô tả không rõ ràng so với mô tả cụ thể:

# ❌ Không rõ ràng
> /code Add a form

# ✅ Cụ thể
> /code Create a contact form with:
> - Name field (required)
> - Email field (required, validated)
> - Message textarea (required, min 10 characters)
> - Submit button with loading state
> - Error messages shown below each field
> - Success toast notification on submit

Càng chi tiết, kết quả càng tốt. Hãy coi như bạn đang giải thích cho một lập trình viên cấp dưới chính xác những gì mình muốn xây dựng.

6. /architect - Lập kế hoạch trước khi xây dựng

> /architect How should I structure user authentication?

Lệnh này yêu cầu Claude suy nghĩ và lập kế hoạch trước khi viết bất kỳ code nào. Nó giống như việc tham khảo ý kiến ​​của một lập trình viên cấp cao về cách tiếp cận tốt nhất.

Những gì Claude cung cấp

Khi bạn sử dụng lệnh /architect, Claude sẽ cung cấp cho bạn:

• Cấu trúc file - Cần tạo những file nào và ở đâu
• Mẫu thiết kế - Các phương pháp tốt nhất cho trường hợp sử dụng của bạn
• Các bước triển khai - Danh sách theo thứ tự những việc cần xây dựng trước
• Sự đánh đổi - Ưu điểm và nhược điểm của các phương pháp khác nhau

Ví dụ:

> /architect How should I build a shopping cart feature?

# Claude trả lời đại loại như sau:
# 📁 Cấu trúc đề xuất:
# src/
#   components/
#     cart/
#       Cart.tsx
#       CartItem.tsx
#       CartSummary.tsx
#   hooks/
#     useCart.ts
#   context/
#     CartContext.tsx
#   types/
#     cart.ts
#
# 🔨 Thứ tự thực hiện:
# 1. Tạo các kiểu giỏ hàng (cart.ts)
# 2. Xây dựng CartContext để quản lý trạng thái
# 3. Tạo hook useCart để dễ dàng truy cập
# 4. Xây dựng các thành phần giao diện người dùng
#
# ⚖️ Khuyến nghị:
# Sử dụng React Context cho trạng thái giỏ hàng vì nó cần được
# truy cập trên nhiều thành phần...

Khi nào nên sử dụng /architect:

Kiến trúc → Sau đó xây dựng

# Bước 1: Lập kế hoạch
> /architect How should I implement dark mode?

# Bước 2: Xem xét kế hoạch của Claude, đặt câu hỏi bổ sung
> What about system preference detection?

# Bước 3: Khi đã hài lòng với kế hoạch, hãy xây dựng nó
> /code Implement dark mode following the plan above

Tiết kiệm hàng giờ chỉnh sửa lại: 10 phút lập kế hoạch với /architect có thể giúp bạn tránh phải xây dựng lại một tính năng được cấu trúc kém ngay từ đầu.

7. /review - Xem xét code

> /add src/components/PaymentForm.tsx
> /review

Lệnh này yêu cầu Claude xem xét code của bạn giống như một nhà phát triển cấp cao sẽ làm trong một yêu cầu kéo.

Những gì Claude kiểm tra:

Đầu ra ví dụ:

> /add src/components/PaymentForm.tsx
> /review

# Claude phản hồi:

# 🔴 Vấn đề nghiêm trọng:
# - Dòng 23: Số thẻ tín dụng được ghi vào console (rủi ro bảo mật!)
# - Dòng 45: Không có xử lý lỗi cho lệnh gọi API
#
# 🟡 Cảnh báo:
# - Dòng 12: useEffect thiếu mảng phụ thuộc (có thể gây ra vòng lặp vô hạn)
# - Dòng 34: Cân nhắc sử dụng useMemo cho các phép tính tốn kém
#
# 🟢 Đề xuất:
# - Dòng 8: Tên biến 'x' không rõ ràng, hãy cân nhắc sử dụng 'cardNumber'
# - Cân nhắc chia nhỏ thành các thành phần nhỏ hơn
## Tổng quan: 3 vấn đề nghiêm trọng cần được khắc phục trước khi commit

Quy trình xem xét

# Trước khi lưu code:

# 1. Thêm các file bạn đã thay đổi
> /add src/components/PaymentForm.tsx
> /add src/hooks/usePayment.ts

# 2. Chạy kiểm tra
> /review

# 3. Sửa các lỗi mà Claude đã tìm thấy
> /code Fix the security issue on line 23

# 4. Xem lại để xác nhận
> /review

# 5. Bây giờ bạn có thể lưu code an toàn!
> /git commit

Phát hiện lỗi trước khi người dùng gặp phải: Luôn chạy lệnh `/review` trước khi đẩy code lên. Điều này giống như việc có một lập trình viên cấp cao miễn phí kiểm tra công việc của bạn!

8. `/test` - Tạo các bài kiểm tra

> /add src/utils/validators.ts
> /test Write unit tests for validators

Lệnh này yêu cầu Claude tự động tạo các file kiểm thử cho code của bạn.

Những gì Claude tạo ra:

> /add src/utils/validators.ts
> /test Write unit tests for validators

# Claude tạo: src/utils/validators.test.ts
# với các bài kiểm tra như:

# ✅ xác thực định dạng email chính xác
# ✅ từ chối email không có ký hiệu @
# ✅ từ chối email trống
# ✅ xác thực số điện thoại có mã quốc gia
# ✅ từ chối số điện thoại quá ngắn
# ... và nhiều hơn nữa

Các loại thử nghiệm khác nhau:

# Kiểm thử đơn vị (kiểm thử một hàm)
> /add src/utils/formatDate.ts
> /test Write unit tests for formatDate

# Kiểm thử thành phần (kiểm thử thành phần React)
> /add src/components/Button.tsx
> /test Write tests for Button component

# Kiểm thử tích hợp (kiểm thử nhiều thứ cùng nhau)
> /add src/components/LoginForm.tsx
> /add src/hooks/useAuth.ts
> /test Write integration tests for the login flow

# Các trường hợp cụ thể
> /add src/utils/cart.ts
> /test Write tests for edge cases: empty cart, max quantity, negative prices

Hãy nêu rõ những gì cần kiểm tra.

# ❌ Không rõ ràng
> /test Viết các bài kiểm tra

# ✅ Cụ thể
> /test Viết các bài kiểm tra bao gồm:
> - Đầu vào hợp lệ
> - Đầu vào không hợp lệ (trống, sai định dạng)
> - Các trường hợp đặc biệt (chuỗi rất dài, ký tự đặc biệt)
> - Xử lý lỗi

Không có lý do gì để không kiểm thử: Viết bài kiểm thử rất tốn thời gian, nhưng giờ đây Claude sẽ làm điều đó thay bạn. Hãy sử dụng lệnh `/test` cho mọi hàm hoặc thành phần mới!

9. `/debug` - Sửa lỗi

> /add src/components/LoginForm.tsx
> /debug Form submission isn't working, getting undefined error

Lệnh này yêu cầu Claude phân tích code của bạn và tìm lỗi - giống như một thám tử điều tra hiện trường vụ án.

Cách sử dụng /debug hiệu quả

Bước 1: Thêm các file liên quan

# Thêm file có lỗi
> /add src/components/LoginForm.tsx

# Thêm các file liên quan nếu cần
> /add src/hooks/useAuth.ts
> /add src/utils/api.ts

Bước 2: Mô tả vấn đề một cách rõ ràng

# ❌ Không rõ ràng
> /debug Nó bị lỗi

# ✅ Cụ thể
> /debug Việc gửi biểu mẫu thất bại với lỗi "undefined".
> - Xảy ra khi tôi nhấp vào Gửi
> - Bảng điều khiển hiển thị: "Không thể đọc thuộc tính 'email' của undefined"
> - Bắt đầu xảy ra sau khi tôi thêm xác thực

Bước 3: Bao gồm thông báo lỗi

> /debug Getting this error when users try to login:

TypeError: Cannot read property 'user' of undefined
    at LoginForm.tsx:45
    at handleSubmit (LoginForm.tsx:23)

Những việc Claude làm:

1️⃣ Đọc các file code của bạn
2️⃣ Phân tích thông báo lỗi
3️⃣ Truy tìm nguồn gốc vấn đề
4️⃣ Giải thích TẠI SAO nó bị lỗi
5️⃣ Chỉ cho bạn chính xác cách khắc phục

Ví dụ:

> /debug Getting "undefined" when submitting the form

# Claude trả lời:

# 🔍 Đã tìm ra vấn đề!
#
# Vấn đề: Ở dòng 23, bạn đang truy cập `formData.email`
# nhưng `formData` không được định nghĩa vì giá trị khởi tạo của useState
# bị thiếu.
#
# Dòng 23 (hiện tại):
# const email = formData.email
## Vấn đề: useState() ở dòng 8 không có giá trị khởi tạo
# const [formData, setFormData] = useState()
#
# Khắc phục: Thêm trạng thái khởi tạo
# const [formData, setFormData] = useState({ email: '', password: '' })
#
# Bạn muốn tôi áp dụng bản sửa lỗi này không?

Tiết kiệm hàng giờ gỡ lỗi: Thay vì sử dụng `console.log` khắp nơi, chỉ cần cho Claude biết triệu chứng và dán lỗi. Giống như bạn có một siêu năng lực gỡ lỗi vậy!

10. `/git` - Các thao tác Git thông minh

# Kiểm tra trạng thái
> /git status

# Cam kết với thông báo do AI tạo
> /git commit

# Xem thay đổi
> /git diff

Lệnh này cho phép Claude xử lý các thao tác Git thay bạn - bao gồm cả việc viết thông báo commit!

Các lệnh Git khả dụng

Điều kỳ diệu: Thông điệp cam kết do AI tạo ra

Đây là phần tuyệt vời nhất - Claude đọc những thay đổi của bạn và tự động viết thông điệp cam kết cho bạn:

> /git commit

# Claude phân tích các thay đổi của bạn và đề xuất:

# "Tính năng: Thêm xác thực email vào biểu mẫu đăng nhập
# 
# - Thêm xác thực biểu thức chính quy cho định dạng email
# - Hiển thị thông báo lỗi bên dưới trường nhập liệu
# - Vô hiệu hóa nút gửi đối với email không hợp lệ
# - Thêm kiểm thử đơn vị cho chức năng xác thực"
# 
# Bạn có muốn commit với thông báo này không? (y/n)

Vì sao điều này thật tuyệt vời?

# ❌ Thông báo commit của bạn
git commit -m "fix stuff"
git commit -m "update"
git commit -m "wip"
git commit -m "asdfasdf"

# ✅ Thông báo commit của Claude
git commit -m "fix: Resolve null pointer exception in user authentication"
git commit -m "feat: Add dark mode toggle with system preference detection"
git commit -m "refactor: Extract validation logic into custom useValidation hook"

Quy trình làm việc Git đầy đủ

# 1. Kiểm tra những gì bạn đã thay đổi
> /git status

# 2. Xem các thay đổi thực tế
> /git diff

# 3. Xem lại code của bạn trước khi commit
> /add src/components/Header.tsx
> /review

# 4. Sửa bất kỳ lỗi nào
> /code Fix the issue found in review

# 5. Commit với thông báo thông minh
> /git commit

# Xong! Thông báo commit chuyên nghiệp mà không cần suy nghĩ nhiều

Đừng bao giờ viết "sửa lỗi" nữa: Hãy để Claude viết các thông báo commit cho bạn. Lịch sử Git của bạn sẽ trông chuyên nghiệp hơn, và bạn của tương lai sẽ cảm ơn bạn hiện tại khi gỡ lỗi!