Slide ESLint.pptx

Bài thi giữa kỳ
Kiểm thử và đảm bảo chất lượng
Tìm hiểu về ESLint
Nguyễn Văn Doanh - 19810310643

Mục tiêu
1. 1. Khái niệm về ESLint
2. 2. Các chức năng của ESLint
3. 3. Cách sử dụng ESLint vào dự án

ESLint là gì ?
ESLint là một tiện ích linting Javascript mã nguồn mở ban đầu
được tạo bởi Nicholas C. Zakas vào tháng 6 năm 2013. Căn cứ
vào những quy chuẩn về cách viết code đã thống nhất từ trước
trong công ty hoặc dự án sẽ đặt ra quy chuẩn viết code. Hầu hết
các ngôn ngữ lập trình đều có code linter riêng và đôi khi các
linter được kết hợp vào trình biên dịch (complier)
Javascript là ngôn ngữ thuộc dạng loosely-typed, hay bị lỗi
trong quá trình viết code. Và do không có quá trình biên dịch mã
nên Javascript sẽ được chạy theo thứ tự để tìm ra lỗi cú pháp.
Công cụ như ESLint cho phép tìm ra lỗi ngay cả khi chúng chưa
được chạy

Lợi ích của
ESLint là gì ?
 Giúp tự động phát hiện, cảnh báo bug
trong quá trình viết code
 Tiết kiệm thời gian sửa lỗi
 Giúp code chuẩn hơn, dễ nhìn hơn
 Dễ sử dụng

ESLint
giúp xử
lý các
vấn đề
gì?
Vấn đề #1: Code chạy ngon lành lúc phát triển, còn khi
release thì gặp lỗi. Tại sao? Ví dụ: Giả sử code thiếu dấu
chấm phẩy, khi chạy chương trình trên trình duyệt thì vẫn
ổn. Nhưng lúc minified code để đóng gói sản phẩm thì mấy
công cụ minification lại không báo cho bạn biết dấu chấm
phẩy nào bị thiếu. Khi code đã minified thì trình duyệt
không chấp nhận lỗi nào, bao gồm cả lỗi mà nó vốn có bỏ
qua với code nguyên bản
Vấn đề #2: Xung đột phạm vi biến (scope). Ví dụ: Trong
code của bạn sẽ đặt rất nhiều biến như “id”, “name”….
Nhưng bỗng một ngày, đồng nghiệp trong nhóm vô tư
khai báo biến với var, thế là biến đó có nguy cơ ghi đè giá
trị lên biến cùng tên của bạn. Rồi lúc chương trình chạy
không biết lỗi này nằm ở đâu. Điều này sẽ xảy ra.

Cài đặt
và cấu
hình
ESLint
 ESLint có thể cài qua npm như sau:
npm init @eslint/config
Ngoài ra ESLint còn cho phép cài thêm các plugin để mở
rộng hoạt động của nó.Ví dụ plugin cho dự án ReactJs:
npm init eslint-plugin-react
Một linter hoạt động đúng khi chúng ta config nó đúng mà
thôi. Ta có thể cấu hình ESLint rất dễ dàng. Có 2 cách để
Config ESLint, một là comment trực tiếp trong file *.js, hai
là sử dụng file .eslintrc.*. Phần mở rộng có thể là js, json,
yaml, yml. Em sẽ cấu hình trên phần mở rộng là json.

File config cho ESLint có những thành phần chính như sau:
plugin: Đây là những plugin dung để mở rộng hoạt động của
ESLint.
extends:Đây là những config có sẵn được sử dụng. ESLintcó
cở chếgiúp chúng ta sử dụng lại những config có sẵn của
người khác.

rules: Đây chính là phần config những quy tắc
mà code cần phải tuân theo. Mỗi rules cần được
config 2 thông số: giá trị ứng với mức độ áp
dụng rules (off, warn, error hoặc 0, 1, 2).
parserOptions: Mặc định, ESLint kiểm tra cú
pháp của ES5, nếu sử dụng ES6 hoặc các phiên
bản mới hơn , chúng ta phải cấu hình bằng
parserOptions.
env: Đây là nơi cấu hình môi trường mà code có
thể chạy.

Áp dụn ESLintvào dự án
Sau khi đã config cho ESLint xong xuôi, công
việc còn lại của chúng ta là áp dụng vào dự án,
làm nó hoạt động đúng như chức năng của một
linter.

Trước hết cần thêm script vào pakage.json
Việc sử dụng script tùy thuộc vào project.
Sau khi có script rồi thì mỗi lần gọi ESLint,
chúng ta chỉ cần gọi lệnh
npx eslint yourfile.js

Kết luận
ESLint có rất nhiều ưu điểm, nhưng nếu
thông số kỹ thuật ESLint không tốt thì code
của bạn sẽ có một đống lỗi khó trấn áp bị
báo. Nhưng ESLint là một công cụ tuyệt vời
để hoàn toàn có thể giúp tất cả chúng ta
hoàn toàn có thể thống nhất được những
cách viết code của những thành viên khác
trong cùng 1 project.

Link video:
https://drive.google.com/file/d/1JPag0pJX
Khf8w2ovZaTUxF5m1ZQ-
K6z4/view?usp=sharing

Slide ESLint.pptx

Recommended

Recommended

More Related Content

Similar to Slide ESLint.pptx

Similar to Slide ESLint.pptx (20)

Recently uploaded

Recently uploaded (20)

Slide ESLint.pptx