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
}]
}
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.