# vue/padding-line-between-tags

require or disallow newlines between sibling tags in template

# πŸ“– 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>
Now loading...

# πŸ”§ 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>
Now loading...

# Require newlines after <br>

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

<template> <div> <ul> <li> </li> <br /> <li> </li> </ul> </div> </template>
Now loading...

# Require newlines between <br> and <img>

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

<template> <div> <ul> <li> </li> <br /> <img /> <li> </li> </ul> </div> </template>
Now loading...

# Require consistent newlines

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

<template> <div> <ul> <li /> <li /> <li /> </ul> <div /> <div /> </div> </template>
Now loading...

# πŸš€ Version

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

# πŸ” Implementation