(Implements #535) Add "ignoreProperties" option to "no-multi-spaces" rule (#591)

* Add "ignoreProperties" option to "no-multi-spaces" rule

* Handle extra case

Author: michalsnik

Diff for: docs/rules/no-multi-spaces.md

@@ -16,6 +16,15 @@ Examples of **incorrect** code for this rule:
       :style="bar"         />
 ```
 
+```html
+<i
+  :class="{
+    'fa-angle-up'   : isExpanded,
+    'fa-angle-down' : !isExpanded,
+  }"
+/>
+```
+
 Examples of **correct** code for this rule:
 
 ```html
@@ -25,6 +34,36 @@ Examples of **correct** code for this rule:
 />
 ```
 
-### Options
+```html
+<i
+  :class="{
+    'fa-angle-up' : isExpanded,
+    'fa-angle-down' : !isExpanded,
+  }"
+/>
+```
+
+## :wrench: Options
+
+This rule has an object option:
 
-Nothing
+`"ignoreProperties": false` (default) whether or not objects' properties should be ignored
+
+### Example:
+
+```json
+"vue/no-multi-spaces": [2, {
+  "ignoreProperties": true
+}]
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```html
+<i
+  :class="{
+    'fa-angle-up'   : isExpanded,
+    'fa-angle-down' : !isExpanded,
+  }"
+/>
+```

Diff for: lib/rules/no-multi-spaces.js

@@ -8,6 +8,11 @@
 // Rule Definition
 // ------------------------------------------------------------------------------
 
+const isProperty = (context, node) => {
+  const sourceCode = context.getSourceCode()
+  return node.type === 'Punctuator' && sourceCode.getText(node) === ':'
+}
+
 module.exports = {
   meta: {
     docs: {
@@ -16,17 +21,24 @@ module.exports = {
       url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.3/docs/rules/no-multi-spaces.md'
     },
     fixable: 'whitespace', // or "code" or "whitespace"
-    schema: []
+    schema: [{
+      type: 'object',
+      properties: {
+        ignoreProperties: {
+          type: 'boolean'
+        }
+      },
+      additionalProperties: false
+    }]
   },
 
   /**
    * @param {RuleContext} context - The rule context.
    * @returns {Object} AST event handlers.
    */
   create (context) {
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
+    const options = context.options[0] || {}
+    const ignoreProperties = options.ignoreProperties === true
 
     return {
       Program (node) {
@@ -47,7 +59,10 @@ module.exports = {
         let prevToken = tokens.shift()
         for (const token of tokens) {
           const spaces = token.range[0] - prevToken.range[1]
-          if (spaces > 1 && token.loc.start.line === prevToken.loc.start.line) {
+          const shouldIgnore = ignoreProperties && (
+            isProperty(context, token) || isProperty(context, prevToken)
+          )
+          if (spaces > 1 && token.loc.start.line === prevToken.loc.start.line && !shouldIgnore) {
             context.report({
               node: token,
               loc: {

Diff for: tests/lib/rules/no-multi-spaces.js

@@ -44,6 +44,36 @@ ruleTester.run('no-multi-spaces', rule, {
     {
       filename: 'test.js',
       code: 'export default { }'
+    },
+    {
+      code: `
+      <template>
+        <i
+          :class="{
+            'fa-angle-up'   : isExpanded,
+            'fa-angle-down' : !isExpanded,
+          }"
+        />
+      </template>
+      `,
+      options: [{
+        ignoreProperties: true
+      }]
+    },
+    {
+      code: `
+      <template>
+        <i
+          :class="{
+            'fa-angle-up':   isExpanded,
+            'fa-angle-down': !isExpanded,
+          }"
+        />
+      </template>
+      `,
+      options: [{
+        ignoreProperties: true
+      }]
     }
   ],
   invalid: [
@@ -176,6 +206,62 @@ ruleTester.run('no-multi-spaces', rule, {
           type: 'Punctuator'
         }
       ]
+    },
+    {
+      code: `
+      <template>
+        <i
+          :class="{
+            'fa-angle-up'   : isExpanded,
+            'fa-angle-down' : !isExpanded,
+          }"
+        />
+      </template>
+      `,
+      output: `
+      <template>
+        <i
+          :class="{
+            'fa-angle-up' : isExpanded,
+            'fa-angle-down' : !isExpanded,
+          }"
+        />
+      </template>
+      `,
+      errors: [
+        {
+          message: "Multiple spaces found before ':'.",
+          type: 'Punctuator'
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <i
+          :class="{
+            'fa-angle-up':   isExpanded,
+            'fa-angle-down': !isExpanded,
+          }"
+        />
+      </template>
+      `,
+      output: `
+      <template>
+        <i
+          :class="{
+            'fa-angle-up': isExpanded,
+            'fa-angle-down': !isExpanded,
+          }"
+        />
+      </template>
+      `,
+      errors: [
+        {
+          message: "Multiple spaces found before 'isExpanded'.",
+          type: 'Identifier'
+        }
+      ]
     }
   ]
 })