jsx-one-expression-per-line should ignore inline elements

It doesn’t seem to make sense to one-line inline elements.

For example, one-lining the em element in the example below doesn’t make sense.

<Styled.PasswordInstructions errored={ !!formErrors.userPassword }>
  Passwords must be at least 8 characters long and can&apos;t be
  things like <em>password</em>, <em>123456</em> or <em>abcdef</em>.
</Styled.PasswordInstructions>

Here is the “fixed” version.

<Styled.PasswordInstructions errored={ !!formErrors.userPassword }>
  Passwords must be at least 8 characters long and can&apos;t be
  things like
  <em>
    password
  </em>
  ,
  <em>
    123456
  </em>
  or
  <em>
    abcdef
  </em>
  .
</Styled.PasswordInstructions>

I could also see an option allowing the developer to choose which elements to ignore along with an ignoreInline option.

[MrHen]

I recently had to disable react/jsx-one-expression-per-line because it made things like this much harder to read:

        <div>
            <span>ABC</span>
            { one && <span>DEF</span> }
            <span>GHI {two} JKL</span>
        </div>

Result:

        <div>
            <span>
                ABC
            </span>
            { one &&
                <span>
                    DEF
                </span>
            }
            <span>
                GHI
                {' '}
                {two}
                {' '}
                JKL
            </span>
        </div>

What I want to prevent is someone trying to inline nested tags. I don’t care about people using <span>ABC</span> – that’s easy enough to read. I can understand why the lint rule current does what it does but it would be handy to have an option to ignore inlined non-tag expressions.

[ljharb]

See #1855; I think they’re related.