启用react/jsx排序道具时出错[规则]

Question

我正试图用插件eslint插件反应按字母顺序对项目中的道具名称进行排序。

我读过jsx-排序-道具规则选项示例，我在这里问自己:在<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

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

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

这有助于明确划分ESLint配置设置和规则之间的差异--否则，重叠会使人困惑，而且如果有一条规则的名称与可能的其他顶级属性相冲突，就会出现问题。