[jsx-indent-props]: Add Option To Set Indentation Relative To The Start Of Opening/Self-Closing Tag

[sotobry]

Hello there, it would be nice if there was an option to specify the indentation of props when they are spread on one line only.

This is what I'd like:

!playerHasLost && !playerHasWon
  && <Keyboard
       {...{ lettersToGuess, hasLetterBeenTried, addTriedLetter }}
     />

!playerHasLost && !playerHasWon
  && <Keyboard
       lettersToGuess={['a', 'b', 'c']}
     />

The jsx-closing-bracket-location rule is set to 'tag-aligned', and works just as expected. I'd like to indent my props 2 spaces relative to the start of the opening/self-closing tag location, not relative to the location of the first character on the line above.

If I set the rule to this:

'react/jsx-indent-props': ['error', { indentMode: 2 }]

then the code is formatted into this:

!playerHasLost && !playerHasWon
  && <Keyboard
    {...{ lettersToGuess, hasLetterBeenTried, addTriedLetter }}
     />

!playerHasLost && !playerHasWon
  && <Keyboard
    lettersToGuess={['a', 'b', 'c']}
     />

which doesn't look good.

If I set the rule to this:

'react/jsx-indent-props': ['error', { indentMode: 'first' }]

then, since there's only one line of spread props in the first example and just one prop in the second example, it will just let me indent it wherever I'd like, but it will not choose for me where, and so I have to format it manually.

In this specific example, using the tab button, it will add 2 spaces at a time, and eventually, since the location I'd like the props to start at is 5 spaces away from the starting position of the line above and not an even number, I naturally press TAB-TAB-TAB, realize I'm in the wrong place, press BACKSPACE (VSCode goes back 2 spaces at a time, and not 1), press SPACE, and then approach my face very close to the monitor to make sure that it is in the desired position, which is somewhat annoying.

Given this situation, could the jsx-indent-props rule be improved by adding an option that sets the indentation relative to the starting location of the opening/self-closing tag, so that I can set the rule to something like:

'react/jsx-indent-props': [
  'error',
  {
    indentMode: 2,
    location: 'tag-aligned', // it could be set to 'line-aligned', 'tag-aligned', 'first-prop-aligned',
    // OR
    relativeToOpeningTagLocation: true,
    // OR
    relativeTo: 'opening-tag'
  },
],

and have the props be indented as desired?

[ljharb]

Have you tried surrounding multiline jsx in parens? Like this:

!playerHasLost && !playerHasWon && (
  <Keyboard
    {...{ lettersToGuess, hasLetterBeenTried, addTriedLetter }}
  />
)

!playerHasLost && !playerHasWon && (
  <Keyboard
    lettersToGuess={['a', 'b', 'c']}
  />
)

without clear boundaries like that, trying to make multiline jsx indentation "look good" would require way more complexity in this plugin than I think would be worth it.