ESlint語法檢測工具

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

後記

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

若是以爲不錯，記得 點贊，謝謝你們 😂

歡迎關注 個人：【Blog】【Github】【掘金】【簡書】