本文以使用eslint:recommended 和 eslint-config-airbnb-base 為例，介紹ESlint的使用。

入門HelloWorld

• 安裝 ESLint

npm install -g eslint 

• ESLint配置
  新建ESLint文件 .eslintrc.js ：

module.exports = {
  extends: 'eslint:recommended',
};

執(zhí)行命令：

# ./app是應(yīng)用規(guī)則的程序路徑，--ext執(zhí)行程序文件后綴名
eslint ./app --ext .js

配置文件說明

parserOptions

• ecmaVersion：指定ECMAScript版本，默認為5
• sourceType：設(shè)置為 "script" (默認) 或 "module"
• ecmaFeatures:
  • jsx：true 啟用jsx

.eslintrc.json示例：

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": 2
    }
}

parser

ESLint 默認使用Espree作為其解析器，平常項目中我一般使用babel-eslint作為parser。

{
    "parser": "babel-eslint",
}

env

環(huán)境定義了預(yù)定義的全局變量。

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

globals

項目中特殊的全局變量

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

plugins

plugin是一個npm包，通常輸出規(guī)則。一些插件也可以輸出一個或多個命名的配置。
ESLint 支持使用第三方插件。在使用插件之前，你必須使用 npm 安裝它。插件名稱可以省略 eslint-plugin- 前綴。

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

rules

ESLint 附帶有大量的規(guī)則。你可以通過配置文件修改你項目中使用的規(guī)則。改變一個規(guī)則設(shè)置，你必須設(shè)置規(guī)則 ID 等于這些值之一：
"off" 或 0 - 關(guān)閉規(guī)則
"warn" 或 1 - 開啟規(guī)則，使用警告級別的錯誤：warn (不會導致程序退出)
"error" 或 2 - 開啟規(guī)則，使用錯誤級別的錯誤：error (當被觸發(fā)的時候，程序會退出)

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

eslint-config-airbnb-base

airbnb通過可共享配置的方式共享他們的eslint 規(guī)則?？晒蚕砼渲?是一個npm包，它輸出一個配置對象。
下面我們介紹如何在項目中使用。

• 安裝

# 首先 通過npm info命令查詢依賴
$ npm info "eslint-config-airbnb-base@latest" peerDependencies
{ eslint: '^4.9.0', 'eslint-plugin-import': '^2.7.0' }

# 根據(jù)查詢結(jié)果手動安裝指定版本的依賴包
npm install eslint@4.9.0 --save-dev
...

# Linux用戶可以直接執(zhí)行，自動完成依賴包安裝
export PKG=eslint-config-airbnb-base;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"

# 安裝airbnb配置
npm install eslint-config-airbnb-base@latest

• 配置 .eslintrc.js

/**
 *
 * eslint 配置
 */
module.exports = {
    "extends": "airbnb-base",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",


    },
    parser: "babel-eslint",
    "env": {
        "browser": true,
        "node": true,
        "es6": true,
        "commonjs": true
    },
    "globals": {},

    "rules": {
        "indent": ["error", 4]
    }
};

• 命令行檢測

$ ./node_modules/eslint/bin/eslint.js ./client --ext .js

/Users/candice/Development/Web/www-mis/client/index.js
  6:1  error  Too many blank lines at the end of file. Max of 1 allowed  no-multiple-empty-lines

? 1 problem (1 error, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

• webpack集成
  如果有babel-loader，應(yīng)當先執(zhí)行eslint-loader再進行babel-loader。

    module: {
        rules: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, '../public'),
                    path.resolve(__dirname, '../common'),
                    path.resolve(__dirname, '../app'),
                ],
                loader: ['babel-loader','eslint-loader'], //執(zhí)行順序從右往左
            },

• 例外
  凡事總有例外。編碼時盡管懷著嚴格遵守規(guī)則的愿景，但是實際情況往往會有例外。ESLint提供多種臨時禁用規(guī)則的方式。

/* eslint-disable */

alert('foo');

/* eslint-enable */

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

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

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

/* eslint-disable */

alert('foo');

/* eslint-disable no-alert */

// Disables no-alert for the rest of the file
alert('foo');

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

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

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

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