Rule proposal: vue/padding-line-between-blocks

[posva]

Please describe what the rule should do:

Enforce empty lines between blocks (template, script, style, and any other root level block)

What category should the rule belong to?

• Enforces code style
• Warns about a potential error
• Suggests an alternate way of doing something
• Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<!-- BAD -->
<template>
  <div></div>
</template>
<script>
export default {}
</script>
<custom></custom>

<!-- GOOD -->
<template>
  <div></div>
</template>

<script>
export default {}
</script>

<custom></custom>

Additional context

Having empty lines between blocks improves readability and allows quick navigation per paragraph ({/} in Vim)

similar to https://eslint.org/docs/rules/padding-line-between-statements#rule-details

[nathanchase]

+1 for this rule! Additionally, I'd like to see it implemented within any given element in a Vue template, like so:

<!-- GOOD -->
<template>
    <div>
        <p>Item 1</p>

        <p>Item 2</p>
    </div>
</template

<!-- BAD -->
<template>
    <div>
        <p>Item 1</p>
        <p>Item 2</p>
    </div>
</template

[posva]

@nathanchase That should definitely go in another rule as it there are many ways of configuring it. I even wonder if there isn't already something

[nathanchase]

@nathanchase That should definitely go in another rule as it there are many ways of configuring it. I even wonder if there isn't already something

I've looked, and surprisingly can't find anything within ESLint that applies specifically to ensuring newlines between elements in a Vue template.

[EmilyRosina]

➕ for the rule addition AND to separate @nathanchase's suggestion to another rule, as they're not the same thing 😸 but i also could not find any rules to satisfy either

[jacobparis]

This rule is similar to @nathanchase's suggestion and would make a good model for the new rule

https://eslint.org/docs/rules/lines-between-class-members

[gerasimvol]

same for script options, please 🙏

// BAD
export default {
  name: 'ComponentName',
  components: { .... }
}

// GOOD
export default {
  name: 'ComponentName',

  components: { .... }
}

[milewski]

Please also pad the root tag itself -->

<!-- GOOD -->
<template>

  <div>

      <div>Demo 1</div>

      <div>Demo 2</div>

  </div>

</template>

<!-- BAD -->
<template>
  <div>
      <div>Demo1</div>
      <div>Demo2</div>
  </div>
</template>

[jamesdixon]

Is there an analogous option for script methods? I'm badlyyyyyy in need of this 😄

[juanbrujo]

https://eslint.vuejs.org/rules/padding-line-between-blocks.html