Eslint 在Webpack中的配置

ESLint中文：
检测并修复 JavaScript 代码中的问题。 - ESLint - 插件化的 JavaScript 代码检查工具

我们在公司进行团队开发项目的时候，每个人的代码风格是不一样这样很容易导致了规范不统一，这个时候就需要使用一种规范来约束我们的代码，ESLint就是用来帮我约束团队代码规范的工具。

配置 eslint 配置文件

安装：

$ npm install eslint --save

初始化ESLint配置文件：

$ npx eslint --init

这样就初始化了一个ESLint的配置文件。

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

使用ESLint检查src文件夹下文件代码的是否符合配置的规范：

$ npx eslint src

我们还可以使用VSCode代码编辑器的插件来帮助我们约束代码规范。

eslint-loader

通过使用Webpack + eslint-loader 来帮我们约束代码。
安装：

npm install eslint-loader -D

进行配置：

module.exports = {
  // ...
  devServer: {
    // eslint 出现问题会在页面提示错误
    overlay: true,
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        // 排除node_modules下的代码
        exclude: /node_modules/, 
        use: ["babel-loader", "eslint-loader"]
      }]
  },
  // ...
}

接着我们运行项目就能看到浏览器中的提示错误。

eslint-loader更多配置项：
https://github.com/yannickcr/eslint-plugin-react#configuration

Git 提交检测 ESLint

当我们在Webpack的配置文件配置了ESLint是会影响我们打包速度的。还有一种方式就是Git提交的时候自动检测eslint代码规范，不符合就无法提交，这里就不再进行叙述了。