[New]jsx-newline: Enforce a new line after jsx elements and expressions

[jzabala]

Closes #2630

[jzabala]

I don't get why the README generation of the build is failing. I need help.

[ljharb]

@jzabala the autogeneration isn't failing; you have to manually add it, and the autogeneration validates that you added it.

[ljharb]

Let's make sure all the test cases are ran in the default parser, babel-eslint, and the typescript parser.

[ljharb]

how is this not a warning? there's no newline after the element.

[jzabala]

In the Good part of the issue description the same example is giving without a newline. That is why the rule only warns about newlines between elements and expressions, no literals like text and numbers.

[jzabala]

@jzabala the autogeneration isn't failing; you have to manually add it, and the autogeneration validates that you added it.

Fixed. Thanks.

Let's make sure all the test cases are ran in the default parser, babel-eslint, and the typescript parser.

Done.
Note: the tests with Fragments are not run against the default parser. Those were breaking the build.

Hi @ljharb. I addressed all your comments. Thanks for taking the time to review the PR 🙂

[ljharb]

@rumenpetrov can you confirm that this rule will meet your needs?

[rumenpetrov]

@jzabala @ljharb thank you for your great work. The PR almost covers my needs. I just have a remark about the case where we have text along with other components. I didn't provide enough details last time on how it should be implemented, so this is on me, sorry about that. I will try to clear it now.

When there is a text as a child of a parent component I don't need the new lines for its children. I need the new lines only when the children are other components and there is no text.
Let me know if this makes sense to you or if you think this could be a potential problem.

Bad

<h1>
  This is
  <em>short</em>

  <strong> title</strong>
</h1>

// The new line before the span here could be a potential conflict with 'prettier'
<Button>
  <IconPreview />
  Really looooooooooooooong button name

  <span>a suffix</span>
</Button>

Good

<h1>This is <em>short</em><strong> title</strong></h1>

<Button>
  <IconPreview />
  Really looooooooooooooong button name
  <span>a suffix</span>
</Button>

Also, I am not really sure how to test this PR locally or with a real project. @jzabala can you point me to a documentation page or an article related to this?

[doumart]

Don't want to annoy anyone but does somebody know if PR is still in the process of being merged? I REALLY want this rule. It would save a lot of time of my team