From 95fd13f4a811c97e143fcf23c930cc2ddf6612f6 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Wed, 16 Dec 2020 11:19:32 +0800
Subject: [PATCH] New Add `vue/new-line-between-multiline-property` rule
 (#1080)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: init commit

* feat: add test, make rule configurable

* docs: update doc📖

* chore: update version

* lint fix

* test: 💍 add test case

* test: 💍 fix report when multi-line-property in callExpression

* test: 💍 fix test in change request

* test: 💍 js doc

* test: 💍 Vue.component()

* docs: ✏️ docs

* fix: 🐛 using sourceCode api

* fix: 🐛 using getTokenBewteen instead of getAlltoken

* fix: 🐛 lint error
---
 docs/.vuepress/public/favicon.png             | Bin 3451 -> 3450 bytes
 docs/rules/README.md                          |   1 +
 .../new-line-between-multi-line-property.md   |  93 +++
 lib/configs/no-layout-rules.js                |   1 +
 lib/index.js                                  |   1 +
 .../new-line-between-multi-line-property.js   | 117 ++++
 .../new-line-between-multi-line-property.js   | 624 ++++++++++++++++++
 7 files changed, 837 insertions(+)
 create mode 100644 docs/rules/new-line-between-multi-line-property.md
 create mode 100644 lib/rules/new-line-between-multi-line-property.js
 create mode 100644 tests/lib/rules/new-line-between-multi-line-property.js

diff --git a/docs/.vuepress/public/favicon.png b/docs/.vuepress/public/favicon.png
index 60e17006ad07cd313788585e2f5e528fbb7cf821..6378563a04ef6375c2de7b7b02c15e724bf47e60 100644
GIT binary patch
delta 13
Ucmew@^-GGSGr-S%BWoEi04HSx)c^nh

delta 14
Vcmew*^;?RyGr-TCcOy#~F90h?1mXYy

diff --git a/docs/rules/README.md b/docs/rules/README.md
index fe113336e..4450e76b8 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -293,6 +293,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"` |  |
diff --git a/docs/rules/new-line-between-multi-line-property.md b/docs/rules/new-line-between-multi-line-property.md
new file mode 100644
index 000000000..afa1856d8
--- /dev/null
+++ b/docs/rules/new-line-between-multi-line-property.md
@@ -0,0 +1,93 @@
+---
+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.
+
+## :book: 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>
+
+## :wrench: Option
+```json
+{
+  "vue/new-line-between-multiline-property": ["error", {
+    "minLineOfMultilineProperty": 2
+  }]
+}
+```
+- `minLineOfMultilineProperty` ... `type: number`, Define the minimum number of rows for a multi-line property  .`type:` number, `default:` 2 , `min:`: 2
+## :books: Further Reading
+Nothing here
+## :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)
diff --git a/lib/configs/no-layout-rules.js b/lib/configs/no-layout-rules.js
index 59c56af89..b7d33e0c1 100644
--- a/lib/configs/no-layout-rules.js
+++ b/lib/configs/no-layout-rules.js
@@ -30,6 +30,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',
diff --git a/lib/index.js b/lib/index.js
index 7755e9f1e..aef4beaf0 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -47,6 +47,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'),
diff --git a/lib/rules/new-line-between-multi-line-property.js b/lib/rules/new-line-between-multi-line-property.js
new file mode 100644
index 000000000..cdea8ea02
--- /dev/null
+++ b/lib/rules/new-line-between-multi-line-property.js
@@ -0,0 +1,117 @@
+/**
+ * @fileoverview Enforce new lines between multi-line properties in Vue components.
+ * @author IWANABETHATGUY
+ */
+'use strict'
+
+const utils = require('../utils')
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+// @ts-ignore
+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: 'whitespace', // or "code" or "whitespace"
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          // number of line you want to insert after multi-line property
+          minLineOfMultilineProperty: {
+            type: 'number',
+            minimum: 2
+          }
+        }
+      }
+    ]
+  },
+
+  /** @param {RuleContext} context */
+  create(context) {
+    // always insert one line
+    const insertLine = 1
+
+    let minLineOfMultilineProperty = 2
+    if (
+      context.options &&
+      context.options[0] &&
+      context.options[0].minLineOfMultilineProperty
+    ) {
+      minLineOfMultilineProperty = context.options[0].minLineOfMultilineProperty
+    }
+
+    /** @type {any[]} */
+    const callStack = []
+    const sourceCode = context.getSourceCode()
+    return Object.assign(
+      utils.defineVueVisitor(context, {
+        CallExpression(node) {
+          callStack.push(node)
+        },
+        'CallExpression:exit'() {
+          callStack.pop()
+        },
+
+        /**
+         * @param {ObjectExpression} node
+         */
+        ObjectExpression(node) {
+          if (callStack.length) {
+            return
+          }
+          const properties = node.properties
+          for (let i = 1; i < properties.length; i++) {
+            const cur = properties[i]
+            const pre = properties[i - 1]
+
+            const leadingComments = sourceCode
+              .getTokensBetween(pre, cur, { includeComments: true })
+              .filter((token) => ['Line', 'Block'].includes(token.type))
+            const lineCountOfPreProperty =
+              pre.loc.end.line - pre.loc.start.line + 1
+            let curStartLine = cur.loc.start.line
+            if (leadingComments.length) {
+              curStartLine = leadingComments[0].loc.start.line
+            }
+            const lineCountBetweenCurAndPreProperty =
+              curStartLine - 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.',
+                // @ts-ignore
+                fix(fixer) {
+                  let firstPositionOfLine = cur.range[0] - cur.loc.start.column
+                  if (leadingComments.length) {
+                    const firstComment = leadingComments[0]
+                    firstPositionOfLine =
+                      firstComment.range[0] - firstComment.loc.start.column
+                  }
+                  // this action equal to insert number of line before node
+                  return fixer.insertTextAfterRange(
+                    [firstPositionOfLine, firstPositionOfLine],
+                    '\n'
+                    // to avoid conflict with no-multiple-empty-lines, only insert one newline
+                  )
+                }
+              })
+            }
+          }
+        }
+      })
+    )
+  }
+}
diff --git a/tests/lib/rules/new-line-between-multi-line-property.js b/tests/lib/rules/new-line-between-multi-line-property.js
new file mode 100644
index 000000000..740654f1a
--- /dev/null
+++ b/tests/lib/rules/new-line-between-multi-line-property.js
@@ -0,0 +1,624 @@
+/**
+ * @fileoverview Enforce new lines between multi-line properties in Vue components.
+ * @author IWANABETHATGUY
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/new-line-between-multi-line-property')
+const RuleTester = require('eslint').RuleTester
+const ruleTester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2015, sourceType: 'module' }
+})
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+ruleTester.run('new-line-between-multi-line-property', rule, {
+  valid: [
+    // test good example of proposal https://github.com/vuejs/eslint-plugin-vue/issues/391
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        name: 'component-name',
+        props: {
+          value: {
+            type: String,
+            required: true
+          },
+
+          focused: {
+            type: Boolean,
+            default: false
+          },
+
+          label: String,
+          icon: String
+        },
+
+        computed: {
+          formattedValue: function () {
+            // ...
+            // ...
+            // ...
+            // ...
+          },
+
+          inputClasses: function () {
+            // ...
+            // ...
+            // ...
+            // ...
+          }
+        },
+
+        methods: {
+          methodA: function () {
+            // ...
+            // ...
+            // ...
+          },
+
+          methodB: function () {
+            // ...
+            // ...
+            // ...
+          }
+        }
+      }
+      </script>
+      `
+    },
+    // should valid if there are more than one line between
+    // multiline property
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        name: 'component-name',
+        props: {
+          value: {
+            type: String,
+            required: true
+          },
+
+
+          focused: {
+            type: Boolean,
+            default: false
+          },
+
+
+          label: String,
+          icon: String
+        },
+      }
+      </script>
+      `
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        props: {
+          value: {
+            type: String,
+            required: true
+          },
+
+          focused: {
+            type: Boolean,
+            default: false
+          },
+          label: String,
+          icon: String
+        }
+      }
+      </script>
+      `,
+      output: `
+      <script>
+      export default {
+        props: {
+          value: {
+            type: String,
+            required: true
+          },
+
+          focused: {
+            type: Boolean,
+            default: false
+          },
+
+          label: String,
+          icon: String
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Enforce new lines between multi-line properties in Vue components.',
+          line: 10
+        }
+      ]
+    },
+    // test bad example of proposal https://github.com/vuejs/eslint-plugin-vue/issues/391
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        name: 'component-name',
+        props: {
+          value: {
+            type: String,
+            required: true
+          },
+
+          focused: {
+            type: Boolean,
+            default: false
+          },
+
+          label: String,
+          icon: String
+        },
+        computed: {
+          formattedValue: function () {
+            // ...
+            // ...
+            // ...
+            // ...
+          },
+
+          inputClasses: function () {
+            // ...
+            // ...
+            // ...
+            // ...
+          }
+        },
+        methods: {
+          methodA: function () {
+            // ...
+            // ...
+            // ...
+          },
+
+          methodB: function () {
+            // ...
+            // ...
+            // ...
+          }
+        }
+      }
+      </script>
+      `,
+      output: `
+      <script>
+      export default {
+        name: 'component-name',
+        props: {
+          value: {
+            type: String,
+            required: true
+          },
+
+          focused: {
+            type: Boolean,
+            default: false
+          },
+
+          label: String,
+          icon: String
+        },
+
+        computed: {
+          formattedValue: function () {
+            // ...
+            // ...
+            // ...
+            // ...
+          },
+
+          inputClasses: function () {
+            // ...
+            // ...
+            // ...
+            // ...
+          }
+        },
+
+        methods: {
+          methodA: function () {
+            // ...
+            // ...
+            // ...
+          },
+
+          methodB: function () {
+            // ...
+            // ...
+            // ...
+          }
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Enforce new lines between multi-line properties in Vue components.',
+          line: 5
+        },
+        {
+          message:
+            'Enforce new lines between multi-line properties in Vue components.',
+          line: 19
+        }
+      ]
+    },
+    // test set insertLine and minLineOfMultilineProperty to 5
+    {
+      filename: 'test.vue',
+      options: [{ minLineOfMultilineProperty: 5 }],
+      code: `
+      <script>
+      export default {
+        props: {
+          setMultiLineProperty: {
+            type: String,
+            required: true
+          },
+          focused: {
+            type: Boolean,
+            default: false,
+            required: true
+          },
+          label: String,
+          icon: String
+        }
+      }
+      </script>
+      `,
+      output: `
+      <script>
+      export default {
+        props: {
+          setMultiLineProperty: {
+            type: String,
+            required: true
+          },
+          focused: {
+            type: Boolean,
+            default: false,
+            required: true
+          },
+
+          label: String,
+          icon: String
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Enforce new lines between multi-line properties in Vue components.',
+          line: 9
+        }
+      ]
+    },
+    // test js comments
+    {
+      filename: 'test.vue',
+      options: [{ minLineOfMultilineProperty: 5 }],
+      code: `
+      <script>
+      export default {
+        props: {
+          setMultiLineProperty: {
+            type: String,
+            required: true
+          },
+          focused: {
+            type: Boolean,
+            default: false,
+            required: true
+          },
+          // comments
+          label: String,
+          icon: String
+        }
+      }
+      </script>
+      `,
+      output: `
+      <script>
+      export default {
+        props: {
+          setMultiLineProperty: {
+            type: String,
+            required: true
+          },
+          focused: {
+            type: Boolean,
+            default: false,
+            required: true
+          },
+
+          // comments
+          label: String,
+          icon: String
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Enforce new lines between multi-line properties in Vue components.',
+          line: 9
+        }
+      ]
+    },
+    // test js doc
+    {
+      filename: 'test.vue',
+      options: [],
+      code: `
+      <script>
+      export default {
+        props: {
+          setMultiLineProperty: {
+            type: String,
+            required: true
+          },
+        },
+        
+        methods: {
+          test() {
+
+          },
+          /**
+          *
+          * @returns
+          */
+          test2() {
+
+          }
+        }
+      }
+      </script>
+      `,
+      output: `
+      <script>
+      export default {
+        props: {
+          setMultiLineProperty: {
+            type: String,
+            required: true
+          },
+        },
+        
+        methods: {
+          test() {
+
+          },
+
+          /**
+          *
+          * @returns
+          */
+          test2() {
+
+          }
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Enforce new lines between multi-line properties in Vue components.',
+          line: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        props: {
+          value: {
+            type: String,
+            required: true
+          },
+          focused: {
+            type: Boolean,
+            default: false
+          },
+          label: String,
+          icon: String
+        },
+        staticMethodFn() {
+          fn(
+            fn(),
+            {
+            a: {
+              foo,
+            },
+            b: {
+              foo,
+            },
+            c: {
+              foo,
+            },
+          });
+        },
+      }
+      </script>
+      `,
+      output: `
+      <script>
+      export default {
+        props: {
+          value: {
+            type: String,
+            required: true
+          },
+
+          focused: {
+            type: Boolean,
+            default: false
+          },
+
+          label: String,
+          icon: String
+        },
+
+        staticMethodFn() {
+          fn(
+            fn(),
+            {
+            a: {
+              foo,
+            },
+            b: {
+              foo,
+            },
+            c: {
+              foo,
+            },
+          });
+        },
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Enforce new lines between multi-line properties in Vue components.',
+          line: 4
+        },
+        {
+          message:
+            'Enforce new lines between multi-line properties in Vue components.',
+          line: 5
+        },
+        {
+          message:
+            'Enforce new lines between multi-line properties in Vue components.',
+          line: 9
+        }
+      ]
+    },
+    // test Vue.component()
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      Vue.component('test', {
+        props: {
+          value: {
+            type: String,
+            required: true
+          },
+          //test
+          focused: {
+            type: Boolean,
+            default: false
+          },
+          label: String,
+          icon: String
+        },
+        staticMethodFn() {
+          fn(
+            fn(),
+            {
+            a: {
+              foo,
+            },
+            b: {
+              foo,
+            },
+            c: {
+              foo,
+            },
+          });
+        },
+      })
+      </script>
+      `,
+      output: `
+      <script>
+      Vue.component('test', {
+        props: {
+          value: {
+            type: String,
+            required: true
+          },
+
+          //test
+          focused: {
+            type: Boolean,
+            default: false
+          },
+
+          label: String,
+          icon: String
+        },
+
+        staticMethodFn() {
+          fn(
+            fn(),
+            {
+            a: {
+              foo,
+            },
+            b: {
+              foo,
+            },
+            c: {
+              foo,
+            },
+          });
+        },
+      })
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Enforce new lines between multi-line properties in Vue components.',
+          line: 4
+        },
+        {
+          message:
+            'Enforce new lines between multi-line properties in Vue components.',
+          line: 5
+        },
+        {
+          message:
+            'Enforce new lines between multi-line properties in Vue components.',
+          line: 10
+        }
+      ]
+    }
+  ]
+})