Webpack学习笔记四:eslint语法检查

1,371

上一节文章末尾,我们提出了一个问题,我们要如何控制代码风格的统一,避免一些低级错误。这一节我们就来介绍下解决这两个问题的方法: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-baseeslint-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文件的时候又会做哪些基本操作呢?拭目以待吧~