1.安装

插件官网：EslintWebpackPlugin
语法地址：https://github.com/airbnb/javascript
ESLint官网：https://eslint.org/
eslint-config-airbnb：包含react语法、eslint-config-airbnb-base。
eslint-config-airbnb-base
- eslint-config-airbnb-base：ES6及以上的语法
- eslint-config-airbnb-base/legacy：ES5及一下的语法
```
npm install eslint eslint-webpack-plugin eslint-config-airbnb-base --save-dev
```
  如果编译报错就在下载一个eslint-plugin-import #eslint issues 12623。
```
npm i eslint-plugin-import --save-dev
```

2.插件配置

context

类型： String
默认： compiler.context

指示文件根的字符串，一般填src的全路径。

eslintPath

类型： String
默认： eslint

eslint将用于 linting 的实例路径。如果eslintPath是像官方 eslint 这样的文件夹，或者指定一个formatter选项。现在您不必安装eslint.
就是你eslint安装的地方，一般都是安装在项目的开发依赖中，你可以填require.resolve('eslint')这样的值。

extensions

类型： String|Array[String]
默认： ‘js’

指定应检查的扩展，检查的文件的扩展名。

// react案例
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],

exclude

类型： String|Array[String]
默认： ‘node_modules’

指定要排除的文件和/或目录。必须相对于options.context.

files

类型： String|Array[String]
默认： null

指定目录、文件或 glob。必须相对于options.context. 递归遍历目录以查找匹配的文件options.extensions。文件和 glob 模式忽略options.extensions.

fix

类型： Boolean
默认： false

将启用ESLint 自动修复功能。
请注意：此选项将更改源文件。

formatter

类型： String|Function
默认： ‘stylish’

接受一个有一个参数的函数：一组 eslint 消息（对象）。该函数必须以字符串形式返回输出。您可以使用官方的eslint 格式化程序。

lintDirtyModulesOnly

类型： Boolean
默认： false

Lint 只更改文件，在启动时跳过 lint。

threads

类型： Boolean | Number
默认： false

将跨线程池运行 lint 任务。除非您指定一个数字，否则池大小是自动的。

错误和警告

默认情况下，插件将根据 eslint 错误/警告计数自动调整错误报告。 您仍然可以使用emitError 或 emitWarning选项强制执行此行为：

emitError

类型： Boolean
默认： true

发现的错误将始终发出，禁用设置为false.

emitWarning

类型： Boolean
默认： true

找到的警告将始终发出，禁用设置为false.

failOnError

类型： Boolean
默认： true

如果有任何错误，将导致模块构建失败，禁用设置为false.

failOnWarning

类型： Boolean
默认： false

如果有任何警告，将导致模块构建失败，如果设置为true.

quiet

类型： Boolean
默认： false

如果设置为，将仅处理和报告错误并忽略警告true。

outputReport

类型： Boolean|Object
默认： false

将错误的输出写入文件，例如用于报告 Jenkins CI 的 checkstyle xml 文件。
的filePath是一个绝对路径或相对于的WebPack配置：output.path。您可以formatter为输出文件传入一个不同的文件，如果没有传入，则将使用默认/配置的格式化程序

3.案例

3.1.index.js

这里故意使用不规范的格式。
src\index.js

function add(x,y){returnx + y               }

console.log(2 + 5          );

3.2.index.html

src\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>Hello Yiu</div>
</body>
</html>

3.3.配置

webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {},
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new ESLintPlugin({
            context: resolve(__dirname, 'src'),
            fix: true,
        }),
    ],
}

webpack学习

11.eslint