eslint-plugin-vue

Appearance

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 and next accept a tag name (e.g., "div", "br") or "*" to match any tag. Pseudo-classes can be appended to filter by layout:
    • "*:single-line" - matches only single-line tags (elements that are entirely on a single line, including self-closing tags).
    • "*:multi-line" - matches only multi-line tags (tags that span multiple lines).
    • Tag names work too, e.g., "div:single-line" or "span:multi-line".

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...

Distinguish between single-line and multi-line tags ​

You can use the :single-line and :multi-line pseudo-classes in prev/next to enforce different spacing rules based on whether tags are single-line or multi-line.

json
{
  "vue/padding-line-between-tags": ["error", [
    { "blankLine": "always", "prev": "*:single-line", "next": "*:multi-line" },
    { "blankLine": "always", "prev": "*:multi-line", "next": "*:single-line" },
    { "blankLine": "always", "prev": "*:multi-line", "next": "*:multi-line" },
    { "blankLine": "never", "prev": "*:single-line", "next": "*:single-line" }
  ]]
}
Now loading...

🚀 Version ​

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

🔍 Implementation ​