ESLint

ESLint là gì?

Là một dạng phân tích tĩnh (static analysis) thường được sử dụng để tìm những patterns hoặc code có vấn đề.

Việc đánh giá code có vấn đề hay không sẽ căn cứ vào những quy chuẩn về cách viết code đã thống nhất từ trước.

Giúp ngăn ngừa một vài loại bug, bao gồm cả những loại bug đem loại rất nhiều phiền hà cho quá trình gỡ lỗi, khiến chương trình không chạy được. (Ví dụ như việc thiếu dấu chấm-phẩm trong đoạn code Javascript, khi chạy trên Browser thì không sao nhưng khi đóng gói project (minified) thì lại báo lỗi)

Giúp việc viết code xịn hơn.

Các thành phần trong ESLint

npm install eslint --save-dev

Tạo file .eslintrc ở root của ứng dụng và cấu hình như sau

extends :

Đây là những config có sẵn được sử dụng, chúng ta sẽ mở rộng chúng bằng cách thêm vào những config của riêng mình. ESLint có một cơ chế khá hay cho phép chúng ta “dùng lại” cấu hình của người khác. Ví dụ tôi muốn sử dụng cấu hình có sẵn eslint:recommended (tích hợp sẵn trong eslint), và react/recommended (tích hợp sẵn trong plugin) thì tôi config như sau:

plugins :

ESLint hỗ trợ sử dụng plugin của bên thứ ba. Trước khi sử dụng plugin, bạn phải cài đặt nó bằng npm.
Ví dụ ESLint không hỗ trợ kiểm tra cú pháp JSX, thì chúng ta phải sử dụng plugin react để ESLint có thể kiểm tra code React.

Xem danh sách các plugins hỗ trợ trong eslint tại ĐÂY.

parseOptions :

Các tùy chọn ngôn ngữ JavaScript được hỗ trợ

env :

Để chỉ định môi trường, sử dụng từ khóa env và chỉ định môi trường bạn muốn bật. Ví dụ: phần sau đây cho phép môi trường trình duyệt và Node.js

rules :

Đây là chính là phần config những quy tắc mà code cần phải tuân theo. Có nhiều rules đã được config sẵn khi chúng ta extends một cấu hình nào đó thì không cần config lại nữa.
Mỗi rules cần được config hai thông số: giá trị ứng với mức độ áp dụng rules (off, warn, error hoặc 0, 1, 2) và các tuỳ chọn. Rules ở đây có thể là rules do ESLint cung cấp sẵn hoặc rules của plugin.

"off" or 0 - turn the rule off

"warn" or 1 - turn the rule on as a warning

"error" or 2 - turn the rule on as an error

Ví dụ rules quotes sẽ bắt buộc phải dùng nháy đơn ' thay nháy kép "" của string.

Từ khóa “semi” và “quotes” là tên của rule

Số lượng rules trong ESLint là vô cùng lớn. Tùy vào project và sự thống nhất của team các bạn có thể chọn rules thích hợp, xem thêm tại ĐÂY

globals :

Các phần khai báo toàn cuc (global) như React, jQuery,….

File .eslintrc sau khi config:

Tổng kết

ESLint tuy có nhiều ưu điểm như vậy nhưng nếu bạn cấu hình ESLint không tốt, thì code của bạn sẽ bị báo một đống lỗi rất khó kiểm soát. Tuy nhiên, nhìn chung ESLint là một công cụ tuyệt vời giúp chúng ta có thể thống nhất được cách viết code của tất cả các thành viên trong cùng 1 project.

ESLint

mtoplist