启用 react/jsx-sort-props 时出错 [eslint-plugin-react 的规则]

Question

我正在尝试使用插件eslint-plugin-react在我的项目中按字母顺序对道具名称进行排序。

我已经阅读了jsx-sort-props 规则选项示例，我在这里问自己：在<enable>字段中应该使用什么道具？

...
"react/jsx-sort-props": [<enabled>, {
  "callbacksLast": <boolean>,
  "shorthandFirst": <boolean>,
  "shorthandLast": <boolean>,
  "multiline": "ignore" | "first" | "last",
  "ignoreCase": <boolean>,
  "noSortAlphabetically": <boolean>,
  "reservedFirst": <boolean>|<array<string>>,
}]
...

我什么都试过了，但总是收到无效的配置通知：

*Error: ESLint configuration in .eslintrc.JSON is invalid: Unexpected top-level property "react/jsx-sort-props".* 

我正在我的.eslintrc.json文件中编辑它：

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "next/core-web-vitals"
  ],

  "react/jsx-sort-props": [<enabled>, {
    "callbacksLast": true,
    "shorthandFirst": false,
    "shorthandLast": true,
    "multiline": "last",
    "ignoreCase": true,
    "noSortAlphabetically": false,
    "reservedFirst": false
  }]
}

Answer 1

您需要将规则放入 object 的rules属性中，而不是放入 object 的顶层：

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "next/core-web-vitals"
  ],
  "rules": {
    "react/jsx-sort-props": [<enabled>, {

这有助于清楚地界定 ESLint 配置设置和规则之间的区别——否则，重叠会造成混淆，如果有一个规则的名称与其他可能的顶级属性发生冲突，就会出现问题。