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ặc0
,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ọnrules
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.