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

【问题标题】：Error when enabling react/jsx-sort-props [Rules of eslint-plugin-react]启用 react/jsx-sort-props 时出错 [eslint-plugin-react 的规则]
【发布时间】：2022-02-14 09:12:40
【问题描述】：

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

我已经阅读了jsx-sort-props rules option example，我在这里问自己：<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
  }]
}

【问题讨论】：

标签： javascript reactjs json next.js eslint

【解决方案1】：

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

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

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

【讨论】：

我已经更新了我的.eslintrc.json，现在我发现了一个新错误，说我的配置对规则 "react/jsx-sort-props" 无效。我错过了什么？请参阅此相关主题：Invalid configuration for rule "react/jsx-sort-props"
您觉得其中一个答案有用吗？请记住，当某个答案解决了您的问题时，您可以考虑点赞或接受它。