Cơn ác mộng mang tên “Fix bug” và code mỗi người một kiểu
Mở một Pull Request (PR) và thấy thụt lề lung tung, chỗ dùng dấu nháy đơn (‘), chỗ dùng nháy kép (“) là trải nghiệm chẳng mấy vui vẻ. Kinh khủng hơn là khi check Git history, bạn bắt gặp một loạt commit message vô nghĩa như “fix”, “update”, hay thậm chí là “abcxyz”.
Hồi mình mới dẫn dắt team 8 người, mình tốn ít nhất 30 phút mỗi ngày chỉ để đi nhắc nhở: “Em ơi chạy Prettier đi”, “Cái này chưa chạy Lint kìa”. Việc review logic trở thành cực hình vì những lỗi vặt vãnh này che lấp hết các thay đổi quan trọng.
Đừng kỳ vọng quá nhiều vào ý thức tự giác vì nó thường tỷ lệ nghịch với deadline. Cách tốt nhất là tự động hóa. Nếu code chưa chuẩn hoặc commit sai format, Git sẽ từ chối lệnh commit ngay lập tức. Đây là lúc Husky và lint-staged tỏa sáng.
Quick Start: Cài đặt trong 5 phút
Dưới đây là các bước áp dụng cho dự án Node.js (React, Vue, NestJS…). Chỉ với vài lệnh, bạn sẽ có ngay một “người gác cổng” tận tâm.
Bước 1: Khởi tạo Husky
Husky giúp chúng ta thao tác với Git hooks mà không cần động vào các file ẩn phức tạp.
npx husky init && npm installLệnh này sẽ tạo folder .husky và thêm script prepare vào package.json của bạn.
Bước 2: Cài đặt lint-staged
Thay vì quét toàn bộ dự án (rất chậm), lint-staged chỉ kiểm tra những file bạn vừa thay đổi.
npm install --save-dev lint-stagedBước 3: Cấu hình quy tắc kiểm tra
Thêm đoạn cấu hình sau vào package.json để định nghĩa các lệnh tự động:
{
"scripts": {
"lint": "eslint . --ext .ts,.tsx",
"format": "prettier --write"
},
"lint-staged": {
"*.{ts,tsx,js,jsx}": [
"eslint --fix",
"prettier --write"
]
}
}Bước 4: Kích hoạt Hook
Mở file .husky/pre-commit và thay nội dung bằng:
npx lint-stagedTừ bây giờ, mỗi khi gõ git commit, Husky sẽ gọi lint-staged. Nó tự động sửa lỗi format và check lint. Nếu phát hiện lỗi không thể tự sửa, nó sẽ chặn đứng quá trình commit.
Tại sao phải dùng cả Husky lẫn lint-staged?
Nhiều bạn thắc mắc: “Dùng Husky thôi không được à?”. Câu trả lời nằm ở hiệu năng. Với dự án lớn có 1.000 files, chạy lint toàn bộ mất khoảng 2 phút. Dùng lint-staged, con số này giảm xuống còn 2 giây vì nó chỉ quét 2-3 file bạn vừa git add. Cảm giác commit mượt mà hơn hẳn.
Nâng cao: Chuẩn hóa Commit Message
Để Git history trông chuyên nghiệp như các thư viện mã nguồn mở (ví dụ: feat: add login), hãy cài thêm commitlint.
Cài đặt nhanh
npm install --save-dev @commitlint/config-conventional @commitlint/cliTạo file cấu hình
Tạo file commitlint.config.js tại thư mục gốc:
module.exports = { extends: ['@commitlint/config-conventional'] };Thêm hook kiểm tra message
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msgNếu bạn commit với nội dung “đã xong”, Git sẽ báo lỗi: subject may not be empty. Bạn buộc phải viết đúng chuẩn type: description.
Kinh nghiệm thực tế khi triển khai
Sau nhiều dự án áp dụng bộ công cụ này, mình rút ra 3 lưu ý quan trọng:
- Nới lỏng rules lúc đầu: Đừng bật quá nhiều rule ESLint khắt khe ngay lập tức. Hãy bắt đầu với Prettier để đồng nhất format, sau đó mới siết chặt logic code theo thời gian.
- Quyền “vượt rào”: Trong trường hợp khẩn cấp cần fix bug hotfix trên production, bạn có thể dùng flag
--no-verifyđể bỏ qua kiểm tra. Tuy nhiên, đừng lạm dụng nó. - Đồng bộ team: Nhắc nhở mọi người chạy
npm installsau khi bạn cập nhật Husky. Nếu không, các hook sẽ không hoạt động trên máy của họ.
Kể từ khi áp dụng quy trình này, số lượng merge conflict do sai khác format trong team mình giảm hẳn 80%. Reviewer cũng nhàn hơn vì chỉ cần tập trung vào tư duy lập trình thay vì soi từng dấu phẩy.
Mẹo nhỏ cho bạn
Bạn muốn đảm bảo code đẩy lên server luôn chạy đúng? Hãy tạo thêm hook pre-push để chạy Unit Test:
echo "npm test" > .husky/pre-pushViệc này giúp giảm tải cho hệ thống CI/CD và đảm bảo bạn không bao giờ “phá hỏng” môi trường chung.
Cấu hình Husky và lint-staged chỉ tốn 5 phút nhưng lợi ích mang lại là cực lớn. Hãy thử áp dụng ngay vào dự án cá nhân hoặc đề xuất với team trong buổi họp tới nhé!
