Đã đăng vào Thứ Năm, 2:23 SA 6 phút đọc

171

[Husky Pre-Commit] Khám phá cơ bản (1/4) 🚀

Phần 1: [Husky Pre-Commit] Khám phá cơ bản (1/4) 🚀

Phần 2: [Husky Pre-Commit] Husky trong thực chiến: Những điều cần biết (2/4) 🚀

Xem nhiều hơn tại: https://devvui.one

Cuộc trò chuyện sinh ra ý tưởng 😆

Hi anh em dev 👋, sáng nay tớ đi làm cũng như mọi ngày, vừa vào công ty mở VSCode xem code hôm qua mình viết được những gì, và bắt gặp một đống import thừa mình chưa xóa...

Tự nhủ "không biết có extension nào hỗ trợ xóa tự động mấy import thừa này không nhỉ?" 🤔

Đúng lúc đó, tên đồng nghiệp vừa bước vào, hắn thấy tớ đang nghịch lung tung liền hỏi đang làm gì. Tớ thiệt tình trả lời là đang tìm extension nào xóa import thừa, hắn cười một phát rồi bảo:

"Option + Shift + O là được mà, cần gì extension phức tạp"

Hơi quê, ok thì dùng thử, cái này trước cũng nghe qua rồi mà lười dùng @@, nhưng mà... phải bấm thì vẫn phiền. Có cách nào tự động hơn không? 🧐

Thinking Developer

Sau một hồi mày mò hỏi AI, tớ tìm ra giải pháp sử dụng Husky Pre-Commit. Trước cũng nghe qua thằng này mà chưa có cơ hội khám phá.

Đôi lúc cuộc sống không dễ dàng, chiều hôm đó team tớ lại có một vấn đề nhỏ: một bạn tạo sai format env, và cũng trong ngày hôm đó tớ hotfix 1 tính năng mà lười quá hard code 1 thông số bị Leader nhắc nhở 🥲

Thôi xong, ý tưởng dùng Husky này có thể giúp ích được rồi, chẳng những fix được vấn đề import mà còn check format env và có thể check luôn logic code ^^ (tớ chém gió đấy, tớ nghĩ được còn không biết được ko, để bài sau tớ làm phần này nhé :v)

Let's goooo, chúng ta bắt đầu thôi nào! 🚀

Husky là gì vậy? 🐶

Tưởng tượng bạn có một chú chó Husky trung thành đứng canh cửa Git của bạn. Mỗi khi bạn định commit hay push code, chú chó này sẽ chặn lại nếu code của bạn chưa đạt chất lượng

Vui vậy thôi, Husky là một công cụ giúp bạn dễ dàng tích hợp và quản lý Git hooks. Git hooks là các script tự động chạy vào những thời điểm cụ thể trong quy trình Git của bạn, như:

Trước khi commit (pre-commit)
Trước khi push (pre-push)
Sau khi merge (post-merge)
...và nhiều hook khác(mình sẽ viết các bài sau nhé)

Ưu điểm lớn nhất của Husky là nó giúp cả team tuân thủ các quy tắc code, kiểm tra lỗi trước khi code được commit, thay vì đợi đến lúc CI/CD báo lỗi hoặc tệ hơn là lỗi trên production 😱

Thử nghiệm ban đầu 🛠️

Ban đầu tớ chạy thử, sử dụng eslint -fix trong pre-commit của husky nhưng chỉ chạy folder module tớ đang code, nhưng vậy muốn các thành viên khác sử dụng thì sao, ban đầu cũng dự định thành viên nào muốn sử dụng thì thêm folder module của các bạn vào pre-commit, nhưng vậy mất công quá

Thế là sau một hồi tìm hiểu tớ thấy có giải pháp dùng lint-staged

lint-staged là gì?

lint-staged là công cụ giúp chạy linter chỉ trên những file đã được staged (những file bạn đã git add), thay vì phải chạy trên toàn bộ project. Điều này giúp quá trình kiểm tra code nhanh hơn rất nhiều!

Kết hợp Husky và lint-staged, chúng ta sẽ có một quy trình tự động hóa hoàn hảo:

Developer thêm code và chạy git add
Khi chạy git commit, Husky sẽ kích hoạt hook pre-commit
Hook này sẽ chạy lint-staged
lint-staged sẽ chạy các linter, formatter... chỉ trên những file đã staged
Nếu có lỗi, commit sẽ bị chặn lại

Cài đặt và cấu hình 🔧

Bước 1: Cài đặt Husky và lint-staged

Giả sử bạn đã có một project TypeScript với ESLint và Prettier:

# Cài đặt Husky và lint-staged
npm install -D husky lint-staged

# Thiết lập Husky
npx husky install

Để Husky tự động cài đặt khi người khác clone project về, thêm script sau vào package.json:

{
  "scripts": {
    "prepare": "husky install"
  }
}

Bước 2: Tạo hook pre-commit

npx husky add .husky/pre-commit "npx lint-staged"

Lệnh này sẽ tạo một file .husky/pre-commit với nội dung:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

Bước 3: Cấu hình lint-staged

Tạo file cấu hình lint-staged.config.js ở thư mục gốc:

module.exports = {
  "*.{ts,tsx}": [
    "eslint --fix",
    "prettier --write",
  ],
};

Nếu bạn muốn cấu hình ngắn gọn hơn, có thể đặt trong package.json:

{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

Lợi ích mang lại 📊

Sau khi cài đặt Husky và lint-staged, team tớ đã thấy những cải thiện rõ rệt:

Code sạch hơn: Không còn những đoạn code thừa, import không dùng đến
Tiết kiệm thời gian review: Các vấn đề cơ bản đã được giải quyết tự động
Giảm thiểu lỗi: Nhiều lỗi được phát hiện sớm, trước khi code được commit
Chuẩn hóa code style: Toàn bộ team có cùng một tiêu chuẩn code

Điều đặc biệt nhất là khả năng tùy biến vô hạn. Bạn có thể thêm bất kỳ script nào vào quy trình pre-commit để đảm bảo chất lượng code!

Và câu chuyện chưa kết thúc...

Khoan đã, tớ vẫn chưa giải quyết vấn đề "format env" mà team tớ gặp phải. Làm thế nào để Husky có thể kiểm tra và đảm bảo file .env được định dạng đúng?

Đây là những chủ đề tớ sẽ khám phá trong phần tiếp theo của series. Hãy đón đọc nha! 😊

Bạn suy nghĩ sao về ý tưởng này? Hãy cùng thảo luận bên dưới nhé ^^