[Series Claude Code - Bài 3] Quản Lý Files Và Refactor Code Thực Chiến Với AI Agent
Chào mừng các bạn đã quay trở lại với series Claude Code CLI trên Viblo! Ở bài học trước, chúng ta đã biết cách điều khiển AI bằng các Slash Commands và tư duy quản lý ngữ cảnh (Context) để tiết kiệm token.
Hôm nay, chúng ta sẽ bước vào phần cốt lõi mà mọi lập trình viên đều mong đợi: Giao việc cho Claude Code tự động chỉnh sửa, tối ưu hóa (Refactor) và tạo mới các file nguồn trực tiếp trong project. Hãy cùng xem một AI Agent thực thụ sẽ "múa code" trong Terminal của bạn như thế nào nhé!
1. Cách Claude Code Chỉnh Sửa File (Cơ Chế Đọc - Ghi)
Khi bạn yêu cầu các Chatbot thông thường (như ChatGPT web) sửa code, chúng sẽ viết ra toàn bộ đoạn code mới và bạn phải tự copy-paste đè lên file cũ.
Với Claude Code CLI, quy trình này diễn ra tự động và an toàn thông qua cơ chế:
- Đọc và Phân tích: Claude quét file bạn chỉ định để hiểu logic hiện tại.
- Đề xuất Patch (Mảnh vá): Thay vì ghi đè toàn bộ file, Claude chỉ tính toán những dòng cần thay đổi (tương tự như cách hoạt động của
git diff). - Hỏi ý kiến User: Claude hiển thị rõ ràng những dòng nào sẽ bị xóa (màu đỏ) và dòng nào được thêm mới (màu xanh) ngay trên Terminal để bạn duyệt.
2. Thực Chiến 1: Tạo File Mới Và Viết Code Từ Con Số 0
Giả sử bạn đang phát triển một tính năng và cần tạo một file Helper xử lý về thời gian hoặc định dạng tiền tệ. Bạn không cần thoát Claude ra ngoài để gõ lệnh touch hay mở VS Code. Hãy ra lệnh trực tiếp:
Hãy tạo một file helper mới tại đường dẫn src/utils/currency.js (hoặc app/Helpers/CurrencyHelper.php tùy project của bạn).
File này chứa hàm formatVND(amount) nhận vào một số và trả về chuỗi định dạng tiền tệ Việt Nam (VD: 150,000 đ).
Kết quả trên Terminal:
- Claude sẽ tự động tạo file.
- Viết logic chuẩn chỉnh, xử lý cả các trường hợp edge-case (như input không phải là số, số âm,...).
- Hiển thị thông báo:
Created file: src/utils/currency.js.
3. Thực Chiến 2: Refactor Code – Biến "Code Rác" Thành Clean Code
Đây là nơi Claude Code thực sự tỏa sáng nhờ sức mạnh của mô hình claude-3-7-sonnet. Hãy thử đưa cho Claude một đoạn code cũ, rối rắm, lồng nhiều vòng lặp if-else (Spaghetti code) và yêu cầu nó tối ưu.
Cách làm hiệu quả:
- Bước 1: Nạp file cần sửa vào ngữ cảnh:
/add src/services/OrderService.js - Bước 2: Đưa ra prompt yêu cầu tinh chỉnh một hàm cụ thể:
Hàm calculateShippingFee trong file này đang bị lồng if-else quá sâu và khó bảo trì.
Hãy áp dụng kỹ thuật Guard Clauses để làm sạch code, tối ưu hóa hiệu năng và đảm bảo logic không thay đổi.
Giao diện hiển thị (Git Diff thu nhỏ): Claude sẽ không lẳng lặng sửa luôn mà hiển thị một bảng so sánh trực quan:
- if (user !== null) {
- if (user.isVIP) {
- return 0;
- }
- }
+ if (!user) return defaultFee;
+ if (user.isVIP) return 0;
Nếu bạn thấy các thay đổi này hoàn toàn hợp lý, bạn chỉ cần bấm Y (Approve) để Claude áp dụng trực tiếp vào file vật lý trên máy.
4. Kiểm Tra Thay Đổi Với Git Tích Hợp
Một điểm cực kỳ tâm lý của Anthropic khi thiết kế Claude Code là họ biết lập trình viên rất sợ AI sửa lung tung làm hỏng source code. Vì vậy, Claude Code được tích hợp chặt chẽ với hệ thống Git của dự án.
Ngay trong cửa sổ chat của Claude, bạn có thể kiểm tra xem AI đã chỉnh sửa những gì bằng cách gõ:
Hãy cho tôi xem git diff của các file vừa sửa.
Claude sẽ hiển thị toàn bộ các thay đổi dưới dạng terminal diff chuẩn chỉnh. Nếu bạn cảm thấy chưa ưng ý với cách viết của AI, bạn hoàn toàn có thể ra lệnh:
Hãy undo (hoặc revert) lại đoạn code vừa rồi, viết lại theo cách sử dụng async/await thay vì Promise.then().
Claude sẽ ngay lập tức khôi phục trạng thái cũ của file và tiến hành "phẫu thuật" lại theo đúng ý bạn.
5. Mẹo "Xương Máu" Khi Giao Việc Cho Claude Sửa Code
Để việc Refactor và sửa file diễn ra mượt mà, anh em nên nằm lòng 3 nguyên tắc sau trên Viblo:
- Commit code trước khi gọi Claude: Luôn đảm bảo working directory của bạn sạch sẽ (
git status) trước khi cho Claude can thiệp. Nếu AI có làm sai, bạn chỉ cầngit checkout .là xong, không sợ mất code cũ. - Cung cấp Coding Convention của dự án: Nếu dự án của bạn có quy định riêng về đặt tên hàm, viết comment hay cấu trúc file, hãy nói cho Claude biết ngay từ đầu phiên chat (Ví dụ: "Dự án này viết theo chuẩn PSR-12" hoặc "Dự án này sử dụng ES6 và CamelCase").
- Chia nhỏ tác vụ: Đừng bắt Claude "Hãy refactor toàn bộ thư mục Controllers cho tôi". Hãy đi từng file, từng hàm một để kiểm soát chất lượng code tốt nhất.
Tạm kết Bài 3
Việc có một AI Agent tự động đọc hiểu, viết và sửa code trực tiếp thông qua Terminal một cách an toàn như Claude Code thực sự là một bước tiến lớn, giúp tăng x2, x3 hiệu suất làm việc của lập trình viên chúng ta.
Nhưng viết code xong thì phải làm gì? Phải chạy Test xem code có chạy đúng không và fix bug nếu có lỗi! Ở Bài học 4 tiếp theo, mình sẽ hướng dẫn các bạn cách Tự động hóa Testing, Debugging lỗi hệ thống và Quản lý quy trình Commit/Git tự động bằng Claude Code.
Các bạn đã thử cho Claude sửa đoạn code nào trong project của mình chưa? Hãy comment lỗi hoặc trải nghiệm thú vị của bạn bên dưới nhé. Đừng quên Upvote để đón xem bài tiếp theo vào ngày mai!
Cảm ơn các bạn đã ủng hộ bài viết của mình trên Viblo!
All rights reserved
