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

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

Những mẩu tin ngắn hàng ngày dành cho bạn
  • Hẳn là nhiều người ở đây đã nghe đến kiểu tấn công bảo mật Clickjacking rồi nhỉ. Kẻ tấn công thường nhúng một website (thường là mục tiêu) vào trong một iframe trên website của chúng, sau đó làm mờ hoặc ẩn nó đi rồi đặt vào vị trí các nút bấm trên web, ví dụ "Bấm vào để nhận quà". Đâu ai ngờ rằng phía trên nút bấm đó là một nút bấm khác trong iframe. Khá nguy hiểm!

    Nhưng trình duyệt đã có cách ngăn chặn kiểu tấn công này bằng các quy tắc như tiêu đề X-Frame-Options, frame-ancestors của CSP và SameSite: Lax/Strict của Cookies...

    Mới đây, đã xuất hiện thêm kiểu tấn công mới - "DoubleClickjacking" 😨. Đại ý là "hắn" lợi dụng hành động double click để lừa người dùng bấm vào một nút mà hắn muốn. Chi tiết hơn trong bài viết này: DoubleClickjacking: A New Era of UI Redressing.

    » Xem thêm
  • Mọi người đã nghe nói đến Jujutsu - jj - một dạng quản lý phiên bản cho mã nguồn (version control system) chưa? Có vẻ như nó đang nhận được nhiều sự quan tâm.

    Chờ xíu! Chẳng phải git đã quá tốt rồi sao? Thế thì chế ra thằng jj để làm gì nữa? Cũng hơi khó trả lời nhỉ? Mỗi công cụ sinh ra chắc chắn phải cải thiện hoặc khắc phục được nhược điểm của cái trước. Cho nên jj ắt hẳn phải làm được điều gì đó mà git chưa làm được nên mới nổi lên như vậy.

    Thật ra mình đã nghe nói đến jj từ vài tháng trước rồi, nhưng vào đọc thì toàn kiến thức cao siêu. Hoặc là đang mang nặng cái lối suy nghĩ của git vào trong đầu rồi nên chưa lĩnh hội ra được điều gì cả.

    Mình hay có kiểu cái gì đọc lần 1 mà không hiểu thì đọc tiếp lần 2, lần 2 không hiểu thì đọc tiếp lần 3... đến lần thứ n mà vẫn không hiểu thì bỏ. Cơ mà không phải là từ bỏ mà một thời gian sau đó quay lại đọc tiếp. Đến một lúc nào đó khả năng mình sẽ hiểu ra một ít vấn đề, thế mới tài 😆.

    Thì cái jj này có vẻ như nó đang mở ra được tính linh hoạt trong việc "cam kết" mã. Tưởng tượng bạn đang làm việc trên một dự án, đang ở nhánh này, muốn sang nhánh khác để sửa, nhưng mà lại đang viết dở ở nhánh này, thế là phải stash, rồi checkout, rồi commit, rồi merge hoặc rebase lại vào nhánh cũ... nhìn chung quá trình làm việc với git nghiêm ngặt đến mức cứng nhắc, cần nhiều thao tác để giải quyết một vấn đề, chưa kể cái cây commit (commit-tree) nữa thì ôi thôi, khỏi xem cho đỡ nhức mắt. Thế nên ông jj này đang làm cách nào đó để bạn khỏi cần phải quan tâm đến các nhánh luôn, sửa trực tiếp vào commit. Nghe ảo nhỉ 😂.

    Đấy mới lĩnh hội được đến đấy, hy vọng sau n lần đọc lại nữa mình sẽ viết được một bài chi tiết hơn về công cụ này.

    » Xem thêm
  • Gòi gòi tới công chiện gòi 🤤🤤🤤

    » Xem thêm

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.

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": {
    }
}

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"
    }
...

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ế. Nếu chưa biết githook là gì bạn đọc xem thêm bài viết Githooks là gì? Tìm hiểu cách sử dụng Githooks để ngăn chặn commit ẩu.

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.

Cao cấp
Hello

Bí mật ngăn xếp của Blog

Là một lập trình viên, bạn có tò mò về bí mật công nghệ hay những khoản nợ kỹ thuật về trang blog này? Tất cả bí mật sẽ được bật mí ngay bài viết dưới đây. Còn chờ đợi gì nữa, hãy bấm vào ngay!

Là một lập trình viên, bạn có tò mò về bí mật công nghệ hay những khoản nợ kỹ thuật về trang blog này? Tất cả bí mật sẽ được bật mí ngay bài viết dưới đây. Còn chờ đợi gì nữa, hãy bấm vào ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.

Bình luận (1)

Nội dung bình luận...
Avatar
Anh Đức2 năm trước
Làm thế nào để thiết lập eslint với ci/cd được hả bạn
Trả lời
Avatar
Xuân Hoài Tống2 năm trước
Bạn có thể tham khảo bài này https://2coffee.dev/bai-viet/su-dung-mien-phi-shared-runners-ci-cd-cua-gitlab và viết lệnh kiểm tra eslint vào mục script
Bấm hoặc cuộn mạnh để sang bài mới