padding-line-between-tags.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/padding-line-between-tags	require or disallow newlines between sibling tags in template	v9.5.0

vue/padding-line-between-tags

require or disallow newlines between sibling tags in template

• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule requires or disallows newlines between sibling HTML tags.

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

    <div>
    </div>
    
    <div />

    <div />
    <!-- ✗ BAD: -->
    <div></div>
    <div>
    </div>
    <div /><div />
  </div>
</template>

🔧 Options

{
  "vue/padding-line-between-tags": ["error", [
    { "blankLine": "always", "prev": "*", "next": "*" }
  ]]
}

This rule requires blank lines between each sibling HTML tag by default.

A configuration is an object which has 3 properties; blankLine, prev and next. For example, { blankLine: "always", prev: "br", next: "div" } means “one or more blank lines are required between a br tag and a div tag.” You can supply any number of configurations. If a tag pair matches multiple configurations, the last matched configuration will be used.

• blankLine is one of the following:
  • always requires one or more blank lines.
  • never disallows blank lines.
  • consistent requires or disallows a blank line based on the first sibling element.
• prev any tag name without brackets.
• next any tag name without brackets.

Disallow blank lines between all tags

{ blankLine: 'never', prev: '*', next: '*' }

<template>
  <div>
    <div></div>
    <div>
    </div>
    <div />
  </div>
</template>

Require newlines after <br>

{ blankLine: 'always', prev: 'br', next: '*' }

<template>
  <div>
    <ul>
      <li>
      </li>
      <br />

      <li>
      </li>
    </ul>
  </div>
</template>

Require newlines between <br> and <img>

{ blankLine: 'always', prev: 'br', next: 'img' }

<template>
  <div>
    <ul>
      <li>
      </li>
      <br />

      <img />
      <li>
      </li>
    </ul>
  </div>
</template>

Require consistent newlines

{ blankLine: 'consistent', prev: '*', next: '*' }

<template>
  <div>
    <ul>
      <li />
      <li />
      <li />
    </ul>
    
    <div />
    
    <div />
  </div>
</template>

🚀 Version

This rule was introduced in eslint-plugin-vue v9.5.0

🔍 Implementation

• Rule source
• Test source