Create padding-line-between-tags rule

docs/rules/README.md

@@ -257,6 +257,7 @@ For example:
 | [vue/require-name-property](./require-name-property.md) | require a name property in Vue components |  | :hammer: |
 | [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
 | [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components |  | :hammer: |
+| [vue/padding-line-between-tags](./padding-line-between-tags.md) | Insert newlines between sibling tags in template  | :wrench: | :warning: |
 | [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: | :hammer: |
 | [vue/v-for-delimiter-style](./v-for-delimiter-style.md) | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
 | [vue/v-on-function-call](./v-on-function-call.md) | enforce or forbid parentheses after method calls without arguments in `v-on` directives | :wrench: | :hammer: |

docs/rules/padding-line-between-tags.md

@@ -0,0 +1,161 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/padding-line-between-tags
+description: Require or disallow newlines between sibling tags in template
+---
+# vue/padding-line-between-tags
+
+> Require or disallow newlines between sibling tags in template
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule requires or disallows newlines between sibling HTML tags.
+
+<eslint-code-block fix :rules="{'vue/padding-line-between-tags': ['error']}">
+
+```vue
+<template>
+  <div>
+    <!-- ✓ GOOD: -->
+    <div></div>
+
+    <div>
+    </div>
+
+    <div />
+    <!-- ✗ BAD: -->
+    <div></div>
+    <div>
+    </div>
+    <div />
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: 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.
+
+- `blankLine` is one of the following:
+  - `always` requires one or more blank lines.
+  - `never` disallows blank lines.
+- `prev` any tag name without brackets.
+- `next` any tag name without brackets.
+
+### Disallow blank lines between all tags
+
+`{ blankLine: 'never', prev: '*', next: '*' }`
+
+<eslint-code-block fix :rules="{'vue/padding-line-between-tags': ['error', [
+  { blankLine: 'never', prev: '*', next: '*' }
+]]}">
+
+```vue
+<template>
+  <div>
+    <div></div>
+    <div>
+    </div>
+    <div />
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
+### Require newlines after `<br>`
+
+`{ blankLine: 'always', prev: 'br', next: '*' }`
+
+<eslint-code-block fix :rules="{'vue/padding-line-between-tags': ['error', [
+  { blankLine: 'always', prev: 'br', next: '*' }
+]]}">
+
+```vue
+<template>
+  <div>
+    <ul>
+      <li>
+      </li>
+      <br />
+
+      <li>
+      </li>
+    </ul>
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
+### Require newlines before `<br>`
+
+`{ blankLine: 'always', prev: '*', next: 'br' }`
+
+<eslint-code-block fix :rules="{'vue/padding-line-between-tags': ['error', [
+  { blankLine: 'always', prev: '*', next: 'br' }
+]]}">
+
+```vue
+<template>
+  <div>
+    <ul>
+      <li>
+      </li>
+
+      <br />
+      <li>
+      </li>
+    </ul>
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
+### Require newlines between `<br>` and `<img>`
+
+`{ blankLine: 'always', prev: 'br', next: 'img' }`
+
+<eslint-code-block fix :rules="{'vue/padding-line-between-tags': ['error', [
+  { blankLine: 'always', prev: 'br', next: 'img' }
+]]}">
+
+```vue
+<template>
+  <div>
+    <ul>
+      <li>
+      </li>
+      <br />
+
+      <img />
+      <li>
+      </li>
+    </ul>
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/padding-line-between-tags.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/padding-line-between-tags.js)

lib/index.js

@@ -183,6 +183,7 @@ module.exports = {
     'script-setup-uses-vars': require('./rules/script-setup-uses-vars'),
     'singleline-html-element-content-newline': require('./rules/singleline-html-element-content-newline'),
     'sort-keys': require('./rules/sort-keys'),
+    'padding-line-between-tags': require('./rules/padding-line-between-tags'),
     'space-in-parens': require('./rules/space-in-parens'),
     'space-infix-ops': require('./rules/space-infix-ops'),
     'space-unary-ops': require('./rules/space-unary-ops'),

lib/rules/padding-line-between-tags.js

@@ -0,0 +1,217 @@
+/**
+ * @author dev1437
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+/**
+ * Split the source code into multiple lines based on the line delimiters.
+ * Copied from padding-line-between-blocks
+ * @param {string} text Source code as a string.
+ * @returns {string[]} Array of source code lines.
+ */
+function splitLines(text) {
+  return text.split(/\r\n|[\r\n\u2028\u2029]/gu)
+}
+
+/**
+ * @param {RuleContext} context
+ * @param {VElement} tag
+ * @param {VElement} sibling
+ */
+function insertNewLine(context, tag, sibling) {
+  context.report({
+    messageId: 'always',
+    loc: sibling.loc,
+    // @ts-ignore
+    fix(fixer) {
+      return fixer.insertTextAfter(tag, '\n')
+    }
+  })
+}
+
+/**
+ * @param {RuleContext} context
+ * @param {VEndTag | VStartTag} endTag
+ * @param {VElement} sibling
+ */
+function removeExcessLines(context, endTag, sibling) {
+  context.report({
+    messageId: 'never',
+    loc: sibling.loc,
+    // @ts-ignore
+    fix(fixer) {
+      const start = endTag.range[1]
+      const end = sibling.range[0]
+      const paddingText = context.getSourceCode().text.slice(start, end)
+      const lastSpaces = splitLines(paddingText).pop()
+      return fixer.replaceTextRange([start, end], `\n${lastSpaces}`)
+    }
+  })
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+/**
+ * @param {RuleContext} context
+ */
+function checkNewline(context) {
+  /** @type {Array<{blankLine: "always" | "never", prev: string, next: string}>} */
+  const options = context.options[0] || [
+    { blankLine: 'always', prev: '*', next: '*' }
+  ]
+
+  /** @type {Map<string, string[]>} */
+  const alwaysBlankLine = new Map()
+  /** @type {Map<string, string[]>} */
+  const neverBlankLine = new Map()
+
+  for (const option of options) {
+    if (option.blankLine === 'always') {
+      const tagValue = alwaysBlankLine.get(option.prev)
+      if (tagValue) {
+        alwaysBlankLine.set(option.prev, [...tagValue, option.next])
+      } else {
+        alwaysBlankLine.set(option.prev, [option.next])
+      }
+    } else {
+      const tagValue = neverBlankLine.get(option.prev)
+      if (tagValue) {
+        neverBlankLine.set(option.prev, [...tagValue, option.next])
+      } else {
+        neverBlankLine.set(option.prev, [option.next])
+      }
+    }
+  }
+
+  /**
+   * @param {VElement} block
+   */
+  return (block) => {
+    const endTag = block.endTag || block.startTag
+    const lowerSiblings = block.parent.children
+      .filter(
+        (element) =>
+          element.type === 'VElement' && element.range !== block.range
+      )
+      .filter((sibling) => sibling.range[0] - endTag.range[1] > 0)
+
+    if (lowerSiblings.length === 0) {
+      return
+    }
+
+    const closestSibling = lowerSiblings[0]
+
+    const element = /** @type {VElement} */ (closestSibling)
+    const lineDifference = element.loc.start.line - endTag.loc.end.line
+
+    if (
+      neverBlankLine.has('*') &&
+      // @ts-ignore
+      (neverBlankLine.get('*').includes('*') ||
+        // @ts-ignore
+        neverBlankLine.get('*').includes(element.name))
+    ) {
+      if (
+        alwaysBlankLine.has(block.name) &&
+        // @ts-ignore
+        (alwaysBlankLine.get(block.name).includes('*') ||
+          // @ts-ignore
+          alwaysBlankLine.get(block.name).includes(element.name))
+      ) {
+        if (lineDifference === 1) {
+          insertNewLine(context, block, element)
+        }
+      } else if (lineDifference > 1) {
+        removeExcessLines(context, endTag, element)
+      }
+    } else if (
+      alwaysBlankLine.has('*') &&
+      // @ts-ignore
+      (alwaysBlankLine.get('*').includes('*') ||
+        // @ts-ignore
+        alwaysBlankLine.get('*').includes(element.name))
+    ) {
+      if (
+        neverBlankLine.has(block.name) &&
+        // @ts-ignore
+        (neverBlankLine.get(block.name).includes('*') ||
+          // @ts-ignore
+          neverBlankLine.get(block.name).includes(element.name))
+      ) {
+        if (lineDifference > 1) {
+          removeExcessLines(context, endTag, element)
+        }
+      } else if (lineDifference === 1) {
+        insertNewLine(context, block, element)
+      }
+    } else {
+      if (
+        neverBlankLine.has(block.name) &&
+        // @ts-ignore
+        (neverBlankLine.get(block.name).includes('*') ||
+          // @ts-ignore
+          neverBlankLine.get(block.name).includes(element.name))
+      ) {
+        if (lineDifference > 1) {
+          removeExcessLines(context, endTag, element)
+        }
+      } else if (
+        alwaysBlankLine.has(block.name) &&
+        // @ts-ignore
+        (alwaysBlankLine.get(block.name).includes('*') ||
+          // @ts-ignore
+          alwaysBlankLine.get(block.name).includes(element.name)) &&
+        lineDifference === 1
+      ) {
+        insertNewLine(context, block, element)
+      }
+    }
+  }
+}
+
+module.exports = {
+  meta: {
+    type: 'layout',
+    docs: {
+      description:
+        'require or disallow newlines between sibling tags in template',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/padding-line-between-tags.html'
+    },
+    fixable: 'whitespace',
+    schema: [
+      {
+        type: 'array',
+        items: {
+          type: 'object',
+          properties: {
+            blankLine: { enum: ['always', 'never'] },
+            prev: { type: 'string' },
+            next: { type: 'string' }
+          },
+          additionalProperties: false,
+          required: ['blankLine', 'prev', 'next']
+        }
+      }
+    ],
+    messages: {
+      never: 'Unexpected blank line before this tag.',
+      always: 'Expected blank line before this tag.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    return utils.defineTemplateBodyVisitor(context, {
+      VElement: checkNewline(context)
+    })
+  }
+}