Invalid configuration for rule "react/jsx-sort-props"

Question

I'm trying to sort props names alphabetically using the plugin eslint-plugin-react but I'm getting this error:

[Error ] .eslintrc.json: Configuration for rule "react/jsx-sort-props" is invalid: Value {"callbacksLast":true,"shorthandFirst":false,"shorthandLast":true,"multiline":"last","ignoreCase":true,"noSortAlphabetically":false} should NOT have additional properties. 

This is my .eslintrc.json file:

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

  "rules": {
    "react/jsx-sort-props": [
      "2",
      {
        "callbacksLast": true,
        "shorthandFirst": false,
        "shorthandLast": true,
        "multiline": "last",
        "ignoreCase": true,
        "noSortAlphabetically": false
      }
    ]
  }
}

What I'm missing?

Answer 1

There are two issues:

• The severity option, if you're using a number, should be a number, not a string that contains a number - 2, not "2". (Though, personally, I'd suggest using "error" instead - it makes it clearer from reading the config what the rule means for your project - "error" makes more intuitive sense than 2)
• There is a bug in the linter rule's jsx-sort-props.js - although the docs reference a multiline property, said property does not exist anywhere in the lint rule implementation, and so an error is thrown when you pass in an object containing that property. Remove it.

"rules": {
    "react/jsx-sort-props": [
        2,
        {
            "callbacksLast": true,
            "shorthandFirst": false,
            "shorthandLast": true,
            "ignoreCase": true,
            "noSortAlphabetically": false
        }
    ]
}