Giữ Cho Code Sạch Đẹp Với Eslint Là Gì, Eslint Là Gì

Chắc hẳn các bạn đã biết JavaScript hiện đã trở thành một ngôn ngữ khá phổ biến trong lập trình web hiện nay. Gần như bất cứ lập trình viên nào cũng đều cần phải biết đến JavaScript. Để thuận tiện hơn trong việc viết code JavaScript, hôm nay chúng tôi sẽ giới thiệu bạn một công cụ đó là ESLint. Vậy bạn đã biết ESLint là gì? Nếu chưa, thì hãy cùng tìm hiểu ngay qua bài viết dưới đây nhé!

Giới thiệu về ESLint là gì?

ESLint là một linter, nó dành cho ngôn từ lập trình JavaScript và nó được viết bằng Node. js. ESlint thực sự rất hữu dụng do tại JavaScript là một trong những ngôn từ thông dịch và nó được dịch trực tiếp thành mã máy. Có rất nhiều lỗi chỉ hoàn toàn có thể phát hiện được trong thời hạn chạy project. ESLint sẽ giúp bạn hoàn toàn có thể chớp lấy được những lỗi này .*

ĐỊnh nghĩa ESLint là gì?

ESLint hoàn toàn có thể bắt những lỗi như thể :Tránh lỗi lặp vô tận trong các vòng lặpĐảm bảo tất cả những method getter đều trả về cái gì đóNgăn chặn được cú pháp console.log và những cú pháp khác tương tự như thếCó thể kiểm tra trùng lặp case trong switchKiểm tra những mã không thể truy cậpCó thể kiểm tra tính hợp lệ của JSDos…Tránh lỗi lặp vô tận trong những vòng lặpĐảm bảo tổng thể những method getter đều trả về cái gì đóNgăn chặn được cú pháp console.log và những cú pháp khác tựa như như thếCó thể kiểm tra trùng lặp case trong switchKiểm tra những mã không hề truy cậpCó thể kiểm tra tính hợp lệ của JSDos …ESLint rất linh động, và có một thông số kỹ thuật tùy chỉnh được. Bạn hoàn toàn có thể chọn quy tắc mà bạn muốn kiểm tra, hoặc kiểu bạn muốn thực thi. Những quy tắc có sẵn bị tắt và bạn hoàn toàn có thể bật chúng trong tệp thông số kỹ thuật. eslintrc, vận dụng hàng loạt hoặc đơn cử cho 1 số ít dự án Bất Động Sản của bạn .Bạn đang xem : Eslint là gì

Lợi ích của ESLint là gì?

ESLint có thể ngăn ngừa một vài loại bug, cả những lỗ khó gỡ nhất, khiến chương trình không chạy được.Giúp tiết kiệm được thời gian của lập trình viênGiúp việc code trở nên dễ dàng hơnGiúp dễ dàng sử dụng

Các thành phần trong ESLint

ESLint hoàn toàn có thể ngăn ngừa một vài loại bug, cả những lỗ khó gỡ nhất, khiến chương trình không chạy được. Giúp tiết kiệm chi phí được thời hạn của lập trình viênGiúp việc code trở nên thuận tiện hơnGiúp thuận tiện sử dụng

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

**

extends:

Đây là nơi khai báo những config có sẵn mà bạn muốn thêm nó vào. Có khá nhiều config có sẵn khác nhưng trước khi sử dụng các bạn phải tìm hiểu kỹ về chúng. Vì phải tùy thuộc vào mỗi dự án khác nhau nên sẽ có những yêu cầu khác nhau về convention. Vì thế chúng ta chỉ dùng những config phù hợp nhất với dự án mà ta đang làm.Đây là nơi khai báo những config có sẵn mà bạn muốn thêm nó vào. Có khá nhiều config có sẵn khác nhưng trước khi sử dụng những bạn phải tìm hiểu và khám phá kỹ về chúng. Vì phải tùy thuộc vào mỗi dự án Bất Động Sản khác nhau nên sẽ có những nhu yếu khác nhau về convention. Vì thế tất cả chúng ta chỉ dùng những config tương thích nhất với dự án Bất Động Sản mà ta đang làm .

Plugins:

Đây là những plugin được sử dụng để có thể mở rộng hoạt động của ESLint. Vì muốn ESLint có thể mở rộng để kiểm tra cú pháp JSX của React nên bắt buộc bạn cần phải khai báo plugin React. Trước khi sử dụng Plugin, bạn cần phải cài đặt bằng npm.Đây là những plugin được sử dụng để hoàn toàn có thể lan rộng ra hoạt động giải trí của ESLint. Vì muốn ESLint hoàn toàn có thể lan rộng ra để kiểm tra cú pháp JSX của React nên bắt buộc bạn cần phải khai báo plugin React. Trước khi sử dụng Plugin, bạn cần phải thiết lập bằng npm .Ví dụ : ESLint không tương hỗ kiểm tra được cú pháp JSX, thì tất cả chúng ta phải sử dụng plugin react để ESLint để hoàn toàn có thể kiểm tra code React“ plugins ” : <“ react ”> ,

Parse Options

Các tùy chọn ngôn từ JavaScript được tương hỗ**

env

Đây là nơi cấu hình các môi trường mà project của chúng ta sẽ chạy trên đó. Với mỗi một môi trường khác nhau thì sẽ có những biến global khác nhau.Một số trường mà mình hay sử dụng trong dự án như là: browser, jest, es6,…Đây là nơi thông số kỹ thuật những thiên nhiên và môi trường mà project của tất cả chúng ta sẽ chạy trên đó. Với mỗi một thiên nhiên và môi trường khác nhau thì sẽ có những biến global khác nhau. Một số trường mà mình hay sử dụng trong dự án Bất Động Sản như thể : browser, jest, es6, …

rules

Đây là phần config những quy tắc mà code cần phải tuân theo. Có khá nhiều rules đã được config sẵn. Nên khi chúng ta extends một cấu hình nào đó không cần phải config nữa.Mỗi 1 rules cần phải đượ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) và các tùy chọn khác. Rules ở đây có thể là các rules do ESLint cung cấp sẵn hoặc rules của plugin.Số lượng rules trong ESLint là điều vô cùng lớn. Tùy chọn 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.Đây là phần config những quy tắc mà code cần phải tuân theo. Có khá nhiều rules đã được config sẵn. Nên khi tất cả chúng ta extends một thông số kỹ thuật nào đó không cần phải config nữa. Mỗi 1 rules cần phải được config 2 thông số kỹ thuật : giá trị ứng với mức độ vận dụng rules ( off, warn, error hoặc 0,1,2 ) và những tùy chọn khác. Rules ở đây hoàn toàn có thể là những rules do ESLint cung ứng sẵn hoặc rules của plugin. Số lượng rules trong ESLint là điều vô cùng lớn. Tùy chọn vào project và sự thống nhất của team những bạn hoàn toàn có thể chọn rules thích hợp .

globals

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

File .eslintrc sau khi config: 

**

Tại sao lại chọn ESLint?

Có rất nhiều công cụ Lint JavaScript khác nhau như : ESLint, JSLint, JSHintJSLint là công cụ khá gò bó, không cho chúng ta tùy chỉnh theo ý mình.JSHint là công cụ thiếu những cơ chế như mở rộngCòn ESLint là công cụ hài hòa nhất, vì thế đây là lựa chọn tốt nhất cho các project.JSLint là công cụ khá gò bó, không cho tất cả chúng ta tùy chỉnh theo ý mình. JSHint là công cụ thiếu những chính sách như mở rộngCòn ESLint là công cụ hài hòa nhất, cho nên vì thế đây là lựa chọn tốt nhất cho những project .ESLint được cho phép tất cả chúng ta tùy chỉnh được thông số kỹ thuật theo coding convention của mình, giúp kiểm tra coding style và hoàn toàn có thể tìm ra những bug cũng như những yếu tố tiềm ẩn khác .ESLint là lựa chọn cực kỳ thích hợp khi tất cả chúng ta sử dụng ES2015 cũng như JSX của React. Trong số những linter, đây là công cụ tương hỗ ES2015 JSX là tốt nhất và đây cũng là công cụ duy nhất tương hỗ JSX .Xem thêm : Sự Thật Du Học Quản Trị Kinh Doanh Ở Đâu, Du Học Ngành Quản Trị Kinh Doanh Có Nên KhôngESLint có nhiều tính năng hơn thì đồng nghĩa tương quan với việc nó sẽ chạy chậm hơn. Vì thế, trong một số ít dự án Bất Động Sản nó hoàn toàn có thể không phải là công cụ thích hợp nhất .

Áp dụng ESLint vào dự án

Khi config cho ESLint xong, bước tiếp theo là vận dụng nó vào dự án Bất Động Sản, để nó hoàn toàn có thể hoạt động giải trí đúng như tính năng của một linter .Đầu tiên, bạn cần thêm vào một script để gọi sau này như sau – file package.json :{…“ scripts ” : {“ eslint ” : “ eslint path / to / src ” ,…}…}Việc sử dụng script nào cần phải phụ thuộc vào vào từng project. Nếu project NodeJS thì ta hoàn toàn có thể dùng script preset hoặc posttest, để ESLint được chạy tự động hóa mỗi khi gọi unit test. Với những project web thường thì thì bạn hoàn toàn có thể đặt tên script sao cho dễ nhớ .Sau khi có script rồi thì khi cần gọi ESLint, bạn chỉ cần :USD npm run eslint

> package
1.0.0 eslint /absolute/path/to/package

> eslint – fix path / to / src/ absolute / path / to / file.js15 : 8 error ‘ moment ’ is defined but never used no-unused-vars164 : 30 error ‘ states ’ is missing in props validation react / prop-types✖ 2 problems ( 2 errors, 0 warnings )Nếu bạn chưa sử dụng linter lần nào, hoặc những người ít kinh nghiệm tay nghề và hoàn toàn có thể chạy lint sẽ là một vài trang màn hình hiển thị đầy lỗi. Nếu những ai bị yếu tâm ý sẽ hoàn toàn có thể bị shock và gây chán nản không muốn code nữa .

ESLint sẽ giúp chúng ta giải quyết được một phần vấn đề. ESLint có thể tự động sửa một vài lỗi với cách thêm option – fix. Bạn cũng có thể thêm option ngay sau script ở trên, hoặc có thể gọi nó bằng tay: $npm run eslint — — fix

ESLint hoàn toàn có thể sửa được nhiều lỗi, tuy nhiên nó không hề sửa hết những lỗi được. Nó chỉ hoàn toàn có thể sửa những code nào mà nó bảo vệ được sẽ không hề tác động ảnh hưởng đến những hoạt động giải trí. Nhưng, nó đã giúp tất cả chúng ta giảm thiểu số lượng lỗi một cách đáng kể .Bạn hoàn toàn có thể sử dụng prettier để hoàn toàn có thể sửa lỗi mạnh hơn. Đây là công cụ hoàn toàn có thể nói là chuyên về format code nên nó mạnh hơn ESLint trong yếu tố sửa lỗi. Kết hợp ESLint và prettier sẽ cho một hiệu quả rất tốt .

Kết luận

ESLint có 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 một project .

ĐÁNH GIÁ post
Bài viết liên quan

Tư vấn miễn phí (24/7) 094 179 2255