Hạn Chế Tối đa Code Lởm Với Eslint, Eslint Vs Prettier

Bài viết gốc : https://manhhomienbienthuy.bitbucket.io/2018/May/20/we-should-use-eslint-in-project.html ( đã xin phép tác giả*

JavaScript đã trở thành một ngôn ngữ cực kỳ phổ biến trong lập trình web. Gần như bất cứ lập trình viên web nào cũng đều phải biết code JavaScript. Thế nhưng biết là một chuyện, code tốt lại là chuyện khác. Trong bài viết này, tôi sẽ giới thiệu một công cụ giúp chúng ta code JavaScript tốt hơn, đó chính là ESLint.

Bạn đang xem: Hạn chế tối đa code lởm với eslint

Mở đầuMở đầu

Hiện nay JavaScript đã có những phát triển rất xa so với những thế hệ ban đầu, khi mà những đặc tả ES2015 (ECMAScript 2015 – ES6) và ES2017 được công bố. Đặc biệt, rất nhiều thư viện của JavaScript như ReactJS, AngularJS, VueJS, v.v… giúp chúng ta có thể xây dựng những ứng dụng web cực kỳ cool.

Mặc dù có những đặc tả kỹ thuật như vậy, nhưng việc code JavaScript lúc bấy giờ vẫn còn rất nhiều yếu tố. Vì vậy, việc bảo vệ chất lượng của code JavaScript vẫn luôn là một thử thách lớn .Có rất nhiều yếu tốt để tạo ra một project tốt như : cấu trúc thư mục rõ ràng, README khá đầy đủ thông tin, có hướng dẫn set up cũng như build, test. Và yếu tố quan trọng nhất của một project tốt phải là code dễ đọc, dễ hiểu và dễ bảo dưỡng .Để bảo vệ những yếu tố đó, sức người không hề làm hết được. Đó là lúc tất cả chúng ta cần đến những công cụ lint .Lint là gì?Lint là gì ?Muốn project có code đủ tốt thì ngay từ khởi đầu cần thiết kế xây dựng những coding convention để mọi người tuân theo. Coding convention thường không giúp code chạy nhanh hơn, nhưng nó giúp duy trì code dễ đọc hơn .Tôi đã trải qua một số ít project, và thực sự việc dùng con người để bảo vệ coding convention là ngoạn mục vì việc làm quá nhiều. Mà, ngay cả con người cũng có lúc sai sót, hoàn toàn có thể bỏ lỡ lỗi này, lỗi kia nếu nó nhỏ trong lúc review. Vì vậy, việc bảo vệ coding convention bằng những công cụ tự động hóa là tốt nhất .Những việc có đặc thù cố định và thắt chặt như vậy, máy tính luôn làm tốt hơn con người. Kết quả vừa đúng mực, vừa nhanh gọn, những developer sẽ có thời hạn hơn trong việc phát minh sáng tạo và viết code cho những tính năng chứ không phải đi soi mói người khác chấm phẩy đã đúng chưa. Công cụ giúp tất cả chúng ta thao tác này gọi là những công cụ lint ( linter ) .Lint là những công cụ giúp tất cả chúng ta nghiên cứu và phân tích code, từ đó đưa ra những yếu tố mà code đang gặp phải như không tuân thủ coding style, sai coding convention. Ngoài ra, lint còn hoàn toàn có thể giúp tất cả chúng ta tìm ra 1 số ít bug tiềm ẩn trong code như gán biến chưa khai báo, hoàn toàn có thể gây lỗi runtime hoặc lấy giá trị từ một biến toàn cục khiến cho việc debug trở nên khó khăn vất vả, v.v…Lint của thể khiến một vài người cảm thấy đau đầu khi mới làm quen, nhưng nó sẽ giúp code rõ ràng hơn. Dần dần, khi trình tăng lên rồi, lint sẽ là một trợ thử rất đắc lực .Tại sao lại là JavaScriptTại sao lại là JavaScriptNếu bạn là một người code NodeJS thì không có gì phải bàn cãi rồi. JavaScript chính là ngôn từ được sử dụng hầu hết, nên tất cả chúng ta cần linter cho nó là đương nhiên .Ở đây, tôi muốn nói đến những dự án Bất Động Sản tăng trưởng web khác, nơi mà rất nhiều ngôn từ khác nhau được sử dụng, từ backend ( Ruby, PHP, Python, v.v… ) cho đến frontend ( HTML, JavaScript, SCSS, v.v… )Trong một dự án Bất Động Sản, toàn bộ những ngôn từ, kể cả HTML và CSS đều phải tuân theo quy tắc thì mới hoàn toàn có thể tạo nên một project tốt được. Không có quy tắc, mọi người code theo những phong thái rất khác nhau sẽ tạo nên một mớ hỗ độn mà người ngoài nhìn vào sẽ chẳng hiểu gì ( thậm chí còn họ còn chẳng muốn đọc ) .Tuy nhiên, trong nội dung bài viết này, đề cập đến toàn bộ những ngôn từ chính là JavaScript. JavaScript hoàn toàn có thể không phải là ngôn từ quan trọng nhất của dự án Bất Động Sản, nhưng tôi hoàn toàn có thể chắn rằng, nó là ngôn từ cần linter nhất .Nguyên nhân đến từ chính bản thân ngôn từ. JavaScript có một phong cách thiết kế tồi, cú pháp của nó là sự pha tạp của Java và C + +, lại trộn lẫn nhiều đặc thù của những ngôn từ script như Ruby, Python .Chưa kể, ngôn từ này được tư vấn trên những trình duyệt khác nhau lại rất khác nhau. Mỗi trình duyệt sử dụng một engine riêng nên có nhiều hàm chạy được trên trình duyệt này lại không chạy được trên trình duyệt khác. Chắc hẳn ai trong số tất cả chúng ta cũng đã từng gặp ác mộng với InteExplorer. Để code hoàn toàn có thể chạy trên nhiều trình duyệt, gần như là bắt buộc là code sẽ phải có những code thừa ngoài logic .Vì sự pha tạp trong cú pháp, JavaScript sống sót rất nhiều yếu tố. Bạn hoàn toàn có thể tìm hiểu thêm thêm ở đây. ES2015 được công bố chỉ giúp làm giảm bớt những yếu tố của nó chứ không hề vô hiệu trọn vẹn. Chưa nói đến hiệu năng những thứ, ngay cả cú pháp của nó khiến nó rất ” mềm dẻo “. Chúng ta hoàn toàn có thể thêm dấu cách, ngắt dòng tuỳ ý, khiến cho nó là ngôn từ hoàn toàn có thể code theo nhiều kiểu nhất trong một project .Vì vậy, khi project tiến triển theo thời hạn, code sẽ tăng dần lên mỗi ngày, mỗi developer lại có những phong thái, ý thích khác nhau khi code, thậm chí còn cùng một người mà nay code một kiểu, mai lại code một kiểu, khiến JavaScript trở thành ngôn từ khó như nhau thuộc loại bậc nhất trong một project .Ngay cả khi đã có coding convention, hai người code cùng một logic vẫn hoàn toàn có thể cho ra những code trông ” chẳng tương quan ” gì đến nhau .Một yếu tố khiến JavaScript khó hoàn toàn có thể duy trì tính thống nhất trong cách code đến từ chính con người. Phần lớn những full stack developer mà tôi biết chỉ mạnh về backend, họ có kỹ năng và kiến thức về frontend nhưng so với backend thì đúng là một trời một vực. Hơn nữa, frontend lại là phần dễ bị xem nhẹ trong project, do mọi người tập trung chuyên sâu nhiều vào performance, tối ưu code, database, v.v… hơn .Gần đây, nhất là sau sự Open của ReactJS khiến JavaScript ngày càng có vai trò quan trọng hơn trong dự án Bất Động Sản. Thay vì chỉ là một phần nhỏ, tương hỗ vài hiệu ứng cho trang đẹp hơn, nay JavaScript đã đảm nhiệm hoàn toàn phần ” hiển thị ” của trang. Nhất là nhiều dự án Bất Động Sản, phần frontend chỉ còn JavaScript và CSS, HTML thuần phần đông không còn được sử dụng .Với những dự án Bất Động Sản như vậy, việc lint JavaScript lại càng thiết yếu hơn khi nào hết .Tại sao chọn ESLint?Tại sao chọn ESLint ?Có rất nhiều công cụ lint JavaScript khác nhau : ESLint, JSLint, JSHint .Có một bài so sánh những công cụ này, những bạn hoàn toàn có thể đọc tìm hiểu thêm. Có thể tóm tắt những công cụ như sau : JSLint rất gò bó, không cho tất cả chúng ta tuỳ chỉnh theo ý mình, JSHint thiếu những chính sách lan rộng ra, JSCS thỉ thích hợp để check coding style .Và sau cuối ESLint là công cụ hài hoà nhất, là lựa chọn tốt nhất cho những project. Nó được cho phép tất cả chúng ta tuỳ chỉnh cầu hình theo coding convention của mình, kiểm tra coding style và tìm ra những bug cũng như những yếu tố tiềm ẩn khác .ESLint lại càng là lựa chọn cực kỳ thích hợp nếu tất cả chúng ta sử dụng ES2015 cũng như JSX ( của React ). Trong số toàn bộ những linter, nó là công cụ tương hỗ ES2015 JSX tốt nhất và là công cụ duy nhất lúc bấy giờ tương hỗ JSX .Tất nhiên là 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ì vậy, trong một số ít dự án Bất Động Sản nó hoàn toàn có thể không phải công cụ thích hợp nhất. Tuy nhiên, quan điểm cá thể của tôi là, nó tương thích với gần hết, nên cứ dùng cũng không sao đâu .Cài đặt và cấu hình ESLintCài đặt và thông số kỹ thuật ESLintESLint hoàn toàn có thể được setup trải qua npm đơn thuần như sauUSD npm install — save-dev eslintKhông nhất thiết phải code NodeJS bạn mới cần sử dụng node và npm. Rất nhiều dự án Bất Động Sản đã sử dụng những package của node để build những thành phần của frontend. Thế nên, có lẽ rằng tôi không cần phải nói thêm về npm nữa, nếu chưa rõ, bạn hoàn toàn có thể tìm hiểu thêm thêm ở đây .Ngoài ra, ESLint còn được cho phép tất cả chúng ta sử dụng những plugin để lan rộng ra hoạt động giải trí của nó. Ví dụ, tôi code ReactJS trong dự án Bất Động Sản của mình, tôi cần cài thêm plugin sau để ESLint hoàn toàn có thể tư vấn cho nó :

$ npm install –save-dev eslint-plugin-reactMột linter tốt chỉ có thể hoạt động nếu chúng ta config nó đúng mà thôi. Nếu không, thay vì phục vụ việc nâng cao chất lượng code của chúng ta, nó lại trở thành một trở ngại khi liên tục đưa ra lỗi cho những chỗ dở hơi.

Xem thêm: Dwt Là Gì – Gt Và Nó Khác Nhau Như Thế Nào

ESLint là công cụ rất mềm dẻo, được cho phép tất cả chúng ta hoàn toàn có thể thông số kỹ thuật nó rất thuận tiện. Mọi thứ tương quan đến coding convention đều hoàn toàn có thể thông số kỹ thuật được. Có hai cách để config cho ESLint, cách tiên phong là comment trực tiếp vào code JavaScript. Kiểu như thế này :/ * eslint quotes :, curly : 2 * / Cách này có một điểm yếu kém là mỗi file, tất cả chúng ta lại phải config một lần, mà nhiều khi lượng comment này là rất lớn do tất cả chúng ta cần config nhiều thứ khác nhau trong convention. Vì vậy cách hiệu suất cao hơn là sử dụng một file config chung vận dụng cho hàng loạt dự án Bất Động Sản. Nhưng tất cả chúng ta vẫn hoàn toàn có thể sử dụng comment trong một vài file nếu những file đó bắt buộc phải code khác quy tắc chung .ESLint sử dụng một file config, có tên là. eslintrc. *, phần lan rộng ra hoàn toàn có thể là js, yaml, yml, json tương ứng với format của file đó, hoặc ghi trực tiếp config vào file package.json .Cá nhân tôi thích sử dụng JSON, nên tôi sẽ thông số kỹ thuật ESLint trong file. eslintrc.json. Sử dụng package.json luôn cho tiện cũng được, nhưng như vậy sẽ làm file đó phình to ra không thiết yếu, nên tôi nghĩ là nên dùng file riêng thì tốt hơn .File config cho ESLint có những thành phần chính như sau :

plugins

Đây là những plugin được sử dụng để mở rộng hoạt động của ESLint. Ví dụ ESLint không hỗ trợ kiểm tra cú pháp JSX thần thánh, thì bắt buộc chúng ta phải sử dụng plugin để kiểm tra các code đó.

{ “plugins”: < "react" >, …}extends

Đây là những config có sẵn được sử dụng, tất cả chúng ta sẽ lan rộng ra chúng bằng cách thêm vào những config của riêng mình. ESLint có một chính sách khá hay được cho phép tất cả chúng ta ” dùng lại ” thông số kỹ thuật của người khác. Ví dụ tôi muốn sử dụng thông số kỹ thuật 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 :{ … ” extends ” : < " eslint : recommended ", " plugin : react / recommended " >, … } Tương tự như vậy, tất cả chúng ta hoàn toàn có thể sử dụng thông số kỹ thuật của mọi người nếu tất cả chúng ta cảm thấy tương thích, ví dụ strongloop ví dụ điển hình. Chúng ta hoàn toàn có thể setup package tương ứng và extends nó thôi. Lưu ý rằng, tất cả chúng ta nên khám phá kỹ về những thông số kỹ thuật có sẵn này, nhiều khi chúng rất tiện, nhưng không tương thích thì cũng không nên dùng, kể cả những thông số kỹ thuật ” recommended ” .

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 tất cả chúng ta extends một thông số kỹ thuật nào đó thì không cần config lại nữa. Ở đây, tất cả chúng ta chỉ cần config thêm những rules mà tất cả chúng ta cần tuỳ chỉnh mà thôi .Mỗi rules cần được config hai 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 cho ngắn gọn ) và những tuỳ chọn. Rules ở đây hoàn toàn có thể là rules do ESLint phân phối sẵn hoặc rules của plugin .Ví dụ, rules sau nhu yếu vận dụng single quote ” cho những string trong code, và kiểm tra việc import React có đúng hay không, nếu không sẽ báo lỗi với exit code là 1 .{ … ” rules ” : { ” quotes ” : < 2, " single " >, ” react / jsx-uses-react ” : 2, … } … } Lượng rules mà ESLint tư vấn là rất lớn, gần như là hàng loạt những yếu tố của code đều được tư vấn cả, chưa kể plugin còn lan rộng ra hơn nữa. Bạn hoàn toàn có thể xem hàng loạt rules của ESLint ở đây .

parserOptions

Mặc định, ESLint kiểm tra cú pháp của ES5, nếu sử dụng ES6 hoặc những phiên bản mới hơn, tất cả chúng ta phải thông số kỹ thuật bằng parserOptions. Ngoài ra, việc tư vấn JSX cũng cần phải thông số kỹ thuật ở đây. Cấu hình hàng loạt cho phần này như sau :

{ … “parserOptions”: { “ecmaVersion”: 6, “sourceType”: “module”, “ecmaFeatures”: { “jsx”: true } }, …}env

Đây là nơi thông số kỹ thuật môi trường tự nhiên mà code của tất cả chúng ta sẽ chạy. Môi trường khác nhau thì sẽ có những biến toàn cục khác nhau. Ví dụ, môi trường tự nhiên browser thì sẽ có những biến như window, document, thiên nhiên và môi trường es6 sẽ có 1 số ít loại tài liệu mới như Set ví dụ điển hình .

{ … “env”: { “browser”: true, “es6”: true }, …}globals

Đây là nơi tất cả chúng ta đưa ra list những biến global dùng trong dự án Bất Động Sản. Nếu không, khi tất cả chúng ta truy vấn vào một biến nào đó, ESLint sẽ báo lỗi vì truy vấn đến một biến chưa được định nghĩa .Biến global hoàn toàn có thể được định nghĩa bằng comment trong chính file cũng được, hoặc list hàng loạt ở trong file config cũng được .Một số biến global không cần định nghĩa lại ( như window, document ) nếu env đã giúp định nghĩa nó rồi .JavaScript có một object chứa tài liệu được truyền vào cho hàm là arguments mà không thấy môi trường tự nhiên nào định nghĩa nó. Nếu muốn sử dụng object này, tất cả chúng ta phải đưa nó vào trong globals của config .{ … ” globals ” : { ” arguments ” : true, … } } Ngoài những phần chính như đã trình diễn, ESLint còn rất nhiều config khác. Bạn tìm hiểu thêm thêm ở đây để biết thêm chi tiết cụ thể về việc tuỳ chỉnh ESLint theo đúng ý của mình .

Example

Dưới đây là hàng loạt thông số kỹ thuật của ESLint mà tôi đang sử dụng để lint code React ( Redux ) .{ ” plugins ” : < " react " >, ” extends ” : < " eslint : recommended ", " plugin : react / recommended " >, ” rules ” : { ” indent ” : < 2, 2, { " SwitchCase " : 1 } >, ” linebreak-style ” : < 2, " unix " >, ” quotes ” : < 2, " single " >, ” semi ” : < 2, " always " >, ” curly ” : < 2, " all " >, ” camelcase ” : < 2, { " properties " : " always " } >, ” eqeqeq ” : < 2, " smart " >, ” one-var-declaration-per-line ” : < 2, " always " >, ” new-cap ” : 2, ” no-case-declarations ” : 0 }, ” parserOptions ” : { ” ecmaVersion ” : 6, ” sourceType ” : ” module “, ” ecmaFeatures ” : { ” jsx ” : true } }, ” env ” : { ” browser ” : true, ” es6 ” : true }, ” globals ” : { ” arguments ” : true } } Áp dụng ESLint vào dự ánSau khi đã config cho ESLint xong xuôi, việc làm còn lại của tất cả chúng ta là vận dụng nó vào dự án Bất Động Sản, làm nó hoạt động giải trí đúng như công dụng của một linter .Trước hết, tất cả chúng ta 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 nhờ vào vào từng project. Nếu là một project NodeJS thì tất cả chúng 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 project web thường thì thì hoàn toàn có thể đặt tên script sao cho dễ nhớ là được .Sau khi có script rồi thì mỗi khi cần gọi ESLint, tất cả chúng ta chỉ cần đơn thuần :USD npm run eslint > eslint / absolute / path / to / package > eslint — fix path / to / src / absolute / path / to / file.js 14 : 8 error ” moment ” is defined but never used no-unused-vars 163 : 30 error ” states ” is missing in props validation react / prop-types ✖ 2 problems ( 2 errors, 0 warnings ) Nếu chưa sử dụng linter lần nào, hoặc với những người ít kinh nghiệm tay nghề, hoàn toàn có thể mỗi lần chạy lint sẽ là một ( vài ) trang màn hình hiển thị đầy lỗi. Với người yếu tâm ý hoàn toàn có thể bị shock và chán nản không muốn code gì nữa .Rất may với ESLint, họ đã giúp tất cả chúng ta xử lý ( một phần ) yếu tố. ESLint hoàn toàn có thể tự động hóa sửa một vài lỗi tự động hóa với cách thêm option — fix, tất cả chúng ta hoàn toàn có thể thêm option này vào ngay script ở trên, hoặc gọi nó bằng tayUSD npm run eslint — — fixESLint hoàn toàn có thể sữa rất nhiều lỗi, nhưng không hề sửa hết được. Nó chỉ hoàn toàn có thể sữa những code nào mà bảo vệ không tác động ảnh hưởng đến hoạt động giải trí mà thôi. Tuy nhiên, nó đã giúp sức tất cả chúng ta rất nhiều, tối thiểu thì số lượng lỗi đã giảm đáng kể, nhìn vào sẽ thấy có tương lai hơn .Nếu muốn một công cụ sữa lỗi mạnh hơn, bạn hoàn toàn có thể sử dụng prettier ( tìm hiểu thêm ). Đây là công cụ chuyên về format code nên nó mạnh hơn ESLint trong việc sữa lỗi. Sử dụng phối hợp ESLint và prettier sẽ cho tác dụng rất tốt ( dù không hề sữa hết 100 % lỗi được ) .Tự động hoá mọi việcTự động hoá mọi việcPhần trên, tôi đã trình diễn cách vận dụng ESLint vào dự án Bất Động Sản, bằng cách gõ lệnh mỗi khi cần. Một ngày mà phải gõ cùng một lệnh hàng chục lần thì đúng là chán không hề tả, tối thiểu là so với tôi. Vì vậy, nếu có một phương pháp tự động hoá mọi việc thì thật là hoàn hảo nhất .Sau khi khám phá thì tôi đã tìm ra một cách, đó là sử dụng git hook pre-commit. Sử dụng git hook sẽ giúp tất cả chúng ta chạy ESLint mỗi khi commit. Nếu đã từng sử dụng git hook pre-commit rồi thì bạn chỉ cần sửa file. git / hooks / pre-commit nữa là xong, nếu không thì tất cả chúng ta cần tạo ra file đó .Cách thuận tiện nhất là sử dụng file mẫu cho chính git phân phối :USD cp. git / hooks / pre-commit.sample. git / hooks / pre-commitNội dung file sẽ có hai dòng cuối như sau :# If there are whitespace errors, print the offending file names and fail.exec git diff-index — check — cached USD against — Chúng ta sẽ thêm lệnh gọi ESLint như sau :set – enpm run eslint # If there are whitespace errors, print the offending file names and fail.exec git diff-index — check — cached USD against — Vậy là giờ đây, mỗi lần commit, ESLint sẽ được gọi, trọn vẹn tự động hóa :USD git commit – m ” WIP ” > eslint / absolute / path / to / package > eslint — fix path / to / src WIP 1 file changed, 3 insertions ( + ), 3 deletions ( – ) Ngoài ra, hoàn toàn có thể tất cả chúng ta vẫn sử dụng watchify để theo dõi những biến hóa trong code và tự động hóa build lại. Tuy nhiên, watchify thì rất khó để gọi ESLint mỗi khi đổi khác. Nếu muốn, tất cả chúng ta phải chuyển sang sử dụng những công cụ build khác kiểu như gulp hoặc grunt .Hai công cụ này được cho phép tất cả chúng ta tuỳ chỉnh rất nhiều, chúng có chính sách được cho phép chạy nhiều hơn một task khi có file biến hóa. Nhược điểm là watchify có chính sách cache khiến việc build code khi có đổi khác nhanh hơn rất nhiều, sử dụng gulp hay grunt việc build code sẽ luôn luôn là triển khai lại từ đầu nên mất nhiều thời hạn hơn. ( Mặc dù vậy, chính sách cache của watchify lại gặp một số ít yếu tố khi thêm, xoá bớt file. )Một công cụ khác mới nổi là webpack cũng được cho phép tất cả chúng ta sử dụng gọi eslint rất tiện, bằng cách sử dụng eslint-loader .

Việc config những công cụ này là một vấn đề khác, nằm ngoài phạm vi bài viết này nên tôi sẽ không trình bày nhiều ở đây. Lưu ý rằng, khác với việc sử dụng git hook, việc sử dụng những công cụ này sẽ áp dụng cơ chế tự động hoá với toàn bộ dự án, dù nó rất tốt nhưng không phải ai cũng thích điều đó. Nên nếu muốn áp dụng, bạn nên tìm sự thống nhất ý kiến với các đồng nghiệp.

Xem thêm: Năm 2012 Là Năm Con Gì

Kết luậnKết luậnESLint là một công cụ tuyệt vời, hãy sử dụng tiếp tục. Hy vọng bài viết sẽ giúp ích phần nào cho những bạn và những bạn code ngày càng đẹp hơn .
Chuyên mục: Chuyên mục : Hỏi Đáp

Rate this post
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments