ESLint使用说明

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

入门HelloWorld

• 安装 ESLint

npm install -g eslint 

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

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

执行命令：

# ./app是应用规则的程序路径，--ext执行程序文件后缀名
eslint ./app --ext .js

配置文件说明

parserOptions

• ecmaVersion：指定ECMAScript版本，默认为5
• sourceType：设置为 "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

环境定义了预定义的全局变量。

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

globals

项目中特殊的全局变量

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

plugins

plugin是一个npm包，通常输出规则。一些插件也可以输出一个或多个命名的配置。
ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。插件名称可以省略 eslint-plugin- 前缀。

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

rules

ESLint 附带有大量的规则。你可以通过配置文件修改你项目中使用的规则。改变一个规则设置，你必须设置规则 ID 等于这些值之一：
"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

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

eslint-config-airbnb-base

airbnb通过可共享配置的方式共享他们的eslint 规则。可共享配置 是一个npm包，它输出一个配置对象。
下面我们介绍如何在项目中使用。

• 安装

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

# 根据查询结果手动安装指定版本的依赖包
npm install eslint@4.9.0 --save-dev
...

# Linux用户可以直接执行，自动完成依赖包安装
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，应当先执行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'], //执行顺序从右往左
            },

• 例外
  凡事总有例外。编码时尽管怀着严格遵守规则的愿景，但是实际情况往往会有例外。ESLint提供多种临时禁用规则的方式。

/* 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');