摘要:工具幫助避免在編寫時出現愚蠢的錯誤。并不檢測潛在的,比如,未使用的變量或意外的全局變量等。在提到的所有工具中,它具有最廣泛的功能支持。使用工具是捕獲問題的良好步驟,但只能看到規則允許的錯誤。也可用于此目的。
Lint工具幫助避免在編寫JavaScript時出現愚蠢的錯誤。盡管有多年的經驗,我仍然鍵入不正確的變量名稱,出現語法錯誤,以及忘記正確地處理error。在浪費自己時間,或更糟糕地浪費客戶時間之前,一個很好的lint工具,或者一個linter會告訴我這個錯誤。一個很好的lint工具也可以幫助確保一個項目符合編碼標準。
JavaScript有很多linter,但是選擇哪一個呢?我們來看看JSLint,JSHint,JSCS和ESLint這四種流行替代方案的特點和利弊。
概覽這四個工具基本的工作方式都是一樣的。他們有一套規則,用于分析和報告JavaScript文件中的問題。都可以通過npm安裝。它們通過傳遞文件從命令行使用,或者作為插件工具(如Grunt中)使用,也可以集成到編輯器中。他們都支持使用注釋進行配置。
以上是它們的相同點。每個工具都有自己的優點和不足,而且只是部分工具比其他的更有優勢。
JSLintJSLint是四個中最老的。道格拉斯·克羅克福德(Douglas Crockford)在2002年創建,依據自己的最佳實踐 - JavaScript的good parts部分。如果你贊成good parts,JSLint可以是一個很好的工具,即裝即用。
缺點是JSLint不可配置或擴展。你根本無法禁用許多功能,其中一些缺少文檔。官方網站不是很有幫助,例如,它沒有任何關于如何將其與編輯器集成的信息。
優點
即裝即用(如果您同意其執行規則的話)
缺點
JSLint沒有配置文件,如果需要更改設置,可能會出現問題
配置選項數量有限,許多規則無法禁用
不能添加自定義規則
無文檔
很難知道哪個規則導致哪個錯誤
JSHintJSHint被創建為一個可配置的JSLint版本(它是一個fork)。可以配置每個規則,并將它們放入一個配置文件中,這使得JSHint易于在更大的項目中使用。 JSHint還為每個規則提供了良好的文檔,因此您可以確切了解它的工作。將其集成到編輯器中也很簡單。
JSHint的一個小缺點是它具有寬松的默認配置。這意味著您需要做一些設置才能使其更為有用。當與ESLint進行比較時,為了啟用或禁用某些錯誤消息,還需要知道哪些規則需要更改。
優點
大多數設置可以配置
支持配置文件,使其更容易在較大的項目中使用
支持許多開箱即用的庫,如jQuery,QUnit,NodeJS,Mocha等
基本的ES6支持
缺點
很難知道哪個規則導致錯誤
有兩種類型的選項:強制和寬松(可用于使JSHint更嚴格或抑制其警告)。這可能使配置稍有混亂
沒有自定義規則支持
JSCSJSCS的不同之處在于它不會做任何事情,除非你給它一個配置文件或使用一個預設。可以從它的網站下載配置,所以這不是一個大問題,它有一些預設,如jQuery編碼風格預設和Google預設。
它有超過90種不同的規則,您可以使用插件創建自定義的規則。 JSCS還支持自定義reporter,這使得其更容易與需要以特定格式輸入的工具集成。
JSCS是一個代碼樣式檢查器。這意味著它只捕獲與代碼格式相關的問題,而不識別潛在的bug或錯誤。因此,它比其它的工具靈活性更低,但是如果您需要強制執行特定的編碼風格,那么JSCS就可以做到這一點。
優點
支持自定義reporter,可以使其更容易與其他工具集成
如果您遵循一種可用的編碼風格,預設和現成的配置文件可以讓它更容易設置
在報告中有一個標志包含規則名稱,所以很容易找出哪個規則導致了特定的錯誤
可以使用定制插件擴展
缺點
只檢測編碼風格問題。 JSCS并不檢測潛在的bug,比如,未使用的變量或意外的全局變量等。
四個中最慢,但在通常使用中這不是問題
ESLintESLint是四者中最晚出現的。它被設計為易于擴展,具有大量的自定義規則,并且可以容易的以插件的形式安裝更多特性。它提供簡潔的輸出,但默認包括規則名稱,因此你始終知道導致錯誤消息的規則。
ESLint文檔可能會很少被點擊甚至于錯過。規則列表易于遵循,并且分文別類,但配置說明在某些地方有點混亂。不過,它提供了鏈接,編輯器集成、插件和示例都在一個單一的位置。
優點
靈活:任何規則都可以切換,許多規則都有額外的設置可以調整
極具擴展性,并有許多插件可用
易于理解輸出
包括許多其他linter不可用的規則,使ESLint對偵測問題更加有用
最好的ES6支持,也是唯一支持JSX的工具
支持自定義reporter
缺點
需要一些配置
慢,但不是問題
我的建議這四個中我選擇ESLint。 JSLint嚴格且不可配置,而JSHint缺乏擴展機制。如果您只想檢查編碼風格,則JSCS是一個不錯的選擇,但是ESLint也能做到,而且它會檢查代碼中的bug和其他問題。
如果您想使用ES6(或ES2015,貌似現在這樣稱呼),ESLint也是一個顯而易見的選擇。在提到的所有工具中,它具有最廣泛的ES6功能支持。
如果你想嘗試ESLint,我已經創建了一個5步快速入門指南,讓使用變得非常簡單。您可以從我的網站下載ESLint 5步快速入門指南。
JSHint是強大的第二選擇。如果您不需要ESLint的高級功能,JSHint會在正確配置后捕獲很多問題。如果您不需要除編碼樣式檢查(縮進、大括號等)之外的任何功能,擁有大量可用規則的JSCS會是一個首選。
我一點也不推薦JSLint。其它工具可以做同樣的事情,但不強加任何特定的規則給用戶。唯一的例外是如果你碰巧同意它執行的所有規則,這種情況下,你可以使用它。
使用lint工具是捕獲問題的良好步驟,但只能看到規則允許的錯誤。如若需要一個更簡單的自動化bug捕獲器,我建議使用單元測試。code review也可用于此目的。
你和你的團隊如何確保代碼的質量呢?
原文地址:https://www.sitepoint.com/com...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84909.html
摘要:看到很多團隊和開源項目都在用代碼檢查工具,自己一直沒用過,最近加入了新團隊有項目在用,就想著研究一下。代碼校驗工具能夠讓你在寫代碼時避免一些低級的錯誤。同時,也有友好的文檔針對每一條規則。在上文提高的所有工具當中它對有著最好的支持。 看到很多團隊和開源項目都在用代碼檢查工具,自己一直沒用過,最近加入了新團隊有項目在用,就想著研究一下。看到sitepoint上的一篇2015年的文章覺得不...
摘要:本文假設你之前沒有用過任何任務腳本和命令行工具,一步步教你上手。如果這兩行命令沒有得到返回,可能就沒有安裝正確,嘗試重啟下命令行工具,如果還不行的話,只能回到第一步進行重裝。 本文假設你之前沒有用過任何任務腳本(task runner)和命令行工具,一步步教你上手Gulp。不要怕,它其實很簡單,我會分為五步向你介紹gulp并幫助你完成一些驚人的事情。那就直接開始吧。 第一步:安裝No...
摘要:在對比我最近幾個月所用的開發工具后,我發現了一些驚人的東西。永遠不停止使用。將警告未使用的代碼。預檢查使用,,和非常有用。不再需要使用開啟服務器,創建應用程序,并打開瀏覽器。嘗試使用別的東西,立即出現錯誤。 原文:Supercharging Frontend Development with VS Code 作者:zachcodes 過去幾天,為了在開發 GraphQL / Rea...
摘要:我們已經運用了的一些閃亮的新特性,那么如何才能轉化為的代碼呢首先,我們需要通過來安裝在全局安裝會提供我們一個命令行工具。 你是不是也在為可以使用ES6的新特性而興奮,卻不太確定應該從哪開始,或者如何開始?不止你一個人這樣!我已經花了一年半的時間去解決這個幸福的難題。在這段時間里 JavaScript 工具鏈中有幾個令人興奮的突破。 這些突破讓我們可以用ES6書寫完全的JS模塊,而不會為...
摘要:語法校驗會給出警告當你仍在使用或不通過任何關鍵字聲明變量時。但是如果腳本中還有其他的普通導出,就會得到非常奇怪的結果這個坑爹的情況目前還沒有任何好的解決方案。 我在多年前愛上了coffeScript。對于javaScript,我一直保持著深沉的愛,也十分高興得看到node.js的快速發展,但是作為一個有python背景的程序員,我更喜歡coffeeScript的簡練語法。 在任何一個活...
閱讀 822·2023-04-25 19:49
閱讀 3757·2021-09-30 09:47
閱讀 2742·2021-09-13 10:21
閱讀 2681·2021-08-24 10:04
閱讀 3169·2019-08-30 15:55
閱讀 2297·2019-08-30 15:55
閱讀 2400·2019-08-30 15:54
閱讀 3472·2019-08-30 13:53