ESLint簡介
ESLint是一款代碼規(guī)格檢查工具摊欠，能夠有效的保證團隊的代碼質(zhì)量,避免低級代碼笛求。
ESlint特點
- 默認(rèn)規(guī)則包含所有JSHint奏窑、JSLint中存在的所有規(guī)則熬丧，易遷移屉符；
- 可以設(shè)置警告（1），錯誤（2）锹引，關(guān)閉（0）三種規(guī)格的配置矗钟；
- 包含代碼風(fēng)格檢測；
- 支持插件擴展嫌变、自定義規(guī)則吨艇；
sublime中如何安裝ESLint
1.環(huán)境準(zhǔn)備
- 首先你得有sublime text3編輯器，并且已經(jīng)安裝了package control腾啥；
- 其次你得有node環(huán)境东涡，如果不知道node環(huán)境如何安裝，請點擊前往 node倘待；
- 好了疮跑，以上環(huán)境準(zhǔn)備好了就可以按照下面步驟一步步來了。
2.安裝eslint包模塊
可以使用npm或cnpm（淘寶）來全局安裝eslint凸舵。
npm install eslint -g
3.安裝sublimeLinter插件
在sublime中打開package control（快捷鍵ctrl + shift + p）選擇install package 然后在搜索框中搜索sublimeLinter插件祖娘，點擊即可安裝。
Paste_Image.png
4.安裝sublimeLinter-contrib-eslint插件
同樣的在package control中搜索sublimeLinter-contrib-eslint插件來進(jìn)行安裝
Paste_Image.png
5.集成sublimeLinter的配置文件
點擊preferences ==> package settings ==> SublimeLinter ==> Settings-user 打開配置文件啊奄，查詢paths關(guān)鍵字渐苏，找到paths下面的windows字段，修改eslint的全局命令：
"paths": {
"linux": [],
"osx": [],
"windows": [
"**/nodejs/eslint.cmd"
]
},
6.創(chuàng)建.eslintrc語法規(guī)則文件
當(dāng)當(dāng)當(dāng)菇夸，終于到了最后一步拉琼富。在自己的項目工程根目錄下面創(chuàng)建.eslintrc語法規(guī)則配置文件。
- 方法一: 在命令行里輸入
eslint --init命令進(jìn)行自主選擇創(chuàng)建文件庄新。命令行會根據(jù)用戶自己選擇的風(fēng)格來創(chuàng)建文件
Paste_Image.png - 方法二: 在命令行里輸入'echo {} > .eslintrc'命令直接創(chuàng)建.eslintrc文件鞠眉。然后在.eslintrc文件中可以直接復(fù)制以下代碼,具體的rule配置可以根據(jù)自己的項目選擇性的修改：
{
"globals": {
"$": true, //zepto
"define": true, //requirejs
"require": true //requirejs
},
"env": {
"browser": true //執(zhí)行環(huán)境 瀏覽器
},
"rules": {
//官方文檔 http://eslint.org/docs/rules/
//警告
// "quotes": [0, "single"], //建議使用單引號
// "no-inner-declarations": [0, "both"], //不建議在{}代碼塊內(nèi)部聲明變量或函數(shù)
"no-extra-boolean-cast": 1, //多余的感嘆號轉(zhuǎn)布爾型
"no-extra-semi": 1, //多余的分號
"no-extra-parens": 1, //多余的括號
"no-empty": 1, //空代碼塊
"no-use-before-define": [1, "nofunc"], //使用前未定義
"complexity": [1, 10], //圈復(fù)雜度大于10 警告
//常見錯誤
"comma-dangle": [2, "never"], //定義數(shù)組或?qū)ο笞詈蠖嘤嗟亩禾? "no-debugger": 2, //debugger 調(diào)試代碼未刪除
"no-constant-condition": 2, //常量作為條件
"no-dupe-args": 2, //參數(shù)重復(fù)
"no-dupe-keys": 2, //對象屬性重復(fù)
"no-duplicate-case": 2, //case重復(fù)
"no-empty-character-class": 2, //正則無法匹配任何值
"no-invalid-regexp": 2, //無效的正則
"no-func-assign": 2, //函數(shù)被賦值
"valid-typeof": 2, //無效的類型判斷
"no-unreachable": 2, //不可能執(zhí)行到的代碼
"no-unexpected-multiline": 2, //行尾缺少分號可能導(dǎo)致一些意外情況
"no-sparse-arrays": 2, //數(shù)組中多出逗號
"no-shadow-restricted-names": 2, //關(guān)鍵詞與命名沖突
"no-undef": 2, //變量未定義
"no-unused-vars": 2, //變量定義后未使用
"no-cond-assign": 2, //條件語句中禁止賦值操作
"no-native-reassign": 2, //禁止覆蓋原生對象
//代碼風(fēng)格優(yōu)化
"no-else-return": 1, //在else代碼塊中return薯鼠，else是多余的
"no-multi-spaces": 1, //不允許多個空格
"key-spacing": [1, {"beforeColon": false, "afterColon": true}],//object直接量建議寫法 : 后一個空格前面不留空格
"block-scoped-var": 2, //變量應(yīng)在外部上下文中聲明，不應(yīng)在{}代碼塊中
"consistent-return": 2, //函數(shù)返回值可能是不同類型
"accessor-pairs": 2, //object getter/setter方法需要成對出現(xiàn)
"dot-location": [2, "property"], //換行調(diào)用對象方法 點操作符應(yīng)寫在行首
"no-lone-blocks": 2, //多余的{}嵌套
"no-empty-label": 2, //無用的標(biāo)記
"no-extend-native": 2, //禁止擴展原生對象
"no-floating-decimal": 2, //浮點型需要寫全 禁止.1 或 2.寫法
"no-loop-func": 2, //禁止在循環(huán)體中定義函數(shù)
"no-new-func": 2, //禁止new Function(...) 寫法
"no-self-compare": 2, //不允與自己比較作為條件
"no-sequences": 2, //禁止可能導(dǎo)致結(jié)果不明確的逗號操作符
"no-throw-literal": 2, //禁止拋出一個直接量 應(yīng)是Error對象
"no-return-assign": [2, "always"], //不允return時有賦值操作
"no-redeclare": [2, {"builtinGlobals": true}],//不允許重復(fù)聲明
"no-unused-expressions": [2, {"allowShortCircuit": true, "allowTernary": true}],//不執(zhí)行的表達(dá)式
"no-useless-call": 2, //無意義的函數(shù)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" }],//標(biāo)記未寫注釋
"curly": 1 //if械蹋、else出皇、while、for代碼塊用{}包圍
}
}
7.成功后界面預(yù)覽
根據(jù)語法規(guī)則的配置朝蜘，eslint會自動檢測語法錯誤恶迈，并高亮顯示，是不是很酷呢~
Paste_Image.png
gulp中如何集成ESlint
通過自動化構(gòu)建工具gulpe來集成eslint也是非常方便的谱醇。
1.安裝gulp-eslint包模塊
通過npm 或者 cnpm( 淘寶）來全局安裝gulp-eslint 包模塊.
npm install gulp-eslint -g
2.編寫gulp配置文件
然后在自己的項目的gulp.js配置文件中編寫eslint的任務(wù)即可暇仲。
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']);
總結(jié)
使用eslint能夠很大程度上避免程序員編碼過程中出現(xiàn)的低級錯誤，提高自己的代碼水平副渴。一個項目中奈附，代碼的質(zhì)量，健壯性尤為重要煮剧。eslint能夠讓前端工程工程化更進(jìn)一步斥滤。
后記
感謝支持。若不足之處勉盅，歡迎大家指出佑颇，共勉。
如果覺得不錯草娜，記得 點贊挑胸，謝謝大家 ??
