[JSX] - should prettier keep blank lines after opening and before closing tags?

Prettier removes blank lines at the start and at the end of the blocks:

In

const func = () => {
  
  
  const foo = 1
  
  
  const bar = 2
  
  
  const baz = 3
  
  
}

if (true) {
    
  
  const foo = 1
  
  
  const bar = 2
  
  
  const baz = 3
  
  
}

Out

const func = () => {
  const foo = 1;

  const bar = 2;

  const baz = 3;
};

if (true) {
  const foo = 1;

  const bar = 2;

  const baz = 3;
}

But keeps extra one line in case of JSX tags:

In

const comp = (

  
<div>

  	<div>
  foo
  </div>
  
  
  
  	<div>
  bar
  </div>
  
  	<div>
  baz
  </div>
  
  </div>

)

Out

const comp = (
  <div>

    <div>
      foo
    </div>

    <div>
      bar
    </div>

    <div>
      baz
    </div>

  </div>
);

Example.

[vjeux]

Let’s summon @jlongster to make the final decision on this 😃

[rattrayalex]

It’s also worth mentioning that the general situation of

[several block-starts in a row] [several sibling blocks] [several block-ends in a row]

is less likely to occur in js code than in jsx. So enforcing the no-opening-newlines and no-closing-newlines rule makes more sense in js than in jsx.

eg; I would prefer this code:

for (i of outer) {
  for (j of inner) {
    for (k of innerer) {

      if (i === j) {
        console.log("i is j!")
      }

      if (j === k) {
        console.log("j is k!")
      }

      if (i === k) {
        console.log("i is k!")
      }
      
    }
  }
}

over this code:

for (i of outer) {
  for (j of inner) {
    for (k of innerer) {
      if (i === j) {
        console.log("i is j!")
      }

      if (j === k) {
        console.log("j is k!")
      }

      if (i === k) {
        console.log("i is k!")
      }    
    }
  }
}

but that happens so infrequently in JS (fortunately) that it’s not worth optimizing for. But it does happen pretty frequently in JSX.

Just my 2c (I’ve already committed the change to adopt this issue’s proposal)