Error when enabling react/jsx-sort-props [Rules of eslint-plugin-react]

Question

I`m trying to sort props names alphabetically in my project using the plugin eslint-plugin-react .

I've read the jsx-sort-props rules option example and I'm here asking myself: What's props should be used in the <enable> field?

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

I've tried everything but always get an invalid configuration notification:

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

I'm editing it at my .eslintrc.json file:

{
  "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

You need to put your rules into the rules property of the object, not into the top level of the object:

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

This helps clearly delimit the difference between ESLint configuration settings and rules - otherwise, the overlap would be confusing, and if there were ever a rule whose name conflicted with a possible other top-level property, there'd be problems.