feat(vue/no-multi-spaces): add ignoreEOLComments property (#2989)

Co-authored-by: Flo Edelmann <git@flo-edelmann.de>

Author: rzzf

.changeset/swift-spies-nail.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue": minor
+---
+
+Added new `ignoreEOLComments` option to `vue/no-multi-spaces` rule

docs/rules/no-multi-spaces.md

@@ -51,12 +51,14 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
 ```json
 {
   "vue/no-multi-spaces": ["error", {
-    "ignoreProperties": false
+    "ignoreProperties": false,
+    "ignoreEOLComments": false
   }]
 }
 ```
 
 - `ignoreProperties` ... whether or not objects' properties should be ignored. default `false`
+- `ignoreEOLComments` ... whether or not the spaces before EOL comments should be ignored. default `false`
 
 ### `"ignoreProperties": true`
 
@@ -76,6 +78,24 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
 
 </eslint-code-block>
 
+### `"ignoreEOLComments": true`
+
+<eslint-code-block fix :rules="{'vue/no-multi-spaces': ['error', { 'ignoreEOLComments': true }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div
+    :class="{
+      'fa-angle-up' : isExpanded,   // comment
+      'fa-angle-down' : !isExpanded,   /* multiline comment */
+    }"
+  />
+</template>
+```
+
+</eslint-code-block>
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v3.12.0

lib/rules/no-multi-spaces.js

@@ -30,6 +30,9 @@ module.exports = {
         properties: {
           ignoreProperties: {
             type: 'boolean'
+          },
+          ignoreEOLComments: {
+            type: 'boolean'
           }
         },
         additionalProperties: false
@@ -49,6 +52,7 @@ module.exports = {
   create(context) {
     const options = context.options[0] || {}
     const ignoreProperties = options.ignoreProperties === true
+    const ignoreEOLComments = options.ignoreEOLComments === true
 
     return {
       Program(node) {
@@ -74,9 +78,23 @@ module.exports = {
         let prevToken = /** @type {Token} */ (tokens.shift())
         for (const token of tokens) {
           const spaces = token.range[0] - prevToken.range[1]
-          const shouldIgnore =
+          let shouldIgnore =
             ignoreProperties &&
             (isProperty(context, token) || isProperty(context, prevToken))
+
+          if (
+            !shouldIgnore &&
+            ignoreEOLComments &&
+            (token.type === 'Line' || token.type === 'Block')
+          ) {
+            const nextToken = tokenStore.getTokenAfter(token, {
+              includeComments: true
+            })
+            if (!nextToken || nextToken.loc.start.line > token.loc.end.line) {
+              shouldIgnore = true
+            }
+          }
+
           if (
             spaces > 1 &&
             token.loc.start.line === prevToken.loc.start.line &&

tests/lib/rules/no-multi-spaces.js

@@ -73,6 +73,38 @@ ruleTester.run('no-multi-spaces', rule, {
           ignoreProperties: true
         }
       ]
+    },
+    {
+      code: `
+      <template>
+        <div
+          :class="{
+           'foo': foo,   // comment
+          }"
+        ></div>
+      </template>
+      `,
+      options: [
+        {
+          ignoreEOLComments: true
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div
+          :class="{
+            'foo': foo   /* multiline comment */
+          }"
+        ></div>
+      </template>
+      `,
+      options: [
+        {
+          ignoreEOLComments: true
+        }
+      ]
     }
   ],
   invalid: [
@@ -329,6 +361,132 @@ ruleTester.run('no-multi-spaces', rule, {
           endColumn: 30
         }
       ]
+    },
+    {
+      code: `
+      <template>
+        <div
+          :class="{
+            'foo': foo  // comment
+          }"
+        ></div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div
+          :class="{
+            'foo': foo // comment
+          }"
+        ></div>
+      </template>
+      `,
+      errors: [
+        {
+          message: "Multiple spaces found before '// comment'.",
+          line: 5,
+          column: 23,
+          endLine: 5,
+          endColumn: 25
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div
+          :class="{
+            'foo': foo  /* multiline comment */
+          }"
+        ></div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div
+          :class="{
+            'foo': foo /* multiline comment */
+          }"
+        ></div>
+      </template>
+      `,
+      errors: [
+        {
+          message: "Multiple spaces found before '/* multiline comment */'.",
+          line: 5,
+          column: 23,
+          endLine: 5,
+          endColumn: 25
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div
+          :class="{
+            'foo': foo  // comment
+          }"
+        ></div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div
+          :class="{
+            'foo': foo // comment
+          }"
+        ></div>
+      </template>
+      `,
+      options: [
+        {
+          ignoreEOLComments: false
+        }
+      ],
+      errors: [
+        {
+          message: "Multiple spaces found before '// comment'.",
+          line: 5,
+          column: 23,
+          endLine: 5,
+          endColumn: 25
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div
+          :class="{
+            'foo': foo  /* multiline comment */
+          }"
+        ></div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div
+          :class="{
+            'foo': foo /* multiline comment */
+          }"
+        ></div>
+      </template>
+      `,
+      options: [
+        {
+          ignoreEOLComments: false
+        }
+      ],
+      errors: [
+        {
+          message: "Multiple spaces found before '/* multiline comment */'.",
+          line: 5,
+          column: 23,
+          endLine: 5,
+          endColumn: 25
+        }
+      ]
     }
   ]
 })