Allow one blank line between elements at the same level

[gertqin]

🚀 Feature Proposal

Like prettier allows one blank line between statements in the same scope, prettyhtml could also allow one blank line between elements at the same level (potentially as a configuration option).

Motivation

It can improve readability of long html.

Example

This would then be allowed:

<div>
  <div class="header">
    <h1>Title...</h1>
  </div>

  <div class="content">
     <p>paragraph...</p>
  </div>
</div>

where as

<div>

  <div class="header">...</div>



  <div class="content">...</div>

</div>

should become

<div>
  <div class="header">...</div>

  <div class="content">...</div>
</div>

[StarpTech]

Hi @gertqin thank you for your proposal. I agree that it could help for some scenarios but I'm not convinced. Can you show me some real examples? Can you link me to the prettier option?

[gertqin]

Hi @StarpTech, thanks for considering the proposal :)

While I agree with you, that if you can keep your html components small enough this would not be needed. But in bigger applications this can be hard to achieve.

As an example here is (a bit simplified) vue component from one of my projects:

<div class="smart-table">
  <div class="smart-table-header">
    <slot name="header"/>
  </div>
  
  <template v-for="item in items">
    <div class="smart-table-item" :key="item.id">
      <slot name="item" :item="item"/>
    </div>
    <transition name="slide-down">
      <div v-if="isItemSelected(item)" class="smart-table-foldout">
        <slot name="foldout" :item="item" />
      </div>
    </transition>
  </template>

  <div class="smart-table-placeholder">
    <slot name="placeholder"></slot>
  </div>
</div>

Here the blank lines separates the header, item and placeholder sections, which I think makes the component more readable.

As for prettier, it is not an option - it is just part of their "rationale": https://prettier.io/docs/en/rationale.html#empty-lines

[StarpTech]

@gertqin I'm fine with your proposal. Would you mind to a create a PR?

[StarpTech]

Fixed in #58