一、安裝nodejs的jshint安裝Node.js環境安裝nodejs的jshint[4] csshint二、sublime中的jshint安裝配置方式一、 使用Sublimelinter，支持css等多種語言驗證方式二、使用Sublime JSHint Gutter，僅支持js驗證三、jshin... ...
- 一、安裝nodejs的jshint
- 二、sublime中的jshint安裝配置
- 三、jshint的檢查規則的三種配置方式[1]
- 四、在Sublimelinter或者JSHint Gutter中配置.jshintrc
- 五、.jshintrc配置中文詳細定義[2]，官方配置列表[3]
JSHint，發現錯誤和潛在問題的社區驅動的工具
JSLint 錯誤解析1
一、安裝nodejs的jshint
安裝Node.js環境
jshint其功能實現需要node.js支持，所以去node.js官網單擊找到當前平臺的版本進行下載安裝。
安裝nodejs的jshint2 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文件會發現，已經有了語法校驗。
查看SublimeLinter-jshint設置,右鍵 -> Sublimelinter -> Open User Settings
禁用Sublimelinter-jshint ，右鍵 -> Sublimelinter -> Toggle Linter 回車即可切換 啟用狀態
方式二、使用Sublime JSHint Gutter，僅支持js驗證
在sublime中按下Cmd+Shift+P打開命令查找視窗，輸入pci找到packge control install回車，稍等等待彈出package查找視窗，輸入js gutter，按下回車安裝。
JS Gutter配置
js gutter預設未開啟檢查，設置編輯，載入或保存時自動檢查
右鍵 -> JSHint -> Set Plugin Options 將對應設置的false改為true即可開啟檢查
{
"lint_on_edit": true,
"lint_on_load": true,
"lint_on_save": true
}
三、jshint的檢查規則的三種配置方式3
1. 自定義.jshintrc文件
一般.jshintrc文件放置在模塊根目錄，如果沒有找到，會一直向上及目錄查找，直到找到文件系統的根目錄/，如果沒找到採用預設規則。
2. 配置放到項目的 package.json 文件裡面， jshintConfig 下麵
3. 內聯配置（Inline configuration）
在js文件中的註釋中配置例如：
/* jshint undef: true, unused: true */
/* globals MY_GLOBAL */
四、在Sublimelinter或者JSHint Gutter中配置.jshintrc
JSHint Gutter 右鍵 -> JSHint -> set Linting Preference 預設.jshintrc文件
Sublimelinter 右鍵 -> Sublimelinter -> Open User Settings 指定.jshintrc文件路徑
五、.jshintrc配置中文詳細定義4，官方配置列表5
1. 強制選項(Enforcing options) 如果設為true會產生更多錯誤提示
{
"bitwise": true , //禁用位運算符，位運算符&在 JavaScript 中使用較少，經常是把 && 錯輸成 &
"curly": true , //迴圈或者條件語句必須使用花括弧包圍
"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'.
為原生對象添加屬性確實看上去很方便，但也帶來了潛在的問題
一是如果項目中有多處為同一個對象添加了同樣的屬性（或函數），則很可能產生衝突；
二是如果某段邏輯依賴於對象屬性遍歷，則可能產生錯誤。
*/
"immed": true,
/** 匿名函數調用必須
(function() {
// body
}());
而不是
(function() {
// body
})();
這是為了表明，表達式的值是函數的結果，而不是函數本身
*/
"indent": 4 , //代碼縮進
"latedef": "nofunc" , //禁止定義之前使用變數，忽略 function 函數聲明
"newcap": true , //構造器函數首字母大寫
"noarg":true , //禁止使用 arguments.caller 和 arguments.callee，未來會被棄用， ECMAScript 5 禁止使用 arguments.callee
"quotmark": false , //為 true 時，禁止單引號和雙引號混用
"undef": true , //變數未定義
"unused": true , //變數未使用
"strict":true , //嚴格模式
"maxparams": 4 , //最多參數個數
"maxdepth": 4 , //最大嵌套深度
"maxcomplexity":true , //複雜度檢測
"maxlen": 600 , //最大行數
"predef": [
"before",
"beforEach",
"after",
"afterEach",
"-toberemoved"
] // 用來自定義一些環境變數，變數前面有有-號表示從環境中移除次變數
//預定義變數為ReadOnly 不能在js文件的註釋中使用
}
2. 寬鬆選項(Relaxing options) 如果設為true會產生較少錯誤提示
{
"asi": true , //控制“缺少分號”的警告
"boss": true , //控制“缺少分號”的警告
"debug": true ,//"debug": true
"evil": true , //控制 eval 使用警告
"lastsemic": true ,//檢查一行代碼最後聲明後面的分號是否遺漏
"laxcomma": true , //檢查不安全的折行，忽略逗號在最前面的編程風格
"loopfunc": true , //檢查迴圈內嵌套 function
"multistr": true ,//檢查多行字元串
"notypeof": true , //檢查無效的 typeof 操作符值
"sub": true , //person['name'] vs. person.name
"supernew": true , //new function () { ... } 和 new Object;
"validthis": true //在非構造器函數中使用 this
}
3. 環境(Environments)
{
"browser": true ,//預定義全局變數 document，navigator，FileReader 等
"devel": true , //定義用於調試的全局變數：console，alert
"jquery": true, //定義全局變數 $
"node": true, //定義全局變數 module export等
}
