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