From e6332123775a4286e121bc9871246cc979221203 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Wed, 20 May 2020 18:25:17 +0900
Subject: [PATCH] Add `vue/comma-spacing` rule (#1140)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ⭐️New: Add `vue/comma-spacing` rule

* use skipDynamicArguments
---
 docs/rules/README.md             |   1 +
 docs/rules/comma-spacing.md      |  23 +++
 lib/configs/no-layout-rules.js   |   1 +
 lib/index.js                     |   1 +
 lib/rules/comma-spacing.js       |  12 ++
 lib/utils/index.js               |  72 +++++++-
 tests/lib/rules/comma-spacing.js | 283 +++++++++++++++++++++++++++++++
 7 files changed, 389 insertions(+), 4 deletions(-)
 create mode 100644 docs/rules/comma-spacing.md
 create mode 100644 lib/rules/comma-spacing.js
 create mode 100644 tests/lib/rules/comma-spacing.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index b89debd60..46652d4e6 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -271,6 +271,7 @@ For example:
 | [vue/brace-style](./brace-style.md) | enforce consistent brace style for blocks | :wrench: |
 | [vue/camelcase](./camelcase.md) | enforce camelcase naming convention |  |
 | [vue/comma-dangle](./comma-dangle.md) | require or disallow trailing commas | :wrench: |
+| [vue/comma-spacing](./comma-spacing.md) | enforce consistent spacing before and after commas | :wrench: |
 | [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
 | [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots | :wrench: |
 | [vue/eqeqeq](./eqeqeq.md) | require the use of `===` and `!==` | :wrench: |
diff --git a/docs/rules/comma-spacing.md b/docs/rules/comma-spacing.md
new file mode 100644
index 000000000..d596ee4ea
--- /dev/null
+++ b/docs/rules/comma-spacing.md
@@ -0,0 +1,23 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/comma-spacing
+description: enforce consistent spacing before and after commas
+---
+# vue/comma-spacing
+> enforce consistent spacing before and after commas
+
+- :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.
+
+This rule is the same rule as core [comma-spacing] rule but it applies to the expressions in `<template>`.
+
+## :books: Further reading
+
+- [comma-spacing]
+
+[comma-spacing]: https://eslint.org/docs/rules/comma-spacing
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/comma-spacing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/comma-spacing.js)
diff --git a/lib/configs/no-layout-rules.js b/lib/configs/no-layout-rules.js
index 24e7d0f88..4a3fe8361 100644
--- a/lib/configs/no-layout-rules.js
+++ b/lib/configs/no-layout-rules.js
@@ -10,6 +10,7 @@ module.exports = {
     'vue/block-spacing': 'off',
     'vue/brace-style': 'off',
     'vue/comma-dangle': 'off',
+    'vue/comma-spacing': 'off',
     'vue/dot-location': 'off',
     'vue/html-closing-bracket-newline': 'off',
     'vue/html-closing-bracket-spacing': 'off',
diff --git a/lib/index.js b/lib/index.js
index 131c834d7..5f2657bc1 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -15,6 +15,7 @@ module.exports = {
     'brace-style': require('./rules/brace-style'),
     'camelcase': require('./rules/camelcase'),
     'comma-dangle': require('./rules/comma-dangle'),
+    'comma-spacing': require('./rules/comma-spacing'),
     'comment-directive': require('./rules/comment-directive'),
     'component-definition-name-casing': require('./rules/component-definition-name-casing'),
     'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),
diff --git a/lib/rules/comma-spacing.js b/lib/rules/comma-spacing.js
new file mode 100644
index 000000000..f51bb7c6e
--- /dev/null
+++ b/lib/rules/comma-spacing.js
@@ -0,0 +1,12 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const { wrapCoreRule } = require('../utils')
+
+// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+module.exports = wrapCoreRule(
+  require('eslint/lib/rules/comma-spacing'),
+  { skipDynamicArguments: true, skipDynamicArgumentsReport: true }
+)
diff --git a/lib/utils/index.js b/lib/utils/index.js
index c31ed0e6e..7787c1389 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -54,9 +54,24 @@ const componentComments = new WeakMap()
  * @param {TokenStore} tokenStore The token store object for template.
  */
 function wrapContextToOverrideTokenMethods (context, tokenStore) {
-  const sourceCode = new Proxy(context.getSourceCode(), {
+  const eslintSourceCode = context.getSourceCode()
+  let tokensAndComments
+  function getTokensAndComments () {
+    if (tokensAndComments) {
+      return tokensAndComments
+    }
+    const templateBody = eslintSourceCode.ast.templateBody
+    tokensAndComments = templateBody ? tokenStore.getTokens(templateBody, {
+      includeComments: true
+    }) : []
+    return tokensAndComments
+  }
+  const sourceCode = new Proxy(Object.assign({}, eslintSourceCode), {
     get (object, key) {
-      return key in tokenStore ? tokenStore[key] : object[key]
+      if (key === 'tokensAndComments') {
+        return getTokensAndComments()
+      }
+      return key in tokenStore ? tokenStore[key] : eslintSourceCode[key]
     }
   })
 
@@ -68,6 +83,50 @@ function wrapContextToOverrideTokenMethods (context, tokenStore) {
   }
 }
 
+/**
+ * Wrap the rule context object to override report method to skip the dynamic argument.
+ * @param {RuleContext} context The rule context object.
+ */
+function wrapContextToOverrideReportMethodToSkipDynamicArgument (context) {
+  const sourceCode = context.getSourceCode()
+  const templateBody = sourceCode.ast.templateBody
+  if (!templateBody) {
+    return context
+  }
+  const directiveKeyRanges = []
+  const traverseNodes = vueEslintParser.AST.traverseNodes
+  traverseNodes(templateBody, {
+    enterNode (node, parent) {
+      if (
+        parent && parent.type === 'VDirectiveKey' && node.type === 'VExpressionContainer'
+      ) {
+        directiveKeyRanges.push(node.range)
+      }
+    },
+    leaveNode () {}
+  })
+
+  return {
+    __proto__: context,
+    report (descriptor, ...args) {
+      let range = null
+      if (descriptor.loc) {
+        range = [sourceCode.getIndexFromLoc(descriptor.loc.start), sourceCode.getIndexFromLoc(descriptor.loc.end)]
+      } else if (descriptor.node) {
+        range = descriptor.node.range
+      }
+      if (range) {
+        for (const directiveKeyRange of directiveKeyRanges) {
+          if (range[0] < directiveKeyRange[1] && directiveKeyRange[0] < range[1]) {
+            return
+          }
+        }
+      }
+      context.report(descriptor, ...args)
+    }
+  }
+}
+
 // ------------------------------------------------------------------------------
 // Exports
 // ------------------------------------------------------------------------------
@@ -97,13 +156,14 @@ module.exports = {
   /**
    * Wrap a given core rule to apply it to Vue.js template.
    * @param {Rule} coreRule The core rule implementation to wrap.
-   * @param {Object|undefined} options The option of this rule.
+   * @param {Object} [options] The option of this rule.
    * @param {string|undefined} options.category The category of this rule.
    * @param {boolean|undefined} options.skipDynamicArguments If `true`, skip validation within dynamic arguments.
+   * @param {boolean|undefined} options.skipDynamicArgumentsReport If `true`, skip report within dynamic arguments.
    * @returns {Rule} The wrapped rule implementation.
    */
   wrapCoreRule (coreRule, options) {
-    const { category, skipDynamicArguments } = options || {}
+    const { category, skipDynamicArguments, skipDynamicArgumentsReport } = options || {}
     return {
       create (context) {
         const tokenStore =
@@ -116,6 +176,10 @@ module.exports = {
           context = wrapContextToOverrideTokenMethods(context, tokenStore)
         }
 
+        if (skipDynamicArgumentsReport) {
+          context = wrapContextToOverrideReportMethodToSkipDynamicArgument(context)
+        }
+
         // Move `Program` handlers to `VElement[parent.type!='VElement']`
         const handlers = coreRule.create(context)
         if (handlers.Program) {
diff --git a/tests/lib/rules/comma-spacing.js b/tests/lib/rules/comma-spacing.js
new file mode 100644
index 000000000..26b0ba1aa
--- /dev/null
+++ b/tests/lib/rules/comma-spacing.js
@@ -0,0 +1,283 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/comma-spacing')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2020 }
+})
+
+tester.run('comma-spacing', rule, {
+  valid: [
+    `<template>
+      <button @click="
+        var foo = 1, bar = 2;
+      ">
+        OK
+      </button>
+    </template>`,
+    `<template>
+      <DateInput :value="[2000, 12, 31]" />
+    </template>`,
+    `<template>
+      <DateInput :value="{y: 2000, m: 12, d: 31}" />
+    </template>`,
+    `<template>
+      <CustomDlg @ok="foo(a, b)" />
+    </template>`,
+    `<template>
+      <CustomDlg @ok="(a, b) => {}" />
+    </template>`,
+    `<template>
+      <CustomDlg @ok="function (a, b) {}" />
+    </template>`,
+    `<template>
+      <CustomList>
+        <li slot-scope="a, b">{{ a }}</li>
+      </CustomList>
+    </template>`,
+    {
+      code: `
+        <template>
+          <button @click="
+            fn(a ,b)
+          "/>
+        </template>`,
+      options: [{ before: true, after: false }]
+    },
+    `<template>
+      <div :[fn(a,b)]="val" />
+    </template>`,
+    `<template>
+      <div :[[,]]="val" />
+    </template>`,
+    `<template>
+      <div :[a,]="val" />
+    </template>`,
+    `<script>
+    fn = (a,b) => {}
+    </script>`,
+    `fn = (a,b) => {}`
+  ],
+  invalid: [
+    {
+      code: `
+        <template>
+          <button @click="
+            var foo = 1 ,bar = 2;
+          ">
+            NG
+          </button>
+        </template>`,
+      output: `
+        <template>
+          <button @click="
+            var foo = 1, bar = 2;
+          ">
+            NG
+          </button>
+        </template>`,
+      errors: [
+        {
+          message: 'There should be no space before \',\'.',
+          line: 4,
+          column: 25
+        },
+        {
+          message: 'A space is required after \',\'.',
+          line: 4,
+          column: 25
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <DateInput :value="[2000 ,12 ,31]" />
+        </template>`,
+      output: `
+        <template>
+          <DateInput :value="[2000, 12, 31]" />
+        </template>`,
+      errors: [
+        {
+          message: 'There should be no space before \',\'.',
+          line: 3
+        },
+        {
+          message: 'A space is required after \',\'.',
+          line: 3
+        },
+        {
+          message: 'There should be no space before \',\'.',
+          line: 3
+        },
+        {
+          message: 'A space is required after \',\'.',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <DateInput :value="{y: 2000 ,m: 12 ,d: 31}" />
+        </template>`,
+      output: `
+        <template>
+          <DateInput :value="{y: 2000, m: 12, d: 31}" />
+        </template>`,
+      errors: [
+        {
+          message: 'There should be no space before \',\'.',
+          line: 3
+        },
+        {
+          message: 'A space is required after \',\'.',
+          line: 3
+        },
+        {
+          message: 'There should be no space before \',\'.',
+          line: 3
+        },
+        {
+          message: 'A space is required after \',\'.',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <CustomDlg @ok="foo(a ,b)" />
+        </template>`,
+      output: `
+        <template>
+          <CustomDlg @ok="foo(a, b)" />
+        </template>`,
+      errors: [
+        {
+          message: 'There should be no space before \',\'.',
+          line: 3
+        },
+        {
+          message: 'A space is required after \',\'.',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <CustomDlg @ok="(a ,b) => {}" />
+        </template>`,
+      output: `
+        <template>
+          <CustomDlg @ok="(a, b) => {}" />
+        </template>`,
+      errors: [
+        {
+          message: 'There should be no space before \',\'.',
+          line: 3
+        },
+        {
+          message: 'A space is required after \',\'.',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <CustomDlg @ok="function (a ,b) {}" />
+        </template>`,
+      output: `
+        <template>
+          <CustomDlg @ok="function (a, b) {}" />
+        </template>`,
+      errors: [
+        {
+          message: 'There should be no space before \',\'.',
+          line: 3
+        },
+        {
+          message: 'A space is required after \',\'.',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <CustomList>
+            <li slot-scope="a ,b">{{ a }}</li>
+          </CustomList>
+        </template>`,
+      output: `
+        <template>
+          <CustomList>
+            <li slot-scope="a, b">{{ a }}</li>
+          </CustomList>
+        </template>`,
+      errors: [
+        {
+          message: 'There should be no space before \',\'.',
+          line: 4
+        },
+        {
+          message: 'A space is required after \',\'.',
+          line: 4
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          {{ [a /*comment*/ ,/*comment*/b] }}
+        </template>`,
+      output: `
+        <template>
+          {{ [a /*comment*/, /*comment*/b] }}
+        </template>`,
+      errors: [
+        {
+          message: 'There should be no space before \',\'.',
+          line: 3
+        },
+        {
+          message: 'A space is required after \',\'.',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <button @click="
+            fn(a, b)
+          "/>
+        </template>`,
+      options: [{ before: true, after: false }],
+      output: `
+        <template>
+          <button @click="
+            fn(a ,b)
+          "/>
+        </template>`,
+      errors: [
+        {
+          message: 'A space is required before \',\'.',
+          line: 4
+        },
+        {
+          message: 'There should be no space after \',\'.',
+          line: 4
+        }
+      ]
+    }
+  ]
+})