如何使用ESlint

參考連接：https://github.com/eslint/eslint

1、ESLint跟JSLint和JSHint相似，但有如下區別：

1.使用Espree進行js解析(parse)

2.用AST抽象語法樹去識別(evaluate)代碼中的模式

3.每一個規則都是獨立的插件

2、安裝

全局安裝：

npm install -g eslint

3、使用

若是是第一次使用，eslint --init 命令幫你完成初始化，生成.eslintrc文件

而後eslint test.js test2.js

4、配置

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

提示有三個level：

• "off" or 0 - 關閉這個規則校驗
• "warn" or 1 - 開啓這個規則校驗，但只是提醒，不會退出
• "error" or 2 - 開啓這個規則校驗，並退出

5、常見問題

1.爲何不用jslint

建立eslint是由於急需插件化的校驗工具

2.ESLint跟JSHint、JSCS的比較

ESLint比JSlint要慢2~3倍，由於ESLint在識別代碼前須要用Espress構建AST,而JSHint在解析的時候就會識別代碼。雖然慢些，但不至於成爲痛點。

ESLint比JSCS快，（as ESLint uses a single-pass traversal for analysis whereas JSCS using a querying model.）

3.ESLint僅僅是校驗仍是也檢查代碼風格

都有。ESLint does both traditional linting (looking for problematic patterns) and style checking (enforcement of conventions). You can use it for both.

4.支持es6嗎？

支持。參考配置http://eslint.org/docs/user-guide/configuring

5.支持JSX？

支持，但並不表示支持React。（Yes, ESLint natively supports parsing JSX syntax (this must be enabled in configuration.). Please note that supporting JSX syntax is not the same as supporting React. React applies specific semantics to JSX syntax that ESLint doesn't recognize. We recommend using eslint-plugin-react if you are using React and want React semantics.）

5.支持es7嗎？

自己不支持，可使用babel-eslint

6、下面詳細介紹下配置，地址http://eslint.org/docs/user-guide/configuring

1.配置ESLint

主要有兩種方法配置

（1）配置註釋，直接嵌入到js文件中

（2）配置文件，使用js、json或者yaml文件來爲整個目錄及其子目錄配置。形式有：.eslintrc.*文件，或者在package.json中配置eslintConfig字段，或者在命令行裏配置。

配置分幾個方面：

（1）環境（env）：設置你的腳本的目標運行環境，如browser，amd，es6，commonjs等，每種環境有預設的全局變量

（2）全局變量：增長的全局變量供運行時使用

（3）規則（rules）：設定的規則及該規則對應的報錯level

2.配置解析器選項（Specifying Parser Options）

默認僅支持ES5語法，能夠設置爲es6 es7 jsx等。

{
    "parserOptions": {
        "ecmaVersion": 6,  // 可選 3 5（默認） 6 7
        "sourceType": "module", // 可選script（默認） module
        "ecmaFeatures": {
            "jsx": true
        },
    },
    "rules": {
        "semi": 2
    }
}

3.配置解析器（Specifying Parser），須要本地npm模塊

{
    "parser": "esprima", // Espree(默認) Esprima Babel-ESLint

"rules": { "semi": "error" } }

4.配置環境（Specifying Environments），能夠多選

browser - browser global variables.
node - Node.js global variables and Node.js scoping.
commonjs - CommonJS global variables and CommonJS scoping (use this for browser-only code that uses Browserify/WebPack).
shared-node-browser - Globals common to both Node and Browser.
es6 - enable all ECMAScript 6 features except for modules.
worker - web workers global variables.
amd - defines require() and define() as global variables as per the amd spec.
mocha - adds all of the Mocha testing global variables.
jasmine - adds all of the Jasmine testing global variables for version 1.3 and 2.0.
jest - Jest global variables.
phantomjs - PhantomJS global variables.
protractor - Protractor global variables.
qunit - QUnit global variables.
jquery - jQuery global variables.
prototypejs - Prototype.js global variables.
shelljs - ShellJS global variables.
meteor - Meteor global variables.
mongo - MongoDB global variables.
applescript - AppleScript global variables.
nashorn - Java 8 Nashorn global variables.
serviceworker - Service Worker global variables.
atomtest - Atom test helper globals.
embertest - Ember test helper globals.
webextensions - WebExtensions globals.
greasemonkey - GreaseMonkey globals.

若是要在待校驗文件裏面配置能夠這樣配置：

/*eslint-env node, mocha */

若是要在配置文件中配置：

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

若是在package.json中配置：

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}

若是在YAML中配置：

---
  env:
    browser: true
    node: true

也能夠用插件

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

5.配置全局變量（Specifying Globals）

 定義了全局變量之後，使用他們，ESLint不會發出警告。

在js文件中定義：

 /*global var1, var2*/ 

設置read only

 /*global var1:false, var2:false*/ 

在配置文件中：

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

6.配置插件（Configuring Plugins）

使用npm安裝第三方插件

{
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]
}

7.配置規則（Configuring Rules）

js中配置：

 /*eslint eqeqeq: "off", curly: "error"*/ 

或者：

 /*eslint eqeqeq: 0, curly: 2*/ 

若是規則有多個選項：

 /*eslint quotes: ["error", "double"], curly: 2*/ 

在配置文件中設置：

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

使用插件：

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

 /*eslint "plugin1/rule1": "error" */ 

 

臨時關閉eslint校驗：

/*eslint-disable */

//Disable all rules between comments
alert('foo');

/*eslint-enable */

 

/*eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/*eslint-enable no-alert */

 

在js特定行關閉校驗：

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

alert('foo'); // eslint-disable-line no-alert, quotes, semi

// eslint-disable-next-line no-alert, quotes, semi
alert('foo');

8.增長共享設置（Adding Shared Settings）

{
    "settings": {
        "sharedData": "Hello"
    }
}

9.使用配置文件

eslint -c myconfig.json myfiletotest.js

10.繼承配置文件（Extending Configuration Files）

{
    "extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        // Override eslintDefaults.js
        "./node_modules/coding-standard/.eslintrc-es6",
        // Override .eslintrc-es6
        "./node_modules/coding-standard/.eslintrc-jsx",
    ],

    "rules": {
        // Override any settings from the "parent" configuration
        "eqeqeq": "warn"
    }
}

11.忽略文件或目錄(Ignoring Files and Directories)

創建.eslintignore文件

# /node_modules and /bower_components ignored by default

# Ignore files compiled from TypeScript and CoffeeScript
**/*.{ts,coffee}.js

# Ignore built files except build/index.js
build/
!build/index.js