Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[jsx-curly-spacing]: Add Option To Specify Spacing For Spread Props #3527

Open
sotobry opened this issue Feb 10, 2023 · 1 comment
Open

[jsx-curly-spacing]: Add Option To Specify Spacing For Spread Props #3527

sotobry opened this issue Feb 10, 2023 · 1 comment

Comments

@sotobry
Copy link

sotobry commented Feb 10, 2023

Hello there, it would be nice to have the option in the react/jsx-curly-spacing rule to specify whether spaces should be added for props that are spread.

This is what I would like:

<CustomComp prop1={{ key1: value1 }} prop2={value2} /> // if JSX attributes are not spread props, then remove spaces
<CustomComp { ...{ prop3, prop4 } } />                 // if JSX attributes are spread props, then add spaces

<CustomComp prop1={{ key1: value1 }} prop2={value2} { ...{ prop3, prop4 } } />

If I set the rule to this:

'react/jsx-curly-spacing': [ 'error', 'always' ]

Then, my code is formatted into this:

<CustomComp prop1={ { key1: value1 } } prop2={ value2 } /> // spaces added for props that are not spread
<CustomComp { ...{ prop3, prop4 } } />                     // spaces added for props that are spread

But if I set the rule to this:

'react/jsx-curly-spacing': [ 'error', 'never' ]

Then, my code is formatted into this:

<CustomComp prop1={{ key1: value1 }} prop2={value2} /> // spaces removed for props that are not spread
<CustomComp {...{ prop3, prop4 }} />                   // spaces removed for props that are spread

Yes, I know that Airbnb's style guide requires that the spaces be omitted for all props, including spread props, and so I'm proposing giving the option to making an exception for when the props are spread.

Maybe it could look something like this?

'react/jsx-curly-spacing': [
    'error',
    {
      when: 'never',
      attributes: { when: 'never', allowMultiline: false },
      children: { when: 'always' },
      spacing: { objectLiterals: 'never' },
      spreadProps: { when: 'always' }  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    },
  ],

Could this option be added, pretty please? It's my birthday today 🥺

@sotobry sotobry changed the title [jsx-curly-spacing]: [jsx-curly-spacing]: Add Option To Specify Spacing For Spread Props Feb 10, 2023
@ljharb
Copy link
Member

ljharb commented Feb 10, 2023

What is the justification - besides "it's your birthday" and "you like it", of course - for having inconsistent spacing on curlies?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants