Skip to content
On this page

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.

Now loading...

πŸ”§ Options

json
{
  "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: '*' }

Now loading...

Require newlines after <br>

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

Now loading...

Require newlines between <br> and <img>

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

Now loading...

Require consistent newlines

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

Now loading...

πŸš€ Version

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

πŸ” Implementation