ESLint簡介

ESLint是一款代碼規(guī)格檢查工具，能夠有效的保證團隊的代碼質(zhì)量,避免低級代碼。

ESlint特點

• 默認規(guī)則包含所有JSHint、JSLint中存在的所有規(guī)則，易遷移；
• 可以設置警告（1），錯誤（2），關閉（0）三種規(guī)格的配置；
• 包含代碼風格檢測；
• 支持插件擴展、自定義規(guī)則；

sublime中如何安裝ESLint

1.環(huán)境準備

• 首先你得有sublime text3編輯器，并且已經(jīng)安裝了package control；
• 其次你得有node環(huán)境，如果不知道node環(huán)境如何安裝，請點擊前往 node；
• 好了，以上環(huá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插件來進行安裝

Paste_Image.png

5.集成sublimeLinter的配置文件

點擊preferences ==> package settings ==> SublimeLinter ==> Settings-user 打開配置文件，查詢paths關鍵字，找到paths下面的windows字段，修改eslint的全局命令：

"paths": {
            "linux": [],
            "osx": [],
            "windows": [
                "**/nodejs/eslint.cmd"
            ]
        },

6.創(chuàng)建.eslintrc語法規(guī)則文件

當當當，終于到了最后一步拉。在自己的項目工程根目錄下面創(chuàng)建.eslintrc語法規(guī)則配置文件。

• 方法一: 在命令行里輸入eslint --init命令進行自主選擇創(chuàng)建文件。命令行會根據(jù)用戶自己選擇的風格來創(chuàng)建文件
  
  Paste_Image.png
• 方法二: 在命令行里輸入'echo {} > .eslintrc'命令直接創(chuàng)建.eslintrc文件。然后在.eslintrc文件中可以直接復制以下代碼,具體的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],                    //圈復雜度大于10 警告

    //常見錯誤
    "comma-dangle": [2, "never"],             //定義數(shù)組或?qū)ο笞詈蠖嘤嗟亩禾?    "no-debugger": 2,                         //debugger 調(diào)試代碼未刪除
    "no-constant-condition": 2,               //常量作為條件
    "no-dupe-args": 2,                        //參數(shù)重復
    "no-dupe-keys": 2,                        //對象屬性重復
    "no-duplicate-case": 2,                   //case重復
    "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,             //行尾缺少分號可能導致一些意外情況
    "no-sparse-arrays": 2,                    //數(shù)組中多出逗號
    "no-shadow-restricted-names": 2,          //關鍵詞與命名沖突
    "no-undef": 2,                            //變量未定義
    "no-unused-vars": 2,                      //變量定義后未使用
    "no-cond-assign": 2,                      //條件語句中禁止賦值操作
    "no-native-reassign": 2,                  //禁止覆蓋原生對象

    //代碼風格優(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,                    //變量應在外部上下文中聲明，不應在{}代碼塊中
    "consistent-return": 2,                   //函數(shù)返回值可能是不同類型
    "accessor-pairs": 2,                      //object getter/setter方法需要成對出現(xiàn)
    "dot-location": [2, "property"],          //換行調(diào)用對象方法  點操作符應寫在行首
    "no-lone-blocks": 2,                      //多余的{}嵌套
    "no-empty-label": 2,                      //無用的標記
    "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,                        //禁止可能導致結(jié)果不明確的逗號操作符
    "no-throw-literal": 2,                    //禁止拋出一個直接量 應是Error對象
    "no-return-assign": [2, "always"],        //不允return時有賦值操作
    "no-redeclare": [2, {"builtinGlobals": true}],//不允許重復聲明
    "no-unused-expressions": [2, {"allowShortCircuit": true, "allowTernary": true}],//不執(zhí)行的表達式
    "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" }],//標記未寫注釋
    "curly": 1                                //if、else、while、for代碼塊用{}包圍
  }
}

7.成功后界面預覽

根據(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的任務即可。

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能夠讓前端工程工程化更進一步。

后記

感謝支持。若不足之處，歡迎大家指出，共勉。

如果覺得不錯，記得 點贊，謝謝大家 ??

歡迎關注 我的：【Blog】【Github】【掘金】【簡書】