ESLint 检查 React 项目时，如何忽略 JSX 中的 htmlFor、className 属性-JavaScript中文网-JavaScript教程资源分享门户

ESLint 检查 React 项目时，如何忽略 JSX 中的 htmlFor、className 属性

ESLint 是一个非常强大的 JavaScript 代码检查工具，它可以在代码编写过程中提示和修复错误、警告以及代码风格问题。如果你正在使用 React 开发应用程序，你肯定会在 JSX 中使用 htmlFor 和 className 属性。然而，当你使用 ESLint 检查你的项目时，ESLint 会默认检查所有属性拼写是否正确，导致在 IDE 中出现许多不必要的错误或警告。在这篇文章中，我们将讨论如何忽略 JSX 中的 htmlFor 和 className 属性，避免出现不必要的错误和警告。

忽略 htmlFor 属性

在 React 中，我们使用 htmlFor 属性来替代 HTML 中的 for 属性，因为 for 属性在 JSX 中是 JavaScript 的保留关键字。当我们在 JSX 中使用 htmlFor 属性时，ESLint 会提示语法错误或警告。

为了忽略 htmlFor 属性的检查，我们可以在项目的 .eslintrc 文件中添加以下配置：

-
  -------- -
    ---------------------------------------- - -- -
      ------------------ ----------
      -------------------- -------
      -------- ---
    ---
    ------------------------- - -- -
      ----------- -
        -------- ----------- ------
      -
    --
  --
  ---------------- -
    -------------- -----
    ------------- ---------
    --------------- -
        ------ ----
    -
  --
  ------ -
    ---------- -----
    ------ ----
  --
  ---------- -
    --------
    ----------
  -
-

在这个配置中，我们添加了两个规则，分别是 "jsx-a11y/label-has-associated-control" 和 "jsx-a11y/label-has-for"。这两个规则用于检查我们的页面是否有关联的 label 和输入控件，其中 "labelAttributes" 配置了我们想要使用的标签类型（默认为 ["label"]），"controlAttributes" 配置为我们想要使用的控件类型（默认为 ["id"]）。而 "jsx-a11y/label-has-for" 规则则检查是否为 label 定义了 for 属性，并与相关控制保持关联。

忽略 className 属性

在 React 中，我们使用 className 属性来设置组件的 CSS 类。然而，在 JSX 中，class 是 JavaScript 的保留关键字。ESLint 在检查 JSX 类时会使用 class 检查，而不是 className。这通常会导致错误或警告。为了忽略 className 属性检查，我们可以添加以下配置：

-
  -------- -
    ------------- --- -----------------
    ------------------------------- --- - ------------- ------- ------- ---
    ------------------- --
    ---------------------- --
    --------------------- --- - --------------- ---- ---
    ---------------------------- --- - --------- ------ ------------ ---
    ------------ --
    ------------------- --- ---
    ------------------------- --- ---
    ------------------------------- --- - ---------- - --
  --
  ---------- -
    -------
  --
  ------ -
    ---------- -----
    ------- -----
    ------ -----
    ----------- ----
  --
  ---------------- -
      --------------- -
          ------ ----
      --
      ------------- --------
  -
-

在这个配置中，我们添加了多个规则，包括 "react/no-unknown-property"。这个规则用于忽略未知的属性，例如 className。

结论

通过添加适当的配置，我们可以忽略 JSX 中的 htmlFor 和 className 属性的检查。这样，我们就可以避免 IDE 中出现不必要的错误和警告，并提高我们的开发效率。

示例代码：

------ ----- ---- --------

----- ----------- - -- -- -
  ---- -------------------------
    ------ ---------------------------------
    ------ ------------- ----------- --
  ------
--

------ ------- ------------

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/66f75c54c5c563ced597d4fe