ESLint 插件推荐：eslint-plugin-react-JavaScript中文网-JavaScript教程资源分享门户

ESLint 是一个广泛使用的 JavaScript 代码检查工具，能够帮助开发者提高代码质量和可维护性。而 eslint-plugin-react 是针对 React 项目设计的 ESLint 插件，提供了丰富的 React 相关规则以及 JSX 语法检查功能，为 React 项目的开发提供了极大的便利。

本文将重点介绍 eslint-plugin-react 以及它的一些常用规则和用法，并给出相应的示例代码，帮助读者深入理解该插件的使用方法。

安装和配置

使用 eslint-plugin-react 需要先在项目中安装 eslint 和 eslint-plugin-react 两个包。

npm install eslint eslint-plugin-react --save-dev

安装完毕后，在项目的 .eslintrc 配置文件中添加插件：

{
  "plugins": [
    "react"
  ]
}

常用规则

eslint-plugin-react 提供了众多的规则，这些规则可以分为以下几类：

基本规则
JSX 规则
Hooks 规则
其他规则

下面，我们针对这些规则逐一进行介绍。

基本规则

react/display-name

检查组件是否定义了 displayName 属性。
```
"react/display-name": "warn"
```
react/jsx-key

检查是否给给动态生成的元素添加了 key 属性，以提高渲染效率。
```
"react/jsx-key": "error"
```
react/no-children-prop

禁止使用 children 属性，应该使用子组件来渲染内容。
```
"react/no-children-prop": "error"
```
react/no-danger

禁止使用 dangerouslySetInnerHTML，以防止 XSS 攻击。
```
"react/no-danger": "error"
```
react/no-deprecated

检查是否使用了废弃的 API。
```
"react/no-deprecated": "error"
```
react/no-find-dom-node

禁止使用 findDOMNode，应该使用 React Refs。
```
"react/no-find-dom-node": "error"
```
react/no-render-return-value

禁止在 render 方法中返回值。
```
"react/no-render-return-value": "error"
```
react/no-typos

检查 JSX 元素是否存在拼写错误。
```
"react/no-typos": "error"
```
react/no-unescaped-entities

禁止在 JSX 中使用未转义的实体字符。
```
"react/no-unescaped-entities": "error"
```
react/no-unused-state

检查是否定义了但未使用的 state 变量。
```
"react/no-unused-state": "error"
```
react/no-will-update-set-state

禁止在 componentWillUpdate 生命周期中使用 setState 方法。
```
"react/no-will-update-set-state": "error"
```
react/require-render-return

要求 render 方法必须返回值。
```
"react/require-render-return": "error"
```
react/self-closing-comp

要求无子元素的组件必须使用自闭合标签。
```
"react/self-closing-comp": "error"
```

JSX 规则

react/jsx-boolean-value

检查布尔型属性的取值情况。
```
"react/jsx-boolean-value": ["error", "never"]
```
react/jsx-curly-brace-presence

检查 JSX 元素是否正确使用了大括号，以控制变量的取值。
```
"react/jsx-curly-brace-presence": ["error", "never"]
```
react/jsx-filename-extension

检查文件名是否符合约定，如果是 JSX 文件，则应该以 .jsx 后缀结束。
```
"react/jsx-filename-extension": ["error", { "extensions": [".jsx"] }]
```
react/jsx-no-comment-textnodes

禁止在 JSX 中使用注释。
```
"react/jsx-no-comment-textnodes": "error"
```
react/jsx-no-duplicate-props

检查是否定义了重复的属性。
```
"react/jsx-no-duplicate-props": "error"
```
react/jsx-no-literals

禁止在 JSX 中使用字面量，应该使用常量或变量。
```
"react/jsx-no-literals": "error"
```
react/jsx-no-target-blank

禁止在 target="_blank" 的链接中使用 rel="noopener noreferrer"。
```
"react/jsx-no-target-blank": "error"
```
react/jsx-pascal-case

检查 JSX 元素是否符合 Pascal 约定。
```
"react/jsx-pascal-case": "error"
```
react/jsx-sort-props

检查 JSX 元素的属性是否按照字母顺序排序。
```
"react/jsx-sort-props": "error"
```

Hooks 规则

react-hooks/rules-of-hooks

检查使用 Hook 的规则，防止 Hook 的错误使用。
```
"react-hooks/rules-of-hooks": "error"
```
react-hooks/exhaustive-deps

检查 useEffect 和 useLayoutEffect 是否正确处理 dependencies。
```
"react-hooks/exhaustive-deps": "error"
```

其他规则

react/jsx-closing-tag-location

检查 JSX 元素闭合标签的位置是否嵌套正确。
```
"react/jsx-closing-tag-location": "error"
```
react/no-array-index-key

禁止在数组渲染中使用 index 作为 key 值。
```
"react/no-array-index-key": "error"
```

示例代码

以 "react/jsx-key" 和 "react/jsx-no-duplicate-props" 两个规则为例，我们来看看如何针对这些规则使用 eslint-plugin-react。

"react/jsx-key"

这个规则要求给动态生成的元素添加 key 属性，以下是一个错误的示例：

function List({ items }) {
  return <ul>{items.map(item => <li>{item.name}</li>)}</ul>;
}

这个示例中，虽然使用了 map 方法生成了多个 li 元素，但每个元素都没有添加 key 属性。如果代码量庞大，那么这样的渲染将会非常耗费性能，因为 React 需要重新渲染所有的元素。

正确的写法是，给每个 li 元素添加唯一的 key 属性。

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

在 .eslintrc 配置文件中，我们可以这样设置：

{
  "rules": {
    "react/jsx-key": "error"
  }
}

"react/jsx-no-duplicate-props"

这个规则要求每个 JSX 元素的属性都必须唯一，以下是一个错误的示例：

function Button({ text, onClick, onClick2 }) {
  return <button onClick={onClick} onClick={onClick2}>{text}</button>;
}

这个示例中，给 button 元素添加了两个相同的 onClick 属性，这显然是不正确的。

正确的写法是，将同类的属性合并为一个对象。

function Button({ text, onClicks }) {
  return <button {...onClicks}>{text}</button>;
}

在 .eslintrc 配置文件中，我们可以这样设置：

{
  "rules": {
    "react/jsx-no-duplicate-props": "error"
  }
}

总结

eslint-plugin-react 是一个非常实用的插件，它提供了许多官方推荐的 React 规则和修正方法。使用这些规则和修正方法可以帮助我们提高 React 项目的可维护性和代码质量，令代码更加优雅、易懂和易于维护。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/648c2b7448841e9894a7cdcf