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
  • Vừa gia hạn tên miền cho 2coffee.dev. Vậy là em nó đã 3 tuổi rồi đó mọi người. Sẵn đây nói luôn...

    Mọi người chắc cũng biết về ý nghĩa của cái tên rồi đúng không. Ấy thế mà nó lại đang dính vào "lời nguyền cà phê" bởi vì tên miền có chứa từ khoá "coffee" rất "hot", làm nhiều người hoặc công cụ tìm kiếm đánh giá sai lệch về nội dung của trang web 🥲. Nhiều lúc mình muốn tìm cách để "khai tử" cái tên này đi, thay bằng tên khác thì con đường bớt chông gai hơn.

    Tiền thân của 2coffee.dev là estacks.icu, ấy thế mà sao lại bỏ được cái tên cũ không chút đắn đo? Là vì 2coffee.dev đánh dấu sự trưởng thành trong tư duy làm sản phẩm của mình, ý là nghiêm túc hơn á. Còn stacks.icu vẫn mãi mãi là tiền thân của "Xin chào, một tách cà phê dành cho mấy ông lập trình viên đây".

    » Xem thêm
  • Privacy Guides là một dự án phi lợi nhuận nhằm cung cấp cho người dùng các hiểu biết về quyền riêng tư, đồng thời khuyến nghị những phương pháp hay công cụ để giúp đòi lại quyền riêng tư trong thế giới Internet.

    Có nhiều bài viết hay tại đây, mình lấy ví dụ 3 khái niệm hay nhầm lẫn hoặc bị đánh tráo là Quyền riêng tư (privacy), Bảo mật (security) và Ẩn danh (anonymity). Trong khi nhiều người phản đối quyền riêng tư cho rằng một người không cần quyền riêng tư nếu họ "không có gì để che giấu". "Đây là một quan niệm sai lầm nguy hiểm, vì nó tạo ra cảm giác rằng những người đòi hỏi quyền riêng tư phải là những kẻ lệch lạc, tội phạm hoặc sai trái." - Why Privacy Matters.

    » Xem thêm
  • Có một nơi rất tuyệt vời để học hoặc đang kẹt trong suy nghĩ không còn gì để học nữa thì phần bình luận ở bển Hacker News là thứ dành cho bạn.

    Y Combinator - Công ty đứng sau Hacker News tập trung vào các khoản đầu tư mạo hiểm cho các Startup tại Thung lũng Silicon, nên không ngạc nhiên khi có rất nhiều bộ óc thiên tài bình luận dạo ở trên đây. Nhưng cái dạo của họ cũng đủ cung cấp từ khoá mở ra cho chúng ta nhiều điều mới.

    Không tin ư? Chỉ cần lướt một tí, bấm bài viết nào phù hợp với thị hiếu của bạn, xem bình luận và nhớ thêm một cốc cà phê bên cạnh nhé ☕️

    » 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