在上一节文章末尾，我们提出了一个问题，我们要如何控制代码风格的统一，避免一些低级错误。这一节我们就来介绍下解决这两个问题的方法：eslint语法检查。

背景

在日常开发过程中，项目一般都是多人合作。为了保证代码的统一和规范，我们需要借助eslint去完成。在此过程中，我们需要使用到eslint-loader 以及 eslint。

安装

yarn add -D eslint eslint-loader

基本配置

安装完成后，在webpack.config.js中添加如下配置：

/* ... */
module: {
  rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/, // 需要忽略掉node_modules，不然会对其中的内容也做检查
        loader: 'eslint-loader',
        options: {}
    }
  ]
}
/* ... */

配置完成后，eslint还需要知道具体的规则是什么。此时，我们需要在 package.json 文件中配置 eslintConfig 属性，或者在根目录下添加 .eslintrc 文件来配置eslint的规则。

但是手动配置规则显然比较麻烦，此时我们可以借助第三方的工具来完成这件事情。这里我们使用 airbnb 的配置。

想要使用airbnb的eslint规则，我们需要安装几个插件：eslint-config-arbnb-base 与 eslint-plugin-import。

yarn add -D eslint-config-airbnb-base  eslint-plugin-import

之后在 package.json 中添加如下配置：

"eslintConfig": {
  "extends": "airbnb-base"
}

或者在 .eslintrc 文件中添加：

 "extends": "airbnb-base"

这样就会继承airbnb的eslint配置。再次打包或者运行时，控制台就会给出相应的报错提示：

我们也可以通过添加 VScode, 或者小伙伴们所用的其他IDE的 ESlint插件 去辅助我们日常的开发。在这里，笔者使用的是 VScode，如果有跟笔者一样使用这个IDE的小伙伴，推荐安装这个插件：

安装并启用这个插件之后，我们就可以在编辑器中看到eslint给出的相应提示：

当我们将光标移动至波浪线上时，在弹出的窗口中点击 Quick Fix选项后，插件也会提供一些快速修复的方法, 使得修复更加便捷：

自动修复配置

如果我们需要自动修复这些问题，我们可以添加一项配置：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/, // 需要忽略掉node_modules，不然会对其中的内容也做检查
      loader: 'eslint-loader',
      options: {
          fix: true // 自动修复一些eslint问题
      }
    }
  ]
}

这样则会自动修复一些问题。但是不是所有的问题都会被自动修复，有一些仍需要手动修复：

此时我们只要根据给出的提示逐一修复即可。

配合babel-loader一起使用

行文至此，我们已经知道了 ESlint 怎么去使用。那么在日常开发中，如果先对所写的代码做过检查，然后再使用 babel-loader 转换一下，岂不是美滋滋？（手动滑稽）

那如何才能与上一节中提到的 babel-loader 一起去使用呢？当然是一起写到loader配置里就好啦~这里我们需要注意一点：loader的执行顺序是自左向右，自下向上的，简而言之就是按照从后往前的顺序执行。所以如果我们需要先检查代码，之后再对代码打包的话，那么 eslint-loader 需要配置在 babel-loader 之后：

// 这里由于都是匹配的js文件，所以我们将两个loader写在一起
// 注意写法的改变，原先直接是写的loader，现在改为use数组的形式
module: {
  rules: [
    {
      // 匹配.js文件
      test: /\.js$/,
      // 需要忽略掉node_modules，不然会对其中的内容也做检查, 会降低打包的性能
      exclude: /node_modules/,
      use: [
      	// 使用 babel-loader
        {
          loader: 'babel-loader',
          // loader的相关配置
          options: {
            presets: ['@babel/preset-env'],
          },
        }, 
        // 使用 eslint-loader, 配置写在 babel-loader之后，优先执行
        {
          loader: 'eslint-loader',
          options: {
            fix: true,
          },
        },
      ],
    },
  ],
},

配置完成后，我们就可以实现先做代码检查，后进行语法转换啦~

预告

结合上一节的内容，我们介绍了webpack在对js文件做处理时的一些基本操作，包括 语法转换 以及 语法检查。介绍完了js，在下一章节中，我们一起来看下webpack在处理css文件的时候又会做哪些基本操作呢？拭目以待吧~