EsLint

       EsLint幫助咱們檢查javascript編程時的語法錯誤。好比：在JavaScript應用中，很難找到泄露的變量或者方法。EsLint可以幫助咱們分析JS代碼，找到bug並確保必定程度的JS語法書寫的正確性。

　　EsLint是創建在ECMAScript解析架構的基礎上的。EsLint不但提供一些默認的規則，也提供用戶自定義規則來約束咱們寫的JavaScript代碼。

　　EsLint提供如下支持：①.ES6 ②.AngularJS ③JSX ④Style檢查⑤自定義錯誤和提示

　　EsLint提供如下幾種校驗：①.語法錯誤校驗 ②.不重要或丟失的標點符號，如分號③.無法運行到的代碼塊④.未被使用的參數提醒⑤.漏掉的結束符，如}⑥.確保樣式的統一規則，如sass或者less⑦.檢查變量的命名

1、安裝

npm install gulp-eslint –save-dev

在你的項目目錄下，運行：eslint –init將會產生一個.eslintrc的文件，文件內容包含一些校驗規則

{

    "rules": {

        "semi": ["error", "always"],

        "quotes": ["error", "double"]

    }

}

其中」semi」和」quotes」是規則名稱。EsLint還提供了error的級別，對應數字，數字越高錯誤的提示越高，如0代碼錯誤不提示、1表明警告提醒但不影響現有編譯、2error會拋出錯誤。

"extends": "eslint:recommended"

Extends是EsLint默認推薦的驗證，你可使用配置選擇哪些校驗是你所須要的，能夠登陸npmjs.com查看

2、自定義配置EsLint

以前提到你能夠關掉全部EsLint默認的驗證，自行添加所確切須要的驗證規則。爲此EsLint提供了2個種方式進行設置：

1. Configuration Comments: 在所要驗證的文件中，直接使用Javascript註釋嵌套配置信息
2. Configuration Files: 使用JavaScript、JSON或YAML文件，好比前面提到的.eslintrc文件，固然你也能夠在package.json文件裏添加eslintConfig字段，EsLint都會自動讀取驗證。

開始介紹EsLint的用法

parserOptions

EsLint經過parserOptions，容許指定校驗的ecma的版本，及ecma的一些特性

{
    "parserOptions": {
        "ecmaVersion": 6, //指定ECMAScript支持的版本，6爲ES6
        "sourceType": "module", //指定來源的類型，有兩種」script」或」module」
        "ecmaFeatures": {
            "jsx": true//啓動JSX
        },
    }
}

Parser

EsLint默認使用esprima作腳本解析，固然你也切換他，好比切換成babel-eslint解析

{
    "parser": "esprima" //默認，能夠設置成babel-eslint，支持jsx
}

Environments

Environment能夠預設好的其餘環境的全局變量，如brower、node環境變量、es6環境變量、mocha環境變量等

{
    "env": {
        "browser": true,
        "node": true
    }
}

若是你想使用插件中的環境變量，你可使用plugins指定，以下

{
    "plugins": ["example"],
    "env": {
        "example/custom": true
    }
}

Globals

指定你所要使用的全局變量，true表明容許重寫、false表明不容許重寫

{
    "globals": {
        "var1": true,
        "var2": false
    }
}

Plugins

EsLint容許使用第三方插件

{
    "plugins": [
        "react"    
     ]
}

Rules

自定義規則，通常格式：」規則名稱」:error級別係數。係數0爲不提示(off)、1爲警告(warn)、2爲錯誤拋出(error)，可指定範圍，如[1,4]

能夠包括Strict模式、也能夠是code的方式提醒，如符號等。還能夠是第三方的校驗，如react。

默認校驗的地址http://eslint.org/docs/rules/

{
    "plugins": [
        "react"
    ],
    "rules": {
         //Javascript code 默認校驗
        "eqeqeq": "off", //off = 0
        "curly": "error", //error = 2
        "quotes": ["warn", "double"], //warn = 1
         //使用第三方插件的校驗規則
        "react/jsx-quotes": 0
    }
}

            https://www.npmjs.com/package/eslint-plugin-react ， 此連接是react的eslint使用

3、Gulp中使用

var eslint = require('gulp-eslint');
 
gulp.task('validate-eslint',function(){

    return gulp.src(['app/**/*.js']) //指定的校驗路徑

        .pipe(eslint({configFile:"./.eslintrc"})) //使用你的eslint校驗文件

        .pipe(eslint.format())

});

4、規則

1.類別描述 

Possible Errors 可能的錯誤或邏輯錯誤 
no-cond-assign 禁止條件表達式中出現模棱兩可的賦值操做符 
no-console 禁用console 
no-constant-condition 禁止在條件中使用常量表達式 
no-debugger 禁用 debugger 
no-dupe-args 禁止 function 定義中出現重名參數 
no-dupe-keys 禁止對象字面量中出現重複的 key 
no-duplicate-case 禁止出現重複的 case 標籤 
no-empty 禁止出現空語句塊 
no-ex-assign 禁止對 catch 子句的參數從新賦值 
no-extra-boolean-cast 禁止沒必要要的布爾轉換 
no-extra-parens 禁止沒必要要的括號 
no-extra-semi 禁止沒必要要的分號 
no-func-assign 禁止對 function 聲明從新賦值 
no-inner-declarations 禁止在嵌套的塊中出現變量聲明或 function 聲明 
no-irregular-whitespace 禁止在字符串和註釋以外不規則的空白 
no-obj-calls 禁止把全局對象做爲函數調用 
no-sparse-arrays 禁用稀疏數組 
no-prototype-builtins 禁止直接使用Object.prototypes 的內置屬性 
no-unexpected-multiline 禁止出現使人困惑的多行表達式 
no-unreachable 禁止在return、throw、continue 和 break語句以後出現不可達代碼 
use-isnan 要求使用 isNaN() 檢查 NaN 
valid-typeof 強制 typeof 表達式與有效的字符串進行比較 

2.Best Practices 最佳實踐 

array-callback-return 強制數組方法的回調函數中有 return 語句 
block-scoped-var 強制把變量的使用限制在其定義的做用域範圍內 
complexity 指定程序中容許的最大環路複雜度 
consistent-return 要求 return 語句要麼老是指定返回的值，要麼不指定 
curly 強制全部控制語句使用一致的括號風格 
default-case 要求 switch 語句中有 default 分支 
dot-location 強制在點號以前和以後一致的換行 
dot-notation 強制在任何容許的時候使用點號 
eqeqeq 要求使用 === 和 !== 
guard-for-in 要求 for-in 循環中有一個 if 語句 
no-alert 禁用 alert、confirm 和 prompt 
no-case-declarations 不容許在 case 子句中使用詞法聲明 
no-else-return 禁止 if 語句中有 return 以後有 else 
no-empty-function 禁止出現空函數 
no-eq-null 禁止在沒有類型檢查操做符的狀況下與 null 進行比較 
no-eval 禁用 eval() 
no-extra-bind 禁止沒必要要的 .bind() 調用 
no-fallthrough 禁止 case 語句落空 
no-floating-decimal 禁止數字字面量中使用前導和末尾小數點 
no-implicit-coercion 禁止使用短符號進行類型轉換 
no-implicit-globals 禁止在全局範圍內使用 var 和命名的 function 聲明 
no-invalid-this: 禁止 this 關鍵字出如今類和類對象以外 
no-lone-blocks 禁用沒必要要的嵌套塊 
no-loop-func 禁止在循環中出現 function 聲明和表達式 
no-magic-numbers 禁用魔術數字 
no-multi-spaces 禁止使用多個空格 
no-multi-str 禁止使用多行字符串 
no-new 禁止在非賦值或條件語句中使用 new 操做符 
no-new-func 禁止對 Function 對象使用 new 操做符 
no-new-wrappers 禁止對 String，Number 和 Boolean 使用 new 操做符 
no-param-reassign 不容許對 function 的參數進行從新賦值 
no-redeclare 禁止使用 var 屢次聲明同一變量 
no-return-assign 禁止在 return 語句中使用賦值語句 
no-script-url 禁止使用 javascript: url 
no-self-assign 禁止自我賦值 
no-self-compare 禁止自身比較 
no-sequences 禁用逗號操做符 
no-unmodified-loop-condition 禁用一成不變的循環條件 
no-unused-expressions 禁止出現未使用過的表達式 
no-useless-call 禁止沒必要要的 .call() 和 .apply() 
no-useless-concat 禁止沒必要要的字符串字面量或模板字面量的鏈接 
vars-on-top 要求全部的 var 聲明出如今它們所在的做用域頂部 

3.Variables 變量聲明 

init-declarations 要求或禁止 var 聲明中的初始化 
no-catch-shadow 不容許 catch 子句的參數與外層做用域中的變量同名 
no-restricted-globals 禁用特定的全局變量 
no-shadow 禁止 var 聲明 與外層做用域的變量同名 
no-undef 禁用未聲明的變量，除非它們在 /global / 註釋中被提到 
no-undef-init 禁止將變量初始化爲 undefined 
no-unused-vars 禁止出現未使用過的變量 
no-use-before-define 不容許在變量定義以前使用它們

4.Nodejs and CommonJS Node.js,CommonJS 

global-require 要求 require() 出如今頂層模塊做用域中 
handle-callback-err 要求回調函數中有容錯處理 
no-mixed-requires 禁止混合常規 var 聲明和 require 調用 
no-new-require 禁止調用 require 時使用 new 操做符 
no-path-concat 禁止對 dirname 和 filename進行字符串鏈接 
no-restricted-modules 禁用指定的經過 require 加載的模塊 

5.Stylistic Issues 風格指南 （使用較多）

array-bracket-spacing 強制數組方括號中使用一致的空格 
block-spacing 強制在單行代碼塊中使用一致的空格 
brace-style 強制在代碼塊中使用一致的大括號風格 
camelcase 強制使用駱駝拼寫法命名約定 
comma-spacing 強制在逗號先後使用一致的空格 
comma-style 強制使用一致的逗號風格 
computed-property-spacing 強制在計算的屬性的方括號中使用一致的空格 
eol-last 強制文件末尾至少保留一行空行 
func-names 強制使用命名的 function 表達式 
func-style 強制一致地使用函數聲明或函數表達式 
indent 強制使用一致的縮進 
jsx-quotes 強制在 JSX 屬性中一致地使用雙引號或單引號 
key-spacing 強制在對象字面量的屬性中鍵和值之間使用一致的間距 
keyword-spacing 強制在關鍵字先後使用一致的空格 
linebreak-style 強制使用一致的換行風格 
lines-around-comment 要求在註釋周圍有空行 
max-depth 強制可嵌套的塊的最大深度 
max-len 強制一行的最大長度 
max-lines 強制最大行數 
max-nested-callbacks 強制回調函數最大嵌套深度 
max-params 強制 function 定義中最多容許的參數數量 
max-statements 強制 function 塊最多容許的的語句數量 
max-statements-per-line 強制每一行中所容許的最大語句數量 
new-cap 要求構造函數首字母大寫 
new-parens 要求調用無參構造函數時有圓括號 
newline-after-var 要求或禁止 var 聲明語句後有一行空行 
newline-before-return 要求 return 語句以前有一空行 
newline-per-chained-call 要求方法鏈中每一個調用都有一個換行符 
no-array-constructor 禁止使用 Array 構造函數 
no-continue 禁用 continue 語句 
no-inline-comments 禁止在代碼行後使用內聯註釋 
no-lonely-if 禁止 if 做爲惟一的語句出如今 else 語句中 
no-mixed-spaces-and-tabs 不容許空格和 tab 混合縮進 
no-multiple-empty-lines 不容許多個空行 
no-negated-condition 不容許否認的表達式 
no-plusplus 禁止使用一元操做符 ++ 和 – 
no-spaced-func 禁止 function 標識符和括號之間出現空格 
no-ternary 不容許使用三元操做符 
no-trailing-spaces 禁用行尾空格 
no-whitespace-before-property 禁止屬性前有空白 
object-curly-newline 強制花括號內換行符的一致性 
object-curly-spacing 強制在花括號中使用一致的空格 
object-property-newline 強制將對象的屬性放在不一樣的行上 
one-var 強制函數中的變量要麼一塊兒聲明要麼分開聲明 
one-var-declaration-per-line 要求或禁止在 var 聲明周圍換行 
operator-assignment 要求或禁止在可能的狀況下要求使用簡化的賦值操做符 
operator-linebreak 強制操做符使用一致的換行符 
quote-props 要求對象字面量屬性名稱用引號括起來 
quotes 強制使用一致的反勾號、雙引號或單引號 
require-jsdoc 要求使用 JSDoc 註釋 
semi 要求或禁止使用分號而不是 ASI 
semi-spacing 強制分號以前和以後使用一致的空格 
sort-vars 要求同一個聲明塊中的變量按順序排列 
space-before-blocks 強制在塊以前使用一致的空格 
space-before-function-paren 強制在 function的左括號以前使用一致的空格 
space-in-parens 強制在圓括號內使用一致的空格 
space-infix-ops 要求操做符周圍有空格 
space-unary-ops 強制在一元操做符先後使用一致的空格 
spaced-comment 強制在註釋中 // 或 /* 使用一致的空格

詳見https://www.cnblogs.com/ruanyifeng/p/5283708.html