[feature request] react/jsx-newline

[adrienharnay]

Hi,

I would find it interesting to provide a new option to the react/jsx-newline rule, so that there is a newline between JSX expressions ONLY if they are multiline.

I find that single line JSX expressions are easier to read and don't require a space between them, but multiline expressions can quickly become hard to read.

Would anyone be eager to help me implement this feature, as this would be the first rule I would contributing to the project?

Thanks in advance!

[ljharb]

Can you give an example of a single-line component? I'm having trouble imagining when a component would be so simple that it's best expressed as a single line.

[adrienharnay]

I realise now an example would have helped, here it is:

const MyComponent = () => {
  return (
    <div>
      <OneLineComponent />
      <AnotherOneLineComponent prop={prop} />
      
      <MultilineComponent
        prop1={prop1}
        prop2={prop2}
      />

      <OneLineComponent />
    </div>
  );
}

I was more talking about JSX expressions than components, sorry again for the confusion.

[ljharb]

ahhh ok, thanks. That sounds like a great option to me.

[adrienharnay]

Would anyone be up to help me tackle this?

[ljharb]

I'm happy to review a PR, and give guidance if you have specific questions.

[TildaDares]

Hi @ljharb, I'd like to work on this!

[TildaDares]

Just to clarify, when prevent == true we want to allow a newline ONLY if the JSX expression is multiline.

[ljharb]

@TildaDares go for it! I think we'd want to keep the same behavior by default, but add a new option that ignored single-line jsx expressions.

[TildaDares]

Thanks @ljharb! I'm not sure I'm on the right track but I tried adding a new option like this:

        properties: {
          prevent: {
            default: false,
            type: 'boolean',
          },
          allowMultilines: {
            type: 'boolean',
          },
        },

But I got this error:

Error: rule-tester:
	Configuration for rule "jsx-newline" is invalid:
	Value [{"prevent":true},{"allowMultilines":true}] should NOT have more than 1 items.

How do I configure the jsx-newline rule to allow more options?

[TildaDares]

This was a mistake on my part. The allowMultilines key:value pair should have been in the same object as prevent.

Thanks @ljharb! I'm not sure I'm on the right track but I tried adding a new option like this:

        properties: {
          prevent: {
            default: false,
            type: 'boolean',
          },
          allowMultilines: {
            type: 'boolean',
          },
        },

But I got this error:

Error: rule-tester:
	Configuration for rule "jsx-newline" is invalid:
	Value [{"prevent":true},{"allowMultilines":true}] should NOT have more than 1 items.

How do I configure the jsx-newline rule to allow more options?