ESLint là gì và cách dùng ESLint để phát hiện, sửa chữa mã cho dự án Javascript

Bài viết được sự cho phép của tác giả Tống Xuân Hoài

Vấn đề

Phát triển dự án là một quá trình dài không phải code một lần mà dùng mãi mãi được. Trong một dự án thời gian phát triển có khi chỉ chiếm một phần nhỏ so với thời gian kiểm thử và bảo trì (maintain) dự án.

Với một thời gian dài như vậy, dự án có nhiều khả năng phải luân chuyển nhân sự thường xuyên. Điều đó làm cho trong dự án có thể có rất nhiều người tham gia viết mã và mỗi người thì lại có một phong cách (style) viết mã riêng. Chúng ta không nên cấm tiệt điều đó, nhưng với những quy định về cú pháp như ngắt dòng, dấu móc, dấu chấm phẩy… thì hoàn toàn có thể tạo ra một quy định chung và yêu cầu mọi người tuân thủ.

ESLint là gì

ESLint là một công cụ phân tích tĩnh mã của bạn để nhanh chóng tìm ra sự cố. Nó được tích hợp vào hầu hết các trình soạn thảo văn bản và bạn có thể chạy ESLint như một phần của quy trình tích hợp liên tục (CI/CD) của mình.

Để làm được điều này ESLint có một tập hợp các quy tắc mà bạn sẽ cấu hình để phát hiện và ngăn chặn các đoạn mã vi phạm những quy tắc (rules). Hơn nữa ESLint còn có thể sửa chữa (fix) hay định dạng (format) lại chúng theo cấu hình tích hợp.

ESLint cung cấp extension cho các trình soạn mã khác nhau, bạn chỉ cần cài đặt extension của ESLint thì nó sẽ tự động thông báo lỗi realtime. Để xem danh sách các trình soạn mã hỗ trợ các bạn bấm vào ESLint Integrations.

  Setup Eslint và Prettier cho dự án React theo chuẩn coding style guide của Airbnb

  Code ví dụ typescript, cấu hình eslint với prettier

Cài đặt

Bạn có thể cài đặt ESLint thông qua npm ở dạng global.

$ npm i -g eslint

Sau đó chạy init để khởi tạo cấu hình ESLint cho project. Lưu ý là chạy init ở trong thư mục chứa project muốn sử dụng ESLint.

$ eslint --init

Khi chạy --init, ESLint sẽ hỏi bạn một số câu hỏi để tạo cấu hình phù hợp, bạn chỉ cần trả lời theo đúng những gì mà dự án đang sử dụng. Sau đó một file .eslintrc.js sẽ được tạo ra có chứa các cấu hình mà ESLint sẽ sử dụng cho dự án của bạn. (Lưu ý nếu bạn chọn cấu hình dưới dạng file json hoặc yaml thì ESLint sẽ tạo file cấu hình tương ứng).

Một cấu hình mặc định lúc --init ra sẽ trông như thế này:

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
    }
}

Tham khảo việc làm ReactJS hấp dẫn trên TopDev!

Sử dụng cơ bản

Cú pháp cơ bản để bắt đầu chạy Lint là:

$ eslint [options] [file|dir|glob]*

Ví dụ chạy Lint cho file index.js

$ eslint index.js

ESLint sẽ tự động tìm tệp cấu hình .eslintrc trong dự án và Lint theo cấu hình đó. Bạn cũng có thể chỉ định tệp cấu hình cho ESLint thông qua dòng lệnh.

Giả sử tất cả mã của bạn nằm trong thư mục /src và bạn muốn chạy Lint toàn bộ dự án:

$ eslint src

Nhưng tôi chỉ cần chạy Lint với các tệp .js thôi và hãy bỏ qua các file trong thư mục src/dist:

$ eslint src --ignore-pattern 'src/dist' --ext .js

Còn nhiều lệnh CLI hữu ích khác nữa bạn đọc tham khảo tại trang tài liệu ESLint.

ESLint còn có thể tự động sửa lỗi vi phạm các rule bằng cách chạy --fix:

# Sửa lỗi nhưng không lưu lại
$ eslint src --fix-dry-run

# Sửa lỗi và lưu lại
$ eslint src --fix

ESLint Rule

Như tôi đã nói ESLint có một tập hợp các rule để bạn cấu hình cho dự án. Danh sách các rule có thể xem tại ESLint rule.

Để đặt một rule vào cấu hình rất đơn giản, hãy thêm một thuộc tính vào trong mục “rules” với value:

  • “off” hoặc 0 – tắt rule
  • “warn” hoặc 1 – bật rule ở chế độ warning
  • “error” hoặc 2 – bật rule ở chế độ báo lỗi

Ví dụ tôi muốn áp dụng rule no-extra-semi ở chế độ báo lỗi mỗi khi chạy Lint thì làm như sau.

...
    "rules": {
        "no-extra-semi": "error"
    }
...

Tham khảo tuyển dụng javascript lương cao trên TopDev

Các bộ quy tắc được khuyến nghị

ESLint đưa ra rất nhiều rule và việc lựa chọn áp dụng rule nào rule nào là cả một quá trình tốn thời gian lẫn công sức thế nên đã có khá nhiều những bộ quy tắc được ra đời.

Nổi tiếng nhất là 2 bộ quy tắc của Airbnb và Google.

Để sử dụng chúng rất đơn giản bạn chỉ cần chạy npm install dưới cấu hình package develop (–save-dev), sau đó khai báo tên của cấu hình muốn sử dụng trong file cấu hình ESLint.

...
    "extends": "google",
    // hoặc
    "extends": "airbnb",
...

Airbnb và Google có mô tả rõ cách sử dụng & các quy tắc mà họ áp dụng tại Airbnb Style hoặc Google Style.

Còn không bạn cũng có thể sử dụng bộ quy tắc do chính ESLint khuyến nghị bằng cách đặt "extends": "eslint:recommended".

Kết hợp với Githook

Đặt ra các quy tắc để tạo một style xuyên suốt trong dự án, vì thế bạn cần ngăn chặn những hành vi “push” code do vô tình hay cố ý hoặc quên chạy Lint. Bằng cách kết hợp với Githook bạn có thể ngăn chặn được những commit như thế.

Tổng kết

ESLint là một công cụ phân tích và sửa đổi mã Javascript hiệu quả, ESLint giúp cho code style của dự án bạn luôn được xuyên suốt. Việc áp dụng ESLint vào dự án hết sức đơn giản, ngoài ra còn có extension tích hợp cho nhiều trình Code Editor hay IDE để bạn có thể dễ dàng làm việc nữa.

Bài viết gốc được đăng tải tại 2coffee.dev

Có thể bạn quan tâm:

Xem thêm Việc làm IT Jobs for Developer hấp dẫn trên TopDev