如何在 React 项目中添加 ESLint

在 React 项目中添加 Linting 规则对于提高代码质量、使代码更加一致并避免错误是必须的。

本文首次发布于 MyDevPa.ge 博客，请查看对软件开发人员有用的教程。

有一个流行的开源 JavaScript linting 工具，称为 ESLint，它用于自动检测 JavaScript 代码中发现的不正确模式。

以下是向 React 项目添加 linting 规则的分步方法：

安装 ESLint

首先，我们需要在 React 项目中安装 ESLint 作为 devDependency，因为我们在生产中不需要它们。

要安装，我们将使用以下命令。

npm i -D eslint

初始化 ESLint

接下来，我们必须通过在项目的根文件夹中添加配置文件 .eslintrc.json 来初始化 ESLint 配置。

这是一个示例配置。

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"],
  "rules": {
    // Here we can add our custom rules.
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

在我们的 .eslintrc.json 中添加扩展和插件属性。

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

由于我们添加了各种插件，我们需要首先通过运行下面给定的命令将它们安装为 devDependency。

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

添加规则

规则用于配置目的。我们可以通过三种不同的方式设置规则的错误级别。

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

？ JavaScript 字符串备忘单所有方法

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

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

添加 Linting 脚本

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

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

恭喜，现在如果您尝试运行这些命令中的任何一个，它应该可以成功！

此后您可以继续根据自己的喜好自定义 linting 规则，以确保代码的一致性和质量。

访问 MyDevPa.ge，在一分钟内免费创建您的免费作品集网站！

以上是如何在 React 项目中添加 ESLint的详细内容。更多信息请关注PHP中文网其他相关文章！