Extend react/jsx-props-no-multi-spaces to catch extra line breaks.

[jsphstls]

<button
  title='Some button'

  type='button'
/>

I was unable to find a rule that would prevent this and I think react/jsx-props-no-multi-spaces would be the most relevant one to extend. The issue is not that people would really do this. Instead, the goal is to improve the autofixing benefits of an existing rule with a hopefully minor adjustment.

[ljharb]

That sounds reasonable - want to make a PR?

[iiison]

is someone working on this?

[ljharb]

nope, go for it.

[iiison]

so, as far as I understand, we need to add auto-fixing functionality to this plugin?

[ljharb]

@iiison this issue is for adding additional warnings to the rule.

Separately, it would be ideal to maximize what can be safely autofixed.

[RisingGeek]

It's still not auto fixing extra line breaks
Versions that I'm using
eslint: 7.32.0
eslint-plugin-react: 7.28.0

Am I missing something?

[ljharb]

It isn’t supposed to; it just warns on them.

[roryabraham]

I actually am not a fan of this change, since it disallows comments over certain props in multiline jsx code. Leading to lots of ugly code like this:

<MyComponent
    someProp

    // Some comment about a prop's usage
    // eslint-disable-next-line react/jsx-props-no-multi-spaces
    someOtherProp
/>

As opposed to this:

<MyComponent
    someProp

    // Some comment about a prop's usage
    someOtherProp
/>

@jsphstls stated in his original posting:

The issue is not that people would really do this. Instead, the goal is to improve the autofixing benefits of an existing rule with a hopefully minor adjustment.

But the PR that was merged actually doesn't introduce any autofixing benefits. In my opinion #2756 should be reverted, or barring that, we should allow the user to configure a maximum number of allowable line breaks in multiline components.

[roryabraham]

Actually though, this isn't really necessary since no-multi-spaces covers single-line JSX props. So this rule is really just helpful in disabling multiple newlines between props, which I am fine turning off. It would still be nice to be able to set a maximum of 1 blank line between JSX props (allowing for comments on props but not multiple blank lines).

[ljharb]

@roryabraham that seems like a reasonable option to add, if you wanted to send a PR with lots of test cases.