Help wanted: Spacing between tags

[rumenpetrov]

Hi everybody, I am searching for hours and I really can't find a solution to my problem. I will appreciate if somebody can help me with this.
My problem is related to tag formatting and spacing.
I need a rule that will enforce adding newlines between siblings.

Bad:

<div>
  <Button>{data.label}</Button>
  <List />
  <Button>
    <IconPreview /> 
    Button 2
  </Button>
  {showSomething === true ? (
    <Something />
  )}
  <Button>Button 3</Button>
  {showSomething === true ? (
    <Something />
  ) : (
    <ErrorMessage />
  )}
</div>

Good:

<div>
  <Button>{data.label}</Button>

  <List />

  <Button>
    <IconPreview /> 
    Button 2
  </Button>

  {showSomething === true ? (
    <Something />
  )}

  <Button>Button 3</Button>

  {showSomethingElse === true ? (
    <SomethingElse />
  ) : (
    <ErrorMessage />
  )}
</div>

I search in the prettier's rules, eslint's rules, everywhere and I am not finding it. If anybody knows a rule like this or point me to something I will be grateful.

[ljharb]

I don't think there's a rule for this anywhere. It might be reasonable. What would it be called, and how would it be configured? Would it apply to any jsx in any context? How would it interact with text nodes (as opposed to elements), as well as inline JS expressions?

[rumenpetrov]

@ljharb thank you for the quick response. Overall I see this as something really similar to 'padding-line-between-statements', maybe even as an extension of this rule.
About the context, I see it as any JSX in any context, but I am not really sure that I understand what you mean with this. If you have in mind certain situations that this may cause problems we can restrict some of the contexts for sure.
About the text nodes, I think we don't need new lines before or after them, but this could be a possible configuration option.
About the expressions, I added more cases to my initial example, I hope it makes more sense now.

[ljharb]

I'd be interested to review a PR for this rule.