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

Tin ngắn hàng ngày dành cho bạn
  • Rust sinh ra để tái định nghĩa nhiều thứ. Trong đó chắc phải kể đến JavaScript. Từ đầu năm đến giờ các công cụ làm từ Rust mà để cho JavaScript dùng đếm sương sương cũng vài ba cái rồi. Mới đây nhất là Oxc.

    Oxc là một công cụ phân tích cú pháp (parser), kiểm tra lỗi (lint), định dạng (formatter), chuyển đổi (transformer), minifier... tất cả đều được viết bằng Rust, trong một công cụ duy nhất.

    Mặc dù vẫn đang trong quá trình xây dựng nhưng thử nhìn điểm hiệu năng của nó so với swc hoặc eslint mà xem 🫣

    » Xem thêm
  • Mấy hôm nay, à mà cũng không hẳn, do sự kiện WWDC vừa rồi nên Apple lại bị dân cư mạng mang ra bàn tán rằng rốt cục thì các tính năng AI của họ đang ở đâu? Trong khi các hãng khác đang lao mình vào việc mang AI lên thiết bị, phần mềm của họ thì Apple lại đang có vẻ... không quan tâm lắm.

    Thậm chí mới đây các nhà nghiên cứu của Apple cho rằng các mô hình LLM sẽ "sụp đổ hoàn toàn về độ chính xác" khi được đưa ra các vấn đề cực kỳ phức tạp. Chỉ ra rằng suy luận chỉ là huyễn hoặc thì ngay lập tức đã có nhiều bài phản bác nghiên cứu này. Một lần nữa cho thấy rằng Apple đang suy nghĩ điều gì với AI trên thiết bị của họ?

    Mình thì nghĩ đơn giản thôi, Apple có vẻ đang gặp khó khăn với việc tạo ra AI cho riêng họ. Tức là khó khăn ngay từ đoạn thu thập dữ liệu để đào tạo rồi. Họ luôn tỏ ra tôn trọng quyền riêng tư của người dùng nên chẳng lẽ lại lên mạng đi xào nấu dữ liệu ở khắp nơi, hoặc "chôm" dữ liệu dưới máy người dùng lên? Chắc chắn, họ cũng không muốn cung cấp thêm dữ liệu người dùng cho các bên thứ 3 như OpenAI.

    Nhưng nhờ những khó khăn này biết đâu họ lại tìm ra được hướng đi mới. Ai cũng chọn phần dễ thì gian khổ để phần cho ai 😁. À mình không phải là "fan" của Apple, chỉ là thấy cái nào phù hợp thì dùng thôi 🤓

    » Xem thêm
  • Người "nhạy cảm" với markdown đó là khi thấy một thư viện tạo khung soạn thảo mới là nhảy ngay vào xem nó có gì mới. Milkdown/milkdown là một ví dụ.

    Xem thử thì thấy ổn phết mọi người ạ. Vài nữa thử tích hợp vào opennotas xem sao. Mang tiếng là ứng dụng ghi chú hỗ trợ markdown cơ mà cái thư viện tiptap nó không chịu làm thêm phần hỗ trợ markdown 😩. Dùng thư viện ngoài thì vẫn chưa ngon cho lắm.

    » 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