JavaScript代碼檢查工具 — JSHint
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
![]() ![]() 靜態(tài)代碼檢查是開發(fā)工作中不可缺少的一環(huán),畢竟對(duì)于程序化的工作人的眼睛是不可靠的,更何況是自己的眼睛看自己的代碼。即使最后的運(yùn)行結(jié)果通過,但可能存在一些未定義的變量、定義了但最后沒用過的變量、分號(hào)有沒有加(看團(tuán)隊(duì)規(guī)則)以及其他的問題。給力的工具必不可缺。 在本文要介紹的JSHint之前還有JSLint,道格拉斯的作品,應(yīng)該是JavaScript精粹的附屬產(chǎn)物。。。要求你必須使用它的規(guī)則,對(duì)于JavaScript這樣一個(gè)靈活的語(yǔ)言,還是要用一個(gè)靈活的工具,JSHint就是就是這樣。 安裝首先需要安裝了Nodejs和npm,然后 npm install -g jshint 就好了。 這樣你就可以使用命令行使用JSHint了。 當(dāng)然他也提供了巨多的編輯器插件,比如Sublime Text 3。 以及Grunt或者Gulp之類的插件。 配置安裝完了就可以使用了。 命令行下直接: jshint myfile.js 就ok,命令行里就可以顯示錯(cuò)誤或者警告。 編輯器下一般直接顯示在出錯(cuò)或者警告的行數(shù)處。比如Sublime3 下,在當(dāng)前文件下,快捷鍵 Ctrl+Alt+J 就會(huì)顯示信息( Ctrl+Alt+C 關(guān)閉信息顯示): 更多快捷鍵看插件的設(shè)置,可以自定義。 不過這些顯示都是JSHint默認(rèn)的配置,我們可以自定義配置更好的滿足需求。 也很簡(jiǎn)單,在項(xiàng)目根目錄下建立一個(gè) .jshintrc 文件,這個(gè)文件就是JSHint的配置文件,JSHint會(huì)自動(dòng)識(shí)別這個(gè)文件,根據(jù)這里面的規(guī)則對(duì)你的文件進(jìn)行檢查。 (windows下建立前面帶點(diǎn)的文件會(huì)不讓建立,一種方法直接在Sublime Text里建立,另一種方法在文件名后加個(gè)點(diǎn)即可) JSHint的配置分為四類: 1、Enforcing:如果這些屬性設(shè)置為true,表明這個(gè)代碼風(fēng)格夠嚴(yán)格的,比如是否使用嚴(yán)格(strict)模式、變量駝峰式命名、是不是for-in循環(huán)里必須得有hasOwnProperty等等 2、Relaxing:比如是否使用分號(hào),是否支持下一代ES語(yǔ)法等等。 3、Environments:你的代碼所在的環(huán)境(Nodejs、瀏覽器、jQuery。。) 4、自定義的全局屬性,比如我司的NEJ和Regular,這兩個(gè)全局變量JSHint是不知道的,放在這里JSHint不會(huì)報(bào)出錯(cuò)誤信息。 默認(rèn)的JSHint的配置看這里:JSHint默認(rèn)配置(Sublime插件自定義了默認(rèn)的配置,你可以在插件的配置里看到,甚至可以直接修改它) 對(duì)這些配置的講解:配置詳解 都是英文的,不過配合著四六級(jí)的水平和有道翻譯,基本木有問題。下面是一個(gè)簡(jiǎn)單的配置示例。 { "strict" : false, "undef" : true, "unused" : true, "asi" : true, "evil" : false, "browser": true, "devel": true, "globals" : { "NEJ": true, "Regular": true } }
有時(shí)候,我們不希望它檢查一些文件(比如一些庫(kù)文件),這時(shí)候可以新建一個(gè) .jshintignore 文件,把需要忽略的文件名寫在里面(支持通配符),同樣放到項(xiàng)目根目錄下即可。 build/ src/**/tmp.js
自定義ReporterJSHint源碼里有一個(gè)reporter.js,定義錯(cuò)誤提示信息改怎樣輸出,同樣可以自定義。默認(rèn)的是這樣的: "use strict"; module.exports = { reporter: function (res) { var len = res.length; var str = ""; res.forEach(function (r) { var file = r.file; var err = r.error; str += file + ": line " + err.line + ", col " + err.character + ", " + err.reason + "\n"; }); if (str) { process.stdout.write(str + "\n" + len + " error" + ((len === 1) ? "" : "s") + "\n"); } } }; 基本的格式就是: module.exports = { reporter: function (reporter) { //.... } }; 每個(gè)reporter都符合一定的格式: { file: [string, filename] error: { id: [string, usually '(error)'], code: [string, error/warning code], reason: [string, error/warning message], evidence: [string, a piece of code that generated this error] line: [number] character: [number] scope: [string, message scope; usually '(main)' unless the code was eval'ed] [+ a few other legacy fields that you don't need to worry about.] } } 比如你可以讓他不輸出到控制臺(tái)而是打印到txt文件里(不知為何異步寫入文件一直不成功,最后只好用同步函數(shù)): 'use strict'; var fs = require('fs'); module.exports = { reporter: function (res) { var len = res.length; var str = ''; var filename = ''; res.forEach(function (r, i) { filename = r.file; var err = r.error; if(i === 0) str += filename + '\n'; str += 'line ' + err.line + ', col ' + err.character + ', ' + err.reason + '\n'; }); if (str) { var output = str + '\n\n'; fs.writeFileSync('message.txt', output); } } }; 命令行執(zhí)行: jshint --reporter=myreporter.js myfile.js 同樣可以更近一步,如果你想一下把所有該檢查的文件全都檢查了,然后將檢查結(jié)果保存到txt里: // code-check.js // reporter.js 只要 node code-check 就可以了。 不過,Sublime插件下不知道如何自定義。
APIJSHint暴漏了一些接口,既可以在瀏覽器也可以在Nodejs中使用。 瀏覽器下首先加載jshint.js文件: <script src="node_modules/jshint/dist/jshint.js"></script> 首先檢查js語(yǔ)句是否存在錯(cuò)誤: var result = JSHINT(source, options, predef) source是你要檢查的代碼,可以是字符串,也可以是數(shù)組,數(shù)組的話每一項(xiàng)代表一行代碼。 options也上面說(shuō)過的配置項(xiàng),但不包括Globals predef是上面說(shuō)過的Globals 當(dāng)result返回false的時(shí)候,代表語(yǔ)句中有錯(cuò)誤,這時(shí)候調(diào)用 JSHINT.data() 就會(huì)得到錯(cuò)誤的詳細(xì)信息,看下面的示例: var source = [ 'function() { console.log("a") }', 'x = 3' ] var options = { undef: true } var predef = { x: true } var result = JSHINT(source, options, predef) console.log(JSHINT.data()) 瀏覽器的控制臺(tái)就會(huì)輸出錯(cuò)誤的詳細(xì)信息,這樣我們甚至可以做一個(gè)錯(cuò)誤報(bào)告出來(lái),就像公司內(nèi)部的代碼檢查平臺(tái) 一樣。 不過有個(gè)問題,不可能我們把代碼一行一行的敲到參數(shù)里,ajax或者服務(wù)器端請(qǐng)求都行,看這里。 所以嘛,還是在node環(huán)境下使用最方便: // check.js 使用的時(shí)候 node check a.js b.js c.js 最后在控制臺(tái)輸出錯(cuò)誤。
有時(shí)候掌握一個(gè)工具工作效率會(huì)提高很多倍,學(xué)會(huì)做一個(gè)懶人。 ?該文章在 2025/7/29 16:37:48 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |