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 |
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.
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>
{
"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.
{ blankLine: 'never', prev: '*', next: '*' }
<template>
<div>
<div></div>
<div>
</div>
<div />
</div>
</template>
{ blankLine: 'always', prev: 'br', next: '*' }
<template>
<div>
<ul>
<li>
</li>
<br />
<li>
</li>
</ul>
</div>
</template>
{ blankLine: 'always', prev: 'br', next: 'img' }
<template>
<div>
<ul>
<li>
</li>
<br />
<img />
<li>
</li>
</ul>
</div>
</template>
{ blankLine: 'consistent', prev: '*', next: '*' }
<template>
<div>
<ul>
<li />
<li />
<li />
</ul>
<div />
<div />
</div>
</template>
This rule was introduced in eslint-plugin-vue v9.5.0