如何为 React 项目配置 ESLint？

在本文中，我们将了解如何从头开始为您的 React 项目配置 ESLint。在开始之前，您可以参考之前的一篇关于 ESLint 介绍的文章，尽管这不是必需的。
谈到 ESLint，它是一个 linting 工具，可以发现并多次修复 JavaScript 代码中的问题，但问题是为什么要使用它？我的代码在没有 eslint 的情况下仍然可以运行，那么它有什么好处呢？为此，请考虑这样一种情况，您和您的朋友/同事正在开展一个小组项目，或者它也可以是您的个人项目，而工作偏见可能会出现在正确的代码语法或其样式上，您最终将专注于那些问题，但是为什么我们不拥有一个可以为我们工作的工具，我们将只专注于解决问题和构建项目，这听起来不错吧？所以让我们开始使用 ESLint。

安装：通过运行以下命令将 ESLint 作为 devDependency 安装到 React 项目中：

npm install -D eslint

配置：你可以根据你的用例配置 ESLint。有两种配置 ESLint 的方法：

配置注释：这些是嵌入到单个文件中以配置它们的 JavaScript 注释
配置文件： ESLint 将使用包含信息的 JavaScript/JSON/YAML 文件来配置整个目录。

在这个特定的配置中，我们将使用 JSON 格式，即.eslintrc.json来进行配置，或者您可以在package.json中创建eslintConfig属性并将这些配置写入该属性中。

目录根目录下的 .eslintrc.json 文件

`.eslintrc.json`中的属性：

“扩展”和“插件”：通过在扩展属性中添加文件名，我们可以继承其配置，而“插件”作为 ESLint 的扩展，可以执行许多功能。
在我们的`.eslintrc.json`文件中添加类似于下面给出的扩展和插件属性：

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"]
}

请注意，由于我们添加了各种插件，我们需要首先安装它们，因此运行以下命令将它们安装为 devDependencies ：

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

`import-plugin` 将帮助我们识别导入和导出时的常见问题； `jsx-a11y` 将捕获有关可访问性的错误，而 `react` 插件完全是关于 React 中使用的代码实践，因为我们使用的是 `eslint-plugin-react`，所以我们需要告知它我们使用的是哪个版本的 React让我们将它添加到我们的“设置”属性中，而不是说明当前的 React 版本，我们将通过使用关键字“检测”将此作业移交给设置，以便它将从 `package.json` 检测当前的 React 版本

..},
  "settings": {
    "react": {
      "version": "detect"
    }
}

“规则”：规则用于配置目的，您可以查看所有可以使用的规则 https://eslint.org/docs/rules/。您可以设置三种不同类型的规则错误级别：

“off”或 0：这将关闭规则。
“警告”或 1：这会将规则作为警告打开。
“错误”或 2：这会将规则作为错误打开。

让我们在配置中添加一些规则，您可以从上述所有规则列表中根据您的选择添加任何其他规则。

"rules": {
    "react/prop-types": 0,
    "indent": ["error", 2],
    "linebreak-style": 1,
    "quotes": ["error", "double"]
},

“ env ”和“ parserOptions”：在“env”属性中，我们将指定我们正在工作的环境。在 parserOptions 中，我们可以指定 JavaScript 选项，如 jsx 支持或 ecma 版本

"parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
},
"env": {
    "es6": true,
    "browser": true,
    "node": true
},

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"],
  "rules": {
    "react/prop-types": 0,
    "indent": ["error", 2],
    "linebreak-style": 1,
    "quotes": ["error", "double"]
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

最后但同样重要的是，让我们在 package.json 的“scripts”属性中添加一些命令来运行 ESLint

"scripts": {
    "lint": "eslint \"src/**/*.{js,jsx}\"",
    "lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
},

“lint”命令将在“src/”中的每个文件中运行 ESLint，即使您的“src/”文件夹中包含多个目录，此正则表达式命令也会递归地在它们上运行并运行 ESLint；如果 ESLint 报告了一些可自动修复的问题，那么“lint:fix”命令将执行这些自动修复。

运行 lint 的步骤：打开终端并键入以下命令。

npm 运行 lint

输出：

运行 lint 命令

运行 lint:fix 命令会自动修复一些错误