Skip to content

Rule for enforcing max 1 prop per line only when tag spans multiple lines #878

Closed
@kentor

Description

@kentor
Contributor

There should be a rule that activates max-props-per-line (with maximum: 1) only when the JSX element spans multiple lines. Furthermore, it should enable jsx-first-prop-new-line only when there are more than 1 prop.

Valid:

<Hello a="a" b="b" /> // does not span multiline, so it's okay to have more than 1 prop per line

<Hello
  a="a"
  b="b"
/> // also fine

<Hello a={{
  foo: 'bar',
}} />

<Hello 
  a={{
    foo: 'bar',
  }} 
/>

<Hello
  a={{
    foo: 'bar',
  }}
  b="b"
/> // enforce first prop new line because prop count > 1 AND it spans multiple lines

Invalid:

<Hello 
  a="a"
  b="b" c="c"
/>

<Hello a={{
  foo: 'bar',
}} b="b" /> // passes now with jsx-max-props-per-line actually... maybe shouldn't?

The current rules jsx-max-props-per-line and jsx-first-prop-new-line are not enough to enforce this.

Activity

changed the title [-]Rule for enforcing each prop to be in a new line if jsx element spans multiple lines[/-] [+]Rule for enforcing max 1 prop per line only when tag spans multiple lines[/+] on Oct 2, 2016
ljharb

ljharb commented on Oct 2, 2016

@ljharb
Member

What you want would exactly match Airbnb's indentation style, so I'm a strong +1 for this.

kentor

kentor commented on Oct 2, 2016

@kentor
ContributorAuthor

Cool. I have an implementation. The issue is with naming, and it's also possible for this rule to conflict with jsx-first-prop-new-line (if it's set to never), so not sure what the protocol is for handling that.

Another option is to extend jsx-first-prop-new-line with "multiprop" option
edit: actually multiprop should only apply when it's multiline

petersendidit

petersendidit commented on Oct 3, 2016

@petersendidit
Contributor

Should this be an option of jsx-max-props-per-line?

kentor

kentor commented on Oct 3, 2016

@kentor
ContributorAuthor

We could have an option on max-props-per-line to kick in only when tag spans multiple lines. But there's still the issue of enforcing the first prop to be in a new line when there are multiple props and the tag spans multiple lines.

ljharb

ljharb commented on Oct 3, 2016

@ljharb
Member

We may want to do a number of these things.

We should definitely have an option on max-props-per-line to kick in only when the tag spans multiple lines.

If we then still need another rule or option, that's fine.

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ljharb@petersendidit@kentor

        Issue actions

          Rule for enforcing max 1 prop per line only when tag spans multiple lines · Issue #878 · jsx-eslint/eslint-plugin-react