Chuẩn bị cho phát triển Full-Stack (phần 10)

Thiết lập Husky để đảm bảo chúng ta cam kết code đúng đắn

Sau khi thiết lập Prettier và ESLint, chúng ta bây giờ có code của chúng ta định dạng tự động khi lưu bởi
Prettier và xem các lỗi từ ESLint trong VS code khi bạn gây lỗi hay bỏ qua các thực hành tốt nhất. Tuy nhiên,
chúng ta có thể bỏ qua một vài trong số lỗi này và tình cờ cam kết code cái không có hiệu lực. Để tránh
cái này, chúng ta có thể thiết lập Husky và lint-staged, cái chạy trước khi chúng ta cam kết code của chúng
ta tới Git và đảm bảo rằng Prettier và ESLint được thực thi thành công trên mã nguồn trước khi nó
được cam kết.
Quan trọng Nếu bạn clone repository đầy đủ cho các học phần, Husky có thể không tìm thấy thư mục
.git khi chạy từ npm install. Trong trường hợp đó, chính chạy git init trong root của thư mục học phần
tương ứng.
Hãy cùng thiết lập husky và lint-staged bằng cách theo các bước này:
1. Chạy lệnh sau để cài đặt Husky và lint-staged như dev dependencies:

$ npm install –save-dev husky@8.0.3 \
lint-staged@15.1.0

2. Mở package.json file và thêm cấu hình lint-staged vào nó trong object mới sau devDependencies, sau đó lưu
file. Cái này sẽ chạy Prettier và ESlint trên tất cả các files .js và .jsx được cam kết và thử tự động sửa
các lỗi code style và linter, nếu có thể:
code 4
3. Khởi tạo một Git repository trong thư mục ch1 và thực hiện một cam kết ban đầu với chính package.json file,
khi lint-staged không được thực thi trên cam kết ban đầu:

$ git init
$ git add package.json
$ git commit -m “chore: initial commit”

4. Thêm husky install script vào một prepare script trong package.json, để rằng Husky được cài đặt tự động khi
dự án được clone và npm install được thực thi:

$ npm pkg set scripts.prepare=”husky install”

5. Vì chúng ta không cần chạy npm install lại một lần nữa ngay bây giờ, chúng ta cần thủ công chạy prepare script
lần này:

$ npm run prepare

6. Thêm một pre-commit hook cho lint-staged, để rằng ESLint và Prettier chạy mọi lần chúng ta thực hiện git commit:

$ npx husky add .husky/pre-commit “npx lint-staged”

7. Bây giờ, thêm tất cả các files vào Git và thử thực hiện một cam kết:

$ git add .
$ git commit -m “chore: basic project setup”

Nếu mọi thứ làm việc thành công, bạn sẽ thấy husky đang chạy lint-staged, cái đến lượt nó chạy prettier và eslint,
sau khi bạn chạy git commit. Nếu bạn nhận một lỗi cấu hình, đảm bảo rằng tất cả các files được lưu đúng đắn và sau
đó chạy git commit lại một lần nữa.
success

Chia sẻ