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