New Add vue/new-line-between-multiline-property rule

docs/rules/README.md

@@ -289,6 +289,7 @@ For example:
 | [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |
 | [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
+| [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: |
 | [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
 | [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |

docs/rules/new-line-between-multi-line-property.md

@@ -0,0 +1,90 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/new-line-between-multi-line-property
+description: enforce new lines between multi-line properties in Vue components
+---
+# vue/new-line-between-multi-line-property
+> enforce new lines between multi-line properties in Vue components
+
+- :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.
+
+## Rule Details
+
+This rule aims at enforcing new lines between multi-line properties in Vue components to help readability
+
+Examples of **incorrect** code for this rule:
+
+<eslint-code-block fix :rules="{'vue/new-line-between-multi-line-property': ['error']}">
+
+```vue
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    focused: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+
+    label: String,
+    icon: String
+  },
+  computed: {
+
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+
+Examples of **correct** code for this rule:
+
+<eslint-code-block fix :rules="{'vue/new-line-between-multi-line-property': ['error']}">
+
+```vue
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+
+    focused: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+
+    label: String,
+    icon: String
+  },
+
+  computed: {
+
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## Options
+
+If there are any options, describe them here. Otherwise, delete this section.
+
+## Further Reading
+
+If there are other links that describe the issue this rule addresses, please include them here in a bulleted list.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/new-line-between-multi-line-property.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/new-line-between-multi-line-property.js)

lib/configs/no-layout-rules.js

@@ -28,6 +28,7 @@ module.exports = {
     'vue/max-len': 'off',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/mustache-interpolation-spacing': 'off',
+    'vue/new-line-between-multi-line-property': 'off',
     'vue/no-extra-parens': 'off',
     'vue/no-multi-spaces': 'off',
     'vue/no-spaces-around-equal-signs-in-attribute': 'off',

lib/index.js

@@ -44,6 +44,7 @@ module.exports = {
     'multiline-html-element-content-newline': require('./rules/multiline-html-element-content-newline'),
     'mustache-interpolation-spacing': require('./rules/mustache-interpolation-spacing'),
     'name-property-casing': require('./rules/name-property-casing'),
+    'new-line-between-multi-line-property': require('./rules/new-line-between-multi-line-property'),
     'no-arrow-functions-in-watch': require('./rules/no-arrow-functions-in-watch'),
     'no-async-in-computed-properties': require('./rules/no-async-in-computed-properties'),
     'no-bare-strings-in-template': require('./rules/no-bare-strings-in-template'),

lib/rules/new-line-between-multi-line-property.js

@@ -0,0 +1,90 @@
+/**
+ * @fileoverview Enforce new lines between multi-line properties in Vue components.
+ * @author IWANABETHATGUY
+ */
+'use strict'
+const _ = require('lodash')
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'layout',
+    docs: {
+      description:
+        'enforce new lines between multi-line properties in Vue components',
+      categories: undefined,
+      url:
+        'https://eslint.vuejs.org/rules/new-line-between-multi-line-property.html'
+    },
+    fixable: 'code', // or "code" or "whitespace"
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          // number of line you want to insert after multi-line property
+          'insert-line': {
+            type: 'number',
+            minimum: 1
+          },
+          'min-line-of-multiline-property': {
+            type: 'number',
+            minimum: 2
+          }
+        }
+      }
+    ]
+  },
+
+  create(context) {
+    const insertLine = _.get(context, ['options', '0', 'insert-line'], 1)
+    const minLineOfMultilineProperty = _.get(
+      context,
+      ['options', '0', 'min-line-of-multiline-property'],
+      2
+    )
+    let inCallExpression = false
+    return {
+      CallExpression() {
+        inCallExpression = true
+      },
+      'CallExpression:exit'() {
+        inCallExpression = false
+      },
+      ObjectExpression(node) {
+        if (inCallExpression) {
+          return
+        }
+        const properties = node.properties
+        for (let i = 1; i < properties.length; i++) {
+          const cur = properties[i]
+          const pre = properties[i - 1]
+          const lineCountOfPreProperty =
+            pre.loc.end.line - pre.loc.start.line + 1
+          const lineCountBetweenCurAndPreProperty =
+            cur.loc.start.line - pre.loc.end.line - 1
+          if (
+            lineCountOfPreProperty >= minLineOfMultilineProperty &&
+            lineCountBetweenCurAndPreProperty < insertLine
+          ) {
+            context.report({
+              node: pre,
+              loc: pre.loc,
+              message:
+                'Enforce new lines between multi-line properties in Vue components.',
+              fix(fixer) {
+                const firstPosofLine = cur.range[0] - cur.loc.start.column
+                // this action equal to insert number of line before node
+                return fixer.replaceTextRange(
+                  [firstPosofLine, firstPosofLine],
+                  '\n'.repeat(insertLine - lineCountBetweenCurAndPreProperty)
+                )
+              }
+            })
+          }
+        }
+      }
+    }
+  }
+}