[Bug]: Support custom reserved words in jsx-sort-props

[hisuwh]

Is there an existing issue for this?

• I have searched the existing issues and my issue is unique
• My issue appears in the command-line and not only in the text editor

Description Overview

eslint-plugin-react seems to be the go to linting plugin for any jsx/tsx, and indeed supports other frameworks than react by specifying the pragma setting.

However, the jsx-sort-props rule does not allow you to specify non react keywords in the reservedFirst option:

A customized reserved first list must only contain a subset of React reserved props

I'm using Vue which has a convention where their pseudo two-way binding prop v-model is always the first prop passed to a component - I wish to be able to enforce that for my tsx files.

        "react/jsx-sort-props": [
            "error",
            {
                "reservedFirst": ["v-model", "key", "ref"],
                "multiline": "last",
                "shorthandLast": true,
                "callbacksLast": true
            }
        ],

Expected Behavior

jsx-sort-props rule reservedFirst prop should allow non-react keywords

eslint-plugin-react version

v7.33.2

eslint version

v8.50.0

node version

v18.12.1

[ljharb]

The only acceptable way to manage this would likely be to add a new settings.react config that lets you define, for the whole plugin, what the reserved prop names are, that would default to:

const RESERVED_PROPS_LIST = [
  'children',
  'dangerouslySetInnerHTML',
  'key',
  'ref',
];

However, for anyone who's not using vue, this seems like it has the potential to cause a lot of bugs and confusion, since some may change it for aesthetic reasons, not realizing it must only match the renderer's reserved props.

[hisuwh]

it must only match the renderer's reserved props

@ljharb what's the reason for this?

[ljharb]

Because miscategorizing reserved props can lead to user confusion and bugs.

[mesqueeb]

@ljharb we use custom react directives like x-if and x-else and x-for, we want those custom directives to always be the first. How can we set custom directives like those in reservedFirst? It would be a lot easier if reservedFirst could just allow any attr.

Please note, we're not using Vue but React.