JSHint腐巢,發(fā)現(xiàn)錯誤和潛在問題的社區(qū)驅(qū)動的工具
JSLint 錯誤解析[1]
一身冬、安裝nodejs的jshint
安裝Node.js環(huán)境
jshint其功能實現(xiàn)需要node.js支持,所以去node.js官網(wǎng)單擊找到當(dāng)前平臺的版本進行下載安裝卒茬。
安裝nodejs的jshint[2] csshint
$ npm install -g jshint
$ npm install -g csshint
#測試
$ jshint -v
$ csshint -v
#單獨使用校驗測試
$ jshint myfile.js
myfile.js: line 10, col 39, Octal literals are not allowed in strict mode.
1 error
二船老、sublime中的jshint安裝配置
方式一咖熟、 使用Sublimelinter,支持css等多種語言驗證
通過sublime的package control安裝Sublimelinter
在sublime中按下Cmd+Shift+P打開命令查找窗口柳畔,輸入pci找到packge control install回車
稍等等待彈出package查找窗口馍管,輸入Sublimelinter,按下回車安裝薪韩。
然后使用同樣方法安裝SublimeLinter-jshint确沸、SublimeLinter-csshint。
此時俘陷,一般情況下罗捎,你打開編輯器,查看js文件會發(fā)現(xiàn)拉盾,已經(jīng)有了語法校驗宛逗。
查看SublimeLinter-jshint設(shè)置,右鍵 -> Sublimelinter -> Open User Settings
禁用Sublimelinter-jshint ,右鍵 -> Sublimelinter -> Toggle Linter 回車即可切換 啟用狀態(tài)
方式二盾剩、使用Sublime JSHint Gutter雷激,僅支持js驗證
在sublime中按下Cmd+Shift+P打開命令查找窗口,輸入pci找到packge control install回車告私,稍等等待彈出package查找窗口屎暇,輸入js gutter,按下回車安裝驻粟。
JS Gutter配置
js gutter默認(rèn)未開啟檢查根悼,設(shè)置編輯,加載或保存時自動檢查
右鍵 -> JSHint -> Set Plugin Options 將對應(yīng)設(shè)置的false改為true即可開啟檢查
{
"lint_on_edit": true,
"lint_on_load": true,
"lint_on_save": true
}
三蜀撑、jshint的檢查規(guī)則的三種配置方式[3]
1. 自定義.jshintrc文件
一般.jshintrc文件放置在模塊根目錄挤巡,如果沒有找到,會一直向上及目錄查找酷麦,直到找到文件系統(tǒng)的根目錄/矿卑,如果沒找到采用默認(rèn)規(guī)則。
2. 配置放到項目的 package.json 文件里面沃饶, jshintConfig 下面
3. 內(nèi)聯(lián)配置(Inline configuration)
在js文件中的注釋中配置例如:
/* jshint undef: true, unused: true */
/* globals MY_GLOBAL */
四母廷、在Sublimelinter或者JSHint Gutter中配置.jshintrc
JSHint Gutter 右鍵 -> JSHint -> set Linting Preference 默認(rèn).jshintrc文件
Sublimelinter 右鍵 -> Sublimelinter -> Open User Settings 指定.jshintrc文件路徑
五、.jshintrc配置中文詳細(xì)定義[4]糊肤,官方配置列表[5]
1. 強制選項(Enforcing options) 如果設(shè)為true會產(chǎn)生更多錯誤提示
{
"bitwise": true , //禁用位運算符琴昆,位運算符&在 JavaScript 中使用較少,經(jīng)常是把 && 錯輸成 &
"curly": true , //循環(huán)或者條件語句必須使用花括號包圍
"eqeqeq": true , //強制使用三等號
"es3": true , //兼容低級瀏覽器 IE 6/7/8/9
"freeze": true , //禁止重寫原生對象的原型馆揉,比如 Array业舍,Date
/*
Array.prototype.count = function (value) { return 4; };
// -> Warning: Extending prototype of native object: 'Array'.
為原生對象添加屬性確實看上去很方便,但也帶來了潛在的問題
一是如果項目中有多處為同一個對象添加了同樣的屬性(或函數(shù)),則很可能產(chǎn)生沖突舷暮;
二是如果某段邏輯依賴于對象屬性遍歷蟋座,則可能產(chǎn)生錯誤。
*/
"immed": true,
/** 匿名函數(shù)調(diào)用必須
(function() {
// body
}());
而不是
(function() {
// body
})();
這是為了表明脚牍,表達式的值是函數(shù)的結(jié)果向臀,而不是函數(shù)本身
*/
"indent": 4 , //代碼縮進
"latedef": "nofunc" , //禁止定義之前使用變量,忽略 function 函數(shù)聲明
"newcap": true , //構(gòu)造器函數(shù)首字母大寫
"noarg":true , //禁止使用 arguments.caller 和 arguments.callee诸狭,未來會被棄用券膀, ECMAScript 5 禁止使用 arguments.callee
"quotmark": false , //為 true 時,禁止單引號和雙引號混用
"undef": true , //變量未定義
"unused": true , //變量未使用
"strict":true , //嚴(yán)格模式
"maxparams": 4 , //最多參數(shù)個數(shù)
"maxdepth": 4 , //最大嵌套深度
"maxcomplexity":true , //復(fù)雜度檢測
"maxlen": 600 , //最大行數(shù)
"predef": [
"before",
"beforEach",
"after",
"afterEach",
"-toberemoved"
] // 用來自定義一些環(huán)境變量驯遇,變量前面有有-號表示從環(huán)境中移除次變量
//預(yù)定義變量為ReadOnly 不能在js文件的注釋中使用
}
2. 寬松選項(Relaxing options) 如果設(shè)為true會產(chǎn)生較少錯誤提示
{
"asi": true , //控制“缺少分號”的警告
"boss": true , //控制“缺少分號”的警告
"debug": true ,//"debug": true
"evil": true , //控制 eval 使用警告
"lastsemic": true ,//檢查一行代碼最后聲明后面的分號是否遺漏
"laxcomma": true , //檢查不安全的折行芹彬,忽略逗號在最前面的編程風(fēng)格
"loopfunc": true , //檢查循環(huán)內(nèi)嵌套 function
"multistr": true ,//檢查多行字符串
"notypeof": true , //檢查無效的 typeof 操作符值
"sub": true , //person['name'] vs. person.name
"supernew": true , //new function () { ... } 和 new Object;
"validthis": true //在非構(gòu)造器函數(shù)中使用 this
}
3. 環(huán)境(Environments)
{
"browser": true ,//預(yù)定義全局變量 document,navigator叉庐,F(xiàn)ileReader 等
"devel": true , //定義用于調(diào)試的全局變量:console舒帮,alert
"jquery": true, //定義全局變量 $
"node": true, //定義全局變量 module export等
}