Setup pre-commit hook với Husky + lint-staged: tại sao chỉ lint files đang staged thay vì cả project?

Vấn đề nếu lint cả project trên mỗi commit:
- Project lớn → eslint . mất 30-60 giây → developers tắt hooks
- Không liên quan: bạn sửa 1 file nhưng phải đợi 500 files khác lint

lint-staged giải pháp: chỉ chạy linter trên files đang trong git staging area.

Setup:

npm install --save-dev husky lint-staged
npx husky init

package.json:

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

.husky/pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged

Kết quả: chỉ 2-3 files được lint → hook chạy trong <3 giây → developers không bỏ hook.

Lưu ý quan trọng về type check trong lint-staged:
tsc --noEmit luôn chạy TOÀN BỘ project typecheck — TypeScript cần full project graph để type-check chính xác, không thể chạy per-file. Nên đặt tsc trong CI thay vì lint-staged, hoặc chấp nhận chi phí full-project check mỗi commit.

Lưu ý: --fix auto-fix và re-stage files đã fix — không cần commit lại. Nhưng nếu auto-fix thay đổi logic → developer phải review.

Problem with linting the entire project on every commit:
- Large project → eslint . takes 30-60 seconds → developers disable the hooks
- Irrelevant: you change 1 file but wait for 500 others to be linted

lint-staged solution: only run linters on files currently in the git staging area.

Setup:

npm install --save-dev husky lint-staged
npx husky init

package.json:

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

.husky/pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged

Result: only 2-3 files are linted → hook runs in <3 seconds → developers keep the hooks enabled.

Important note on type checking in lint-staged:
tsc --noEmit always runs a FULL project typecheck — TypeScript requires the complete project graph and cannot check individual files in isolation. Run tsc in CI instead of lint-staged, or accept the full-project cost per commit.

Note: --fix auto-fixes and re-stages fixed files — no need to re-commit. But if auto-fix changes logic → developer must review.