在webpack中配置EsLint

2020-09-07 本文已影响0人喜剧之王爱创作

webpackgogo.jpg

什么是ESlint

总所周知，在团队编程中，同样的功能可能会有多种写法，为了方便大家对于代码的维护，我们会使用ESLint来约束自己的代码，实际上，它是一种规范。

安装EsLint

如果你要在项目中使用这种“规范”，我们首先需要对他进行安装

yarn add eslint -D

配置EsLint

光安装，还不能约束我们的代码规范，我们需要用一个配置文件来进行配置，这样的配置，我们可以简单的通过命令来生成，也可以通过引入外部的配置文件来配置，这里我们通过指令来进行配置。

npx eslint --init

提示的配置项，我们采用默认的即可
执行完命令后，会在我们的根目录下生成一个'.eslintrc.js'的文件，不同版本和不同的配置方式生成的文件内容可能不一样，这里我生成的内容是

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
  },
};

关于简单的Eslint用法，我们只需要执行指令即可，比我我要检测src下的代码

npx eslint src

因为我使用的是react项目，执行到这一步，还是不能完成代码的检验，如果你不是使用的React，接着看就行，感受一些这个过程，这里我们先做一个简单的演示，回头会将其集成到webpack中。
我们需要安装babel-eslint

yarn add babel-eslint -D

我们需要再配置eslintrc.js中的parser: 'babel-eslint'，这时候再执行，你会发现eslint生效了，但是可能会报一些

Expected linebreaks to be 'LF' but found 'CRLF'

之类的错，我们再在eslintrc.js的rule中配置

  rules: {
    'linebreak-style': [0, 'error', 'windows'],
  },

这样就好了，看下是不是ESlint都生效了呢？接下来去按照要求改吧！
当你执行npx eslint src的时候，命令行会输出好多lint信息，就像这样

eslinterr.png
但是我们这样看控制台修改显然是很麻烦的，所以，我们最好配合编辑器的eslint插件进行使用，他会根据你的配置文件，在文件中，对错误信息有所体现。就像下面这样

reactlinterr.png
这时候，你就可以根据提示修改了！
因为我们使用的是“Airbnb”的EsLint规范，所以有一些规范会按照“Airbnb”的规范来，但是假如我们不想使用它的某一条规范的约束，我们需要在'.eslintrc.js'中配置rules选项。具体如下，前提是我们开启了编辑器的ESLint，鼠标划上想要忽略的代码上面，如下

eslintErr2.png
我们找到其对应的规范项，在'eslintrc.js'中的rules下做下面的配置

'react/jsx-filename-extension': 0,

这时候你就会发现，我们就不再受其约束了。当然了，你也可以选择接受一些“大厂”常用的规范。

在webpack中使用EsLint

在上面的示例中，我们演示了EsLint的使用，其中我们使用了EsLint配置文件和编辑器插件(我是用的是VsCode)实现一个代码页面的可视化规范，但是，我们不能保证团队中的每一位成员都使用VsCode编辑器，没法保证他们的编辑器上都可以安装EsLint插件，但从命令行看结果，又效率很低，那么为了解决上面的问题，我们将EsLint集成到webpack中！

安装eslint-loader

要想将EsLint集成到webpack中，我们需要一个eslint-loader

yarn add eslint-loader -D

在webpack的loader配置项中做如下配置

    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: ['babel-loader', 'eslint-loader'],
    }],

我们针对js文件，在编译前对代码做规范，所以压迫将loader配置再babel-loader后面，先执行.这时候启动代码，你会发现，在命令行中，同样给出了我们运行npx eslint src一样的效果，但是这始终是在命令行里，为了方便使用，我们在devServer中加入配置项overlay: true这时候，运行项目，对于有错误的页面，会有下面这样的提示

pageerr.png
直接在页面上弹了一个层，里面的内容就是我们EsLint的内容，这样即便是我们的编辑器中没有EsLint插件，也可以很快的地位错误。

eslint-loader

上面我们主要是通过eslint-loader将Eslint集成到了Webapck打包中，其实，关于eslint-loader的配置项也有一些，下面我们针对几个代表性的配置项，做一下简单的介绍,我们可以进入到eslint-loader的git仓库https://github.com/webpack-contrib/eslint-loader
可以看到一些配置项，我们分别试一试

fix,当配置为true时，对于代码中一些浅显的问题，webpack会帮我们自动改掉
cache,因为eslint会有一个对代码分析的过程，势必会造成一些性能损耗，开启cache将对这种性能损耗，做出一些优化。

其他实践

我们上面介绍了Eslint的使用和配置，并结合webpack对其进行了实践，但我们会发现，将eslint注入到Webpack打包中，多少会影响我们的打包速度。于是在一些团队中，不去采用eslint-loader这样的工具，而是使用git 的钩子，在代码提交的做校验，但是这样会带来的问题就是无法实现图形化的展示，所以我们在入场开发中，要根据自己的情况，分析具体采用哪种方案。