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