ESLint簡介
ESLint是一款程式碼規格檢查工具，能夠有效的保證團隊的程式碼質量,避免低階程式碼。
ESlint特點
- 預設規則包含所有JSHint、JSLint中存在的所有規則，易遷移；
- 可以設定警告（1），錯誤（2），關閉（0）三種規格的配置；
- 包含程式碼風格檢測；
- 支援外掛擴充套件、自定義規則；
sublime中如何安裝ESLint
1.環境準備
- 首先你得有sublime text3編輯器，並且已經安裝了package control；
- 其次你得有node環境，如果不知道node環境如何安裝，請點選前往 node；
- 好了，以上環境準備好了就可以按照下面步驟一步步來了。
2.安裝eslint包模組
可以使用npm或cnpm（淘寶）來全域性安裝eslint。
npm install eslint -g
複製程式碼3.安裝sublimeLinter外掛
在sublime中開啟package control（快捷鍵ctrl + shift + p）選擇install package 然後在搜尋框中搜尋sublimeLinter外掛，點選即可安裝。
4.安裝sublimeLinter-contrib-eslint外掛
同樣的在package control中搜尋sublimeLinter-contrib-eslint外掛來進行安裝
5.整合sublimeLinter的配置檔案
點選preferences ==> package settings ==> SublimeLinter ==> Settings-user 開啟配置檔案，查詢paths關鍵字，找到paths下面的windows欄位，修改eslint的全域性命令：
"paths": {
"linux": [],
"osx": [],
"windows": [
"**/nodejs/eslint.cmd"
]
},
複製程式碼6.建立.eslintrc語法規則檔案
噹噹噹，終於到了最後一步拉。在自己的專案工程根目錄下面建立.eslintrc語法規則配置檔案。
- 方法一: 在命令列裡輸入
eslint --init命令進行自主選擇建立檔案。命令列會根據使用者自己選擇的風格來建立檔案
- 方法二: 在命令列裡輸入'echo {} > .eslintrc'命令直接建立.eslintrc檔案。然後在.eslintrc檔案中可以直接複製以下程式碼,具體的rule配置可以根據自己的專案選擇性的修改：
{
"globals": {
"$": true, //zepto
"define": true, //requirejs
"require": true //requirejs
},
"env": {
"browser": true //執行環境 瀏覽器
},
"rules": {
//官方文件 http://eslint.org/docs/rules/
//警告
// "quotes": [0, "single"], //建議使用單引號
// "no-inner-declarations": [0, "both"], //不建議在{}程式碼塊內部宣告變數或函式
"no-extra-boolean-cast": 1, //多餘的感嘆號轉布林型
"no-extra-semi": 1, //多餘的分號
"no-extra-parens": 1, //多餘的括號
"no-empty": 1, //空程式碼塊
"no-use-before-define": [1, "nofunc"], //使用前未定義
"complexity": [1, 10], //圈複雜度大於10 警告
//常見錯誤
"comma-dangle": [2, "never"], //定義陣列或物件最後多餘的逗號
"no-debugger": 2, //debugger 除錯程式碼未刪除
"no-constant-condition": 2, //常量作為條件
"no-dupe-args": 2, //引數重複
"no-dupe-keys": 2, //物件屬性重複
"no-duplicate-case": 2, //case重複
"no-empty-character-class": 2, //正則無法匹配任何值
"no-invalid-regexp": 2, //無效的正則
"no-func-assign": 2, //函式被賦值
"valid-typeof": 2, //無效的型別判斷
"no-unreachable": 2, //不可能執行到的程式碼
"no-unexpected-multiline": 2, //行尾缺少分號可能導致一些意外情況
"no-sparse-arrays": 2, //陣列中多出逗號
"no-shadow-restricted-names": 2, //關鍵詞與命名衝突
"no-undef": 2, //變數未定義
"no-unused-vars": 2, //變數定義後未使用
"no-cond-assign": 2, //條件語句中禁止賦值操作
"no-native-reassign": 2, //禁止覆蓋原生物件
//程式碼風格優化
"no-else-return": 1, //在else程式碼塊中return，else是多餘的
"no-multi-spaces": 1, //不允許多個空格
"key-spacing": [1, {"beforeColon": false, "afterColon": true}],//object直接量建議寫法 : 後一個空格前面不留空格
"block-scoped-var": 2, //變數應在外部上下文中宣告，不應在{}程式碼塊中
"consistent-return": 2, //函式返回值可能是不同型別
"accessor-pairs": 2, //object getter/setter方法需要成對出現
"dot-location": [2, "property"], //換行呼叫物件方法 點操作符應寫在行首
"no-lone-blocks": 2, //多餘的{}巢狀
"no-empty-label": 2, //無用的標記
"no-extend-native": 2, //禁止擴充套件原生物件
"no-floating-decimal": 2, //浮點型需要寫全 禁止.1 或 2.寫法
"no-loop-func": 2, //禁止在迴圈體中定義函式
"no-new-func": 2, //禁止new Function(...) 寫法
"no-self-compare": 2, //不允與自己比較作為條件
"no-sequences": 2, //禁止可能導致結果不明確的逗號操作符
"no-throw-literal": 2, //禁止丟擲一個直接量 應是Error物件
"no-return-assign": [2, "always"], //不允return時有賦值操作
"no-redeclare": [2, {"builtinGlobals": true}],//不允許重複宣告
"no-unused-expressions": [2, {"allowShortCircuit": true, "allowTernary": true}],//不執行的表示式
"no-useless-call": 2, //無意義的函式call或apply
"no-useless-concat": 2, //無意義的string concat
"no-void": 2, //禁用void
"no-with": 2, //禁用with
"space-infix-ops": 2, //操作符前後空格
"valid-jsdoc": [2, {"requireParamDescription": true, "requireReturnDescription": true}],//jsdoc
"no-warning-comments": [2, { "terms": ["todo", "fixme", "any other term"], "location": "anywhere" }],//標記未寫註釋
"curly": 1 //if、else、while、for程式碼塊用{}包圍
}
}
複製程式碼7.成功後介面預覽
根據語法規則的配置，eslint會自動檢測語法錯誤，並高亮顯示，是不是很酷呢~
gulp中如何整合ESlint
通過自動化構建工具gulpe來整合eslint也是非常方便的。
1.安裝gulp-eslint包模組
通過npm 或者 cnpm( 淘寶）來全域性安裝gulp-eslint 包模組.
npm install gulp-eslint -g
複製程式碼2.編寫gulp配置檔案
然後在自己的專案的gulp.js配置檔案中編寫eslint的任務即可。
var eslint = require('gulp-eslint');
gulp.task('eslint-task', function(){
return gulp.src(['app/**/*.js']) //指定的校驗路徑
.pipe(eslint({configFile:"./.eslintrc"})) //使用你的eslint校驗檔案
.pipe(eslint.format())
});
gulp.task('default', ['eslint-task']);
複製程式碼總結
使用eslint能夠很大程度上避免程式設計師編碼過程中出現的低階錯誤，提高自己的程式碼水平。一個專案中，程式碼的質量，健壯性尤為重要。eslint能夠讓前端工程工程化更進一步。