ESLint 配置

什么是 ESLint?

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C.Zakas 于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。 对于大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。
JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试，像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。
ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖同样的模式。为了便于人们的使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。
ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。

如何在 webpack 中配置？

安装依赖

首先我们就安装 eslint 的包，主要的包有两个，eslint 和 eslint-webpack-plugin，都是开发时依赖。/
注：仅 webpack 5 中使用 eslint-webpack-plugin。在 webpack 4中应该使用 eslint-loader（5中已废弃）。

yarn add eslint eslint-webpack-loader --dev

生成配置文件

有两种方法，如下：

直接去官网荡一份配置文件

贪图方便，就这么做，网址是 https://eslint.bootcss.com/demo/

点击 Rules Configuration，里面有各种各样的规则。

拉到最下面，点击 download，这样就可以下载好了，放到项目里即可。

自己生成

我们想自己配置的话，可以通过命令行实现，如下：

npx eslint --init

会有一些配置项供你选择，有箭头的，就是我认为不错的选项，如下：

1.How would you like to use ESLint? 你想要怎样使用 ESLint？
  To check syntax only 只检查语法
  To check syntax and find problems 检查语法和发现问题
❯ To check syntax, find problems, and enforce code style 检查语法，发现问题和强制代码风格

2.What type of modules does your project use? 你的项目使用什么类型的模块？
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

3.Which framework does your project use? 你的项目使用哪个框架？
  React
  Vue.js
❯ None of these

4.Does your project use TypeScript? › No / Yes 是否使用 TypeScript？

5.Where does your code run? 代码在那种环境下运行？（可多选）
✔ Browser
✔ Node

6.How would you like to define a style for your project? 使用风格？
❯ Use a popular style guide 流行的代码风格指导
  Answer questions about your style

7.Which style guide do you want to follow? 选择一种风格指导？
❯ Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

8.What format do you want your config file to be in? 配置文件的格式？
❯ JavaScript
  YAML
  JSON

9.在没有安装特定依赖的情况下，可能会提示你安装
  eslint-config-airbnb-base@latest 
  eslint@^7.32.0 || ^8.2.0 
  eslint-plugin-import@^2.25.2
  安装即可

10.Which package manager do you want to use? 如果选择安装依赖，会提示用什么管理器来安装？
  npm
❯ yarn
  pnpm

这样我们就会在目录下生成这样一个文件 .eslintrc.js

配置 webpack

这边只配置关键的代码，其他的代码参考其他文章

/** ./webpack.config.js **/
let path = require('path');
//...
let ESLintWebpackPlugin = require('eslint-webpack-plugin');
//...

module.exports = {
  //...
  devServer: {
     //overlay: true,// 增加一个代码校验弹层 webpack5 已经去除这个属性，默认添加
     port: 3000,
     open: true,
     compress: true,
     static: './dist'
  },
  //...
  plugins: [
    //..
    new ESLintWebpackPlugin()
    //..
  ]
}

建一个案例

以下我们用以例子来看出 eslint 已经生效

/** ./src/index.js **/
let arr = [1,2,3];
console.log(arr);

配置完成之后，yarn build 可见如下：

这就是提示你需要修改的错误。
可以忽略错误也可以修改错误，如下：

忽略错误

有几种方法可选

rule 配置

忽略特定行

/** ./src/index.js **/
let arr = [1,2,3];
console.log(arr);
//eslint-disable-line eol-last

结果

再运行下：

就发现少了一条

正常修复代码

跟着提示做就行，很无脑，就是比较烦

const arr = [1, 2, 3];
console.log(arr);

配置文件（可运行）

为了方便读者运行，放一份完整的 webpack

let path = require('path');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let ESLintWebpackPlugin = require('eslint-webpack-plugin');

let htmlPlugins = ['index'].map(chunkName=> {
  return new HtmlWebpackPlugin({
    filename: `${chunkName}.html`,
    inject:'body',
    chunks:[chunkName],
    template: `./public/${chunkName}.html`
  })
})

module.exports = {
  mode:'development',
  devServer: {
    port: 3000,
    open: true,
    compress: true,
    static: './dist'
  },
  entry: {
    index: './src/index.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, './src'),
        use:[
          {
            loader: 'babel-loader',
            options: {
              presets: [['@babel/preset-env',{
                useBuiltIns: 'usage',
                corejs: { version: 3 }
              }]],
              plugins: [['@babel/plugin-transform-runtime', {
                // "absoluteRuntime": false,
                // "corejs": 3,
                // "helpers": true,
                // "regenerator": true,
                // "version": "7.0.0-beta.0"
              }],['@babel/plugin-proposal-decorators', { "legacy": true }]]
            }
          }
        ]
      },
      {
        test:/\.(htm|html)$/,
        use: 'html-withimg-loader'
      },
      {
        test: /\.(jpeg|jpg|png|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10240,
            esModule: false,
            outputPath: 'img'
          }
        }]
      },
      {
        test: /\.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, {
          loader: 'css-loader',
          options: {
            modules: true
          },
        }, 'postcss-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    ...htmlPlugins,
    new MiniCssExtractPlugin({
      filename: 'main.css'
    }),
    new ESLintWebpackPlugin()
  ]
}