Webpack与ESLint

叁歲伎倆 2024-04-18 14:17 59阅读 0赞

### 文章目录 ###

*  概念
 *  使用

# 概念 #

在团队中，每个人的代码风格都不尽相同。自然的，提交到代码库里的代码也就风格多样。

这不是一个好事，统一的代码风格有助于团队成员理解他人写的代码，也易于维护。

那么想要所有人的代码风格统一，我们就需要用到ESLint。

# 使用 #

首先得要安装`eslint`：

yarn add eslint

然后进行ESLint的初始化：

npx eslint --init

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]  
初始化过程会让我们根据实际情况做几个选择，例如我们用的模块引入方式、用了什么框架、有没有用TypeScript之类的。

接着在项目根目录下就会生成一个`.eslintrc.js`文件：

module.exports = {
        
      env: {
        
        browser: true,
        es6: true,
      },
      extends: [
        'airbnb',
      ],
      globals: {
        
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly',
      },
      parserOptions: {
        
        ecmaFeatures: {
        
          jsx: true,
        },
        ecmaVersion: 2018,
        sourceType: 'module',
      },
      plugins: [
        'react',
      ],
      rules: {
        
      },
    };

这个时候就可以通过`npx eslint src(源码目录)`来对代码进行一个检查了：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]

实际上，如果用的是VS Code这样的IDE，可以去安装一个ESLint的插件：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 2]

这样一旦代码出现什么不符合在ESLint中设置的代码风格的情况就会在对应代码下出现红色波浪线提醒。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 3]

说了这么久似乎跟Webpack也没什么关系。也确实，ESLint与Webpack的确是没什么关系的，不过如果我们想在Webpack打包过程中对代码进行一个风格检查就有关系了。

为了做到这一点，我们需要`eslint-loader`这个loader。

安装之后，对Webpack的配置文件进行配置：

{
        
        ...,
        module: {
        
            rules: [
                {
        
                    test: /\.jsx$/,
                    exlcude: /node_modules/,
                    use: ['babel-loader', 'eslint-loader']
                }
            ]
        }
    }

这样再次打包就可以在命令行中看见代码风格检测出的问题了。

不过这样有个问题，这跟通过`npx eslint src`没有区别。

解决这个问题可以通过将`devServer.overlay`设置为`true`解决。注意：模式要是在开发模式下。

那么这个配置项的作用就是将编译过程中出现的所有ERROR显示在网页中：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 4]

如果还想显示WARNING，则这样设置：

{
        
        devServer: {
        
            overlay: {
        
                errors: true,
                warnings: true
            }
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d4532c46c0654516adb00902926e018c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a0df07c4498d47879537311774f2211e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a59d90ee79f34e8dace5b3d3e85bf986.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ba54cd6f5048430bae24bbba917dd05f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c75ecbcfc0624a019fa4de5ecead6f52.png