EsLint入門

介紹

官方地址：http://eslint.org/

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

EsLint是創建在Esprima(ECMAScript解析架構)的基礎上的。Esprima支持ES5.1,自己也是用ECMAScript編寫的，用於多用途分析。EsLint不但提供一些默認的規則（可擴展），也提供用戶自定義規則來約束咱們寫的Javascript代碼。

EsLint提供如下支持：

1. ES6
2. AngularJS
3. JSX
4. Style檢查
5. 自定義錯誤和提示

EsLint提供如下幾種校驗：

1. 語法錯誤校驗
2. 不重要或丟失的標點符號，如分號
3. 無法運行到的代碼塊（使用過WebStorm的童鞋應該瞭解）
4. 未被使用的參數提醒
5. 漏掉的結束符，如}
6. 確保樣式的統一規則，如sass或者less
7. 檢查變量的命名

使用

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({configFle:"./.eslintrc"})) //使用你的eslint校驗文件

        .pipe(eslint.format())

});