如何利用JSHint減少JavaScript的錯誤
前言
JSHint用于分析和驗證JavaScript代碼是否符合您的編碼規(guī)則。這個強大的工具可以幫助發(fā)現(xiàn)您代碼中錯誤和問題T,它強制你的團隊保持一定的編碼慣例和風格,使得代碼可靠和更容易閱讀.
在這篇文章中,我將向您展示如何安裝、配置和使用JSHint。 還包括一個例子,列出了一些我最喜歡的能使用JSHint的編輯器。
安裝 JSHint
安裝JSHint非常容易,你可以使用 Node 包管理器 (npm)來做。如果你還沒有安裝npm,你可以從 nodeJS website下載最新版,來安裝Node.js 和npm.
一旦安裝后npm,你就可以使用如下命令來安裝JSHint:
npm install jshint -g
-g
參數(shù)是告訴npm
我們要全局安裝,這樣我們就能在任何目錄下調用這個命令。
通過命令行檢查代碼
現(xiàn)在JSHint 已經(jīng)安裝好了,讓我們在命令行方式下使用jshint
來分析一個JavaScript代碼文件。
下面是一個文件名為 demo1.json的文件:
我們使用如下命令來分析代碼:
jshint demo1.js
JSHint告訴我們在demo1.js文件的第8行有一個錯誤,原因:缺少一個分號。
如果我們補上缺少的分號,再次運行這個命令,就不會有任何錯誤信息輸出了。
配置JSHint
JSHint有一個默認的配置來分析您的代碼,但它的配置設置被設計的非常靈活。 有四種方式來為JSHint提供配置處理文件。
一種方式是使用 --config
參數(shù)來指定配置文件:
jshint demo1.js --config config.json
另一種方式是把配置放入一個叫.jshintrc的文件里, 因為 JSHint 會在同級目錄下搜索這個配置文件用于代碼分析,如果沒有找到,它會繼續(xù)上級目錄查找直到根目錄 ,這樣就允許我們對一個工程設置不同的配置文件。
第三種方式是在 package.json 文件的 jshintConfig 屬性下放入配置信息。
這三種方法中的任何一種,配置信息都是JSON格式指定每一個參數(shù)來告訴JSHint選項是打開或關閉。例如:在下面的配置文件中的“unused” 和“undef” 是來激活未使用和未定義變量的告警。 “curly” 要求您總是在循環(huán)和條件塊加上大括號。 “eqeqeq” 表示禁止使用 == 和!= 而應該使用 === and !==.?!癵lobals” 用于指定沒有定義在代碼中的全局變量白名單。
第四種方式是以注釋的方式將配置信息寫入代碼文件中。
你可以查看不同的配置選項控制JSHint的行為。
一個小例子
接下來,讓我們操作一下在上面提到的config.json配置文件中的選項。 假設我們有如下的一個 JavaScript 文件,這只是一小段僅供學習的代碼。
如果我們執(zhí)行jshint 命令demo2.js --config config.json
,我們會得到如下的結果:
在我們的代碼中有4個錯誤。在第9行JSHint提示應該用大括號包裹 “if” 代碼塊。 定義了變量subscription_id
但沒有使用。 在第9行和11行, “confirm” 和“console” 沒有定義。
我們只需稍微修改就能避免前兩個錯誤:
現(xiàn)在,讓我們在 config.json文件中添加一個 devel 選項并設為 true,這樣JSHint 就能識別出“confirm” 和“console” 。
至此,如果我們再次運行 jshint 命令,就沒有任何錯誤了。
總結
JSHint是一個減少代碼錯誤的非常好的工具。很多編輯器都提供JSHint支持。剛興趣的朋友可以再深入研究JSHint,以上就是利用JSHint減少JavaScript錯誤的全部內容,希望對大家使用Javascript能有所幫助。
相關文章
EXT中單擊button按鈕grid添加一行(光標位置可設置)的實例代碼
這篇文章主要介紹了EXT中單擊button按鈕grid添加一行(光標位置可設置)的實例代碼 的相關資料,需要的朋友可以參考下2016-06-06Javascript document.referrer判斷訪客來源網(wǎng)址
用簡單幾行的javascript,就可抓到使用的來源,以及作出一些防范的措施。2009-12-12Highcharts 多個Y軸動態(tài)刷新數(shù)據(jù)的實現(xiàn)代碼
下面小編就為大家?guī)硪黄狧ighcharts 多個Y軸動態(tài)刷新數(shù)據(jù)的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05js通過var定義全局變量與在window對象上直接定義屬性的區(qū)別說明
這篇文章主要介紹了js通過var定義全局變量與在window對象上直接定義屬性的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09