demo18源码地址

    创建一个空文件夹，npm init -y，npm webpack webpack-cli -D 起手式，之后安装 eslint 依赖

    npm i eslint -D

    使用 npx 运行此项目中的 eslint 来初始化配置，npx eslint --init
    image.png

    image.png

    这里会有选择是React/Vue/Javascript，我们统一都选择Javascript。选完后会在项目的根目录新建一个.eslintrc.js配置文件

    1. module.exports = {
    2.   env: {
    3.     browser: true,
    4.     es6: true
    5.   },
    6.   extends: 'eslint:recommended',
    7.   globals: {
    8.     Atomics: 'readonly',
    9.     SharedArrayBuffer: 'readonly'
    10.   },
    11.   parserOptions: {
    12.     ecmaVersion: 2018,
    13.     sourceType: 'module'
    14.   },
    15.   rules: {}
    16. }

    里面就是 eslint 的一些规范，也可以定义一些规则，具体看 eslint 配置规则
    image.png
    在index.js中随便写点代码来测试eslint
    image.png
    eslint 报错提示，变量定义后却没有使用，如果在编辑器里没出现报错提示，需要在 vscode 里先安装一个 eslint 扩展，它会根据你当前目录的下的 .eslintrc.js 文件来做作为校验的规则
    image.png
    也可以通过命令行的形式校验整个 src 目录下的文件
    image.png
    如果你觉得某个规则很麻烦，想屏蔽掉某个规则的时候，可以这样，根据 eslint 的报错提示，比如上面的 no-unused-vars，将这条规则复制一下，在 .eslintrc.js 中的 rules 里配置一下，"no-unused-vars": 0，0 表示禁用，保存后，就不会报错了，但是这种方式是适用于全局的配置，如果你只想在某一行代码上屏蔽掉 eslint 校验，可以这样做

    / eslint-disable no-unused-vars / let a = ‘1’

    这个 eslint 的 vscode 扩展和 webpack 是没有什么关联的，我们现在要讲的是如何在 webpack 里使用 eslint，首先安装一个插件

    npm i eslint-loader -D

    在webpack.config.js中配置

    1. /* eslint-disable no-undef */
    2. // eslint-disable-next-line no-undef
    3. const path = require('path')
    5. module.exports = {
    6.   mode: 'production',
    7.   entry: {
    8.     app: './src/index.js' // 需要打包的文件入口
    9.   },
    10.   module: {
    11.     rules: [
    12.       {
    13.         test: /\.js$/, // 使用正则来匹配 js 文件
    14.         exclude: /nodes_modules/, // 排除依赖包文件夹
    15.         use: {
    16.           loader: 'eslint-loader' // 使用 eslint-loader
    17.         }
    18.       }
    19.     ]
    20.   },
    21.   output: {
    22.     // eslint-disable-next-line no-undef
    23.     publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址
    24.     // eslint-disable-next-line no-undef
    25.     path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录
    26.     filename: 'bundle.js' // 打包后生产的 js 文件
    27.   }
    28. }

    由于 webpack 配置文件也会被 eslint 校验，这里我先写上注释，关闭校验
    如果你有使用 babel-loader 来转译，则 loader 应该这么写
    loader: ['babel-loader', 'eslint-loader']
    rules 的执行顺序是从右往左，从下往上的，先经过 eslint 校验判断代码是否符合规范，然后再通过 babel 来做转移
    配置完 webpack.config.js，我们将 index.js 还原回之前报错的状态，不要使用注释关闭校验，然后运行打包命令，记得去 package.json 配置 script

    如：设置 fix 为 true，它会帮你自动修复一些错误，不能自动修复的，还是需要你自己手动修复

    { loader: ‘eslint-loader’, // 使用 eslint-loader options: { fix: true } }