Tại sao cần eslint?

eslint là một công cụ giúp lint code của bạn, do vậy nó được gọi là một linter hay linting tool.

lint là gì?

lint là công cụ giúp phân tích source code và tìm ra các vấn đề trong code có thể dẫn đến bug (https://en.wikipedia.org/wiki/Lint_(software))

Ví dụ về “vấn đề” hay gặp trong code JavaScript:

  • Quên không xoá console.log khi commit
  • unreachable code (code viết sau return trong function)
  • Khai báo biến nhưng không sử dụng hoặc xoá code mà quên không xoá khai báo biến ở trên
  • Dùng == thay vì ===
  • Một hàm return nhiều kiểu dữ liệu khác nhau (cùng một hàm mà lúc thì return string, lúc thì return function chẳng hạn)
  • Một function quá dài

Thay vì trông chờ người code reviewer check code của bạn (dễ bị xót không ai muốn làm), linting tool sẽ giúp bạn tự động check các lỗi này.

Khi nào cần lint?

Ngay trước khi commit code, chúng ta cần lint code. Tuy nhiên ta không thể bảo team member là: “Nhớ lint code trước khi commit nhé”. Vì khả năng quên lint là cao. Khi làm lập trình nên giảm tối thiểu thứ cần phải nhớ. Cái gì automate được thì nên automate.

Để tự động lint khi commit code, ta có thể sử dụng githook, có thư viện husky giúp chúng ta làm việc này. Bạn cần phải cài husky và thêm một đoạn config vào file package.json dạng như dưới đây.

"husky": {
   "hooks": {
     "pre-commit": "eslint --ignore-path .gitignore . --fix"
   }
}

Lint ngay trong quá trình dev

Để giúp việc phát hiện các linting errors sớm trong quá trình dev thay vì chờ đến lúc commit thì bạn có thể cài các plugin hỗ trợ việc lint ngay trong lúc code. VSCode có Eslint extension bạn có thể cài và sử dụng. Plugin này sẽ báo lỗi ngay lập tức khi nó phát hiện ra có vấn đề trong lúc bạn code.

Extension này không phải để thay thế cho githook, mà bạn nên dùng song song cả 2. Trường hợp trình code của bạn không hỗ trợ các extension này thì đành chịu và chờ tới lúc commit để thấy lỗi và sửa thôi.

Với project chưa có eslint, giờ mới tích hợp thì sao?

Lúc này bạn cần:

  • Bảo team ngừng tạo commit mới
  • Cài eslint, cấu hình đầy đủ
  • Chạy lint toàn bộ code kèm theo --fix flag để eslint tìm và tự sửa những lỗi nó có thể sửa được
  • Sau đó commit toàn bộ những thay đổi lên
  • Yêu cầu team rebase lại để tránh conflict khi tạo PR mới

Đây là công việc chỉ làm một lần, nên làm càng sớm càng tốt.

Trường hợp bất khả kháng muốn disable eslint ở một số đoạn code thì sao?

eslint có một set các rule bạn có thể disable globally ở file config hoặc disable ở trong file code bằng cách comment theo một format nhất định:

/* eslint-disable rule-name */
/* eslint-disable-next-line rule-name */

Ví dụ mình set rule max-lines-per-function là 60 tức là function nào mà dài hơn 60 dòng thì eslint sẽ báo lỗi. Function dài dòng thường rất khó đọc và khó hiểu. Tuy nhiên nếu ở phía backend có các function chứa các câu lệnh query dữ liệu dài tới hàng chục dòng thì việc giữ function 60 dòng cho riêng function đó là khó -> ở dòng trước khi định nghĩa function có thể disable nó bằng cách sau:

/* eslint-disable-next-line max-lines-per-function */
function getSomething() {
  // more than 60 lines
}

Cài đặt eslint với husky ra sao?

Bài viết này chỉ nhằm mục đích giải thích với bạn tại sao cần dùng eslint và các tình huống đi kèm. Các bài viết hướng dẫn cài đặt có đầy trên internet bạn có thể google “config eslint husky node”, “config eslint husky react”. Hãy thêm eslint cho pet project của bạn để có điểm trong mắt nhà tuyển dụng.