Posted inDevelopment

Chặn đứng lỗi code ngớ ngẩn bằng Pre-commit Hooks, ESLint và Prettier

Development tutorial - IT technology blog
Development tutorial - IT technology blog

Bài học đắt giá từ một lỗi typo 2 giờ sáng

Chiếc điện thoại của mình rung bần bật vì thông báo Sentry. Hệ thống báo lỗi 500 hàng loạt ngay sau khi một hotfix vừa được merge. Sau 45 phút mò mẫm log, mình phát hiện ra thủ phạm: một dấu ngoặc nhọn bị thừa và một biến undefined do copy-paste vội vàng. Developer phụ trách đã quên chạy linter ở local. Tệ hơn, CI/CD bị bỏ qua (skip) để ưu tiên ‘deploy cho nhanh’.

Nếu bạn từng mất cả buổi sáng chỉ để chỉnh lại dấu phẩy hay thụt đầu dòng cho đồng bộ với team, bạn sẽ hiểu tại sao mình ám ảnh với việc automation. Trong dự án gần nhất với 5 developer, mình áp dụng quy trình kiểm soát tự động này. Kết quả thật bất ngờ: chúng mình giảm được 80% các cuộc tranh cãi vô bổ về format code trong Pull Request. Mọi thứ đều được máy móc xử lý gọn gàng trước khi code kịp rời khỏi máy tính cá nhân.

Bộ ba công cụ giúp bạn ‘kê cao gối ngủ’

Để code luôn sạch, chúng ta cần một hệ thống kiểm soát nhiều lớp. Thay vì đợi đến khi đẩy lên server mới kiểm tra, mình sẽ chặn lỗi ngay từ ‘cửa ngõ’ máy local.

  • ESLint: Công cụ này đóng vai trò như một người soát lỗi chính tả chuyên nghiệp. Nó sẽ chỉ ra các lỗi logic như biến chưa khai báo hoặc những đoạn code tiềm ẩn nguy cơ bảo mật.
  • Prettier: Đây là thợ làm đẹp. Prettier không quan tâm code đúng hay sai, nó chỉ đảm bảo mọi file đều thẳng hàng, đúng chuẩn format mà team đã thống nhất.
  • Husky & Lint-staged: Hai công cụ này đóng vai trò ‘chốt chặn’. Khi bạn gõ git commit, Husky sẽ kích hoạt lint-staged để buộc ESLint và Prettier kiểm tra những file vừa sửa. Nếu code còn lỗi, lệnh commit sẽ bị từ chối ngay lập tức.

Quy trình thiết lập từ con số 0

Giả sử bạn đang làm việc trên một dự án Node.js hoặc React. Chỉ mất khoảng 10 phút để cấu hình bộ khung này hoạt động trơn tru.

Cài đặt ESLint và Prettier

Trước tiên, hãy cài đặt các package cần thiết. Mình sử dụng thêm eslint-config-prettier để đảm bảo hai công cụ này không xung đột quy tắc với nhau.

npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier

Tiếp theo, hãy tạo file cấu hình .eslintrc.json. Đây là bản cấu hình tiêu chuẩn mà mình thường dùng cho các dự án thực tế:

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error"
  }
}

Đừng quên file .prettierrc để định nghĩa style chung. Team mình thường ưu tiên dấu phẩy đơn và không dùng dấu chấm phẩy quá đà:

{
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5"
}

Kích hoạt Husky – Tự động hóa việc kiểm soát

Cài đặt công cụ mà không ép dùng thì rất dễ bị lãng quên. Husky sẽ giúp bạn tự động hóa việc này thông qua Git Hooks.

npx husky init && npm install

Lệnh này tạo ra thư mục .husky. Tuy nhiên, quét toàn bộ dự án mỗi lần commit sẽ rất chậm nếu dự án có hàng nghìn file. Để tối ưu, chúng ta cần lint-staged.

Tối ưu hiệu suất với Lint-staged

Cài đặt lint-staged để chỉ kiểm tra những file đang nằm trong khu vực chuẩn bị commit (staged files):

npm install -D lint-staged

Thêm cấu hình sau vào package.json:

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

Cuối cùng, hãy cập nhật file .husky/pre-commit để gọi lint-staged. Từ nay, mỗi khi commit, máy tính sẽ tự làm việc thay bạn.

Trải nghiệm thực tế: Khi máy móc lên tiếng

Hãy thử tạo một file app.js với một biến thừa và format lộn xộn. Khi bạn gõ git commit -m "feat: update", terminal sẽ hiển thị quá trình quét. Nếu ESLint thấy lỗi no-unused-vars, nó sẽ chặn đứng thao tác commit. Bạn buộc phải sửa code cho sạch mới có thể tiếp tục. Ngược lại, nếu chỉ là lỗi xuống dòng, Prettier sẽ tự động ‘nắn’ lại code cho đẹp rồi mới cho phép commit thành công.

Bài học xương máu: Đừng quá khắt khe từ đầu

Mình từng mắc sai lầm khi áp dụng quá nhiều rule nghiêm ngặt ngay ngày đầu tiên. Anh em trong team bị chặn liên tục, dẫn đến ức chế và tìm cách dùng --no-verify để vượt rào. Lời khuyên của mình là: Hãy bắt đầu với các rule cơ bản nhất để tránh lỗi runtime. Sau đó, hãy cùng team thảo luận và thêm dần các rule về style theo thời gian.

Lời kết

Thiết lập Pre-commit Hooks không tốn quá 15 phút nhưng giá trị mang lại là cực lớn. Nó giúp team bạn tiết kiệm hàng giờ review code và tránh được những đêm mất ngủ vì lỗi production ngớ ngẩn. Hãy xây dựng một văn hóa kỹ thuật nơi chất lượng code được đảm bảo một cách tự động và chuyên nghiệp nhất.

Share:
Tags: