From adfb5daa5d3859b8c07097de6ff0bf342b9ad062 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Sun, 11 Nov 2018 02:33:54 +0100
Subject: [PATCH 1/5] Fix #616 - Improve error message in
 max-attributes-per-line, remove white spaces

---
 lib/rules/max-attributes-per-line.js       | 32 +++++++++++++++++-----
 tests/lib/rules/max-attributes-per-line.js | 30 ++++++++++++++------
 2 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index 517a4ef89..70c2a4ccc 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -70,6 +70,7 @@ module.exports = {
     const multilineMaximum = configuration.multiline
     const singlelinemMaximum = configuration.singleline
     const canHaveFirstLine = configuration.allowFirstLine
+    const template = context.parserServices.getTemplateBodyTokenStore && context.parserServices.getTemplateBodyTokenStore()
 
     return utils.defineTemplateBodyVisitor(context, {
       'VStartTag' (node) {
@@ -78,17 +79,17 @@ module.exports = {
         if (!numberOfAttributes) return
 
         if (utils.isSingleLine(node) && numberOfAttributes > singlelinemMaximum) {
-          showErrors(node.attributes.slice(singlelinemMaximum), node)
+          showErrors(node.attributes.slice(singlelinemMaximum))
         }
 
         if (!utils.isSingleLine(node)) {
           if (!canHaveFirstLine && node.attributes[0].loc.start.line === node.loc.start.line) {
-            showErrors([node.attributes[0]], node)
+            showErrors([node.attributes[0]])
           }
 
           groupAttrsByLine(node.attributes)
             .filter(attrs => attrs.length > multilineMaximum)
-            .forEach(attrs => showErrors(attrs.splice(multilineMaximum), node))
+            .forEach(attrs => showErrors(attrs.splice(multilineMaximum)))
         }
       }
     })
@@ -128,16 +129,33 @@ module.exports = {
       return defaults
     }
 
-    function showErrors (attributes, node) {
+    function showErrors (attributes) {
       attributes.forEach((prop, i) => {
+        const isBinding = prop.key.name === 'bind'
+
+        const fix = (fixer) => {
+          if (i !== 0) return null
+
+          // Find the closest token before the current prop
+          // that is not a white space
+          const prevToken = template.getTokenBefore(prop, {
+            filter: (token) => token.type !== 'HTMLWhitespace'
+          })
+
+          const range = [prevToken.range[1], prop.range[0]]
+
+          return fixer.replaceTextRange(range, '\n')
+        }
+
         context.report({
           node: prop,
           loc: prop.loc,
-          message: 'Attribute "{{propName}}" should be on a new line.',
+          message: '{{propType}} "{{propName}}" should be on a new line.',
           data: {
-            propName: prop.key.name
+            propType: isBinding ? 'Binding' : 'Attribute',
+            propName: isBinding ? prop.key.raw.argument : prop.key.name
           },
-          fix: i === 0 ? (fixer) => fixer.insertTextBefore(prop, '\n') : undefined
+          fix
         })
       })
     }
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index 0e8ab915f..0f0f3c114 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -91,17 +91,29 @@ ruleTester.run('max-attributes-per-line', rule, {
   invalid: [
     {
       code: `<template><component name="John Doe" age="30"></component></template>`,
-      output: `<template><component name="John Doe" 
+      output: `<template><component name="John Doe"
 age="30"></component></template>`,
       errors: ['Attribute "age" should be on a new line.']
     },
+    {
+      code: `<template><component :name="user.name" :age="user.age"></component></template>`,
+      output: `<template><component :name="user.name"
+:age="user.age"></component></template>`,
+      errors: ['Binding "age" should be on a new line.']
+    },
+    {
+      code: `<template><component name="John Doe"    v-bind:age="user.age"></component></template>`,
+      output: `<template><component name="John Doe"
+v-bind:age="user.age"></component></template>`,
+      errors: ['Binding "age" should be on a new line.']
+    },
     {
       code: `<template><component job="Vet"
         name="John Doe"
         age="30">
         </component>
       </template>`,
-      output: `<template><component 
+      output: `<template><component
 job="Vet"
         name="John Doe"
         age="30">
@@ -116,7 +128,7 @@ job="Vet"
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
       options: [{ singleline: { max: 2 }}],
-      output: `<template><component name="John Doe" age="30" 
+      output: `<template><component name="John Doe" age="30"
 job="Vet"></component></template>`,
       errors: [{
         message: 'Attribute "job" should be on a new line.',
@@ -127,7 +139,7 @@ job="Vet"></component></template>`,
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
       options: [{ singleline: 1, multiline: { max: 1, allowFirstLine: false }}],
-      output: `<template><component name="John Doe" 
+      output: `<template><component name="John Doe"
 age="30" job="Vet"></component></template>`,
       errors: [{
         message: 'Attribute "age" should be on a new line.',
@@ -145,7 +157,7 @@ age="30" job="Vet"></component></template>`,
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}],
-      output: `<template><component 
+      output: `<template><component
 name="John Doe"
         age="30">
         </component>
@@ -164,7 +176,7 @@ name="John Doe"
       </template>`,
       options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}],
       output: `<template><component
-        name="John Doe" 
+        name="John Doe"
 age="30"
         job="Vet">
         </component>
@@ -183,7 +195,7 @@ age="30"
       </template>`,
       options: [{ singleline: 3, multiline: 1 }],
       output: `<template><component
-        name="John Doe" 
+        name="John Doe"
 age="30"
         job="Vet">
         </component>
@@ -203,7 +215,7 @@ age="30"
       options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}],
       output: `<template><component
         name="John Doe" age="30"
-        job="Vet" pet="dog" 
+        job="Vet" pet="dog"
 petname="Snoopy">
         </component>
       </template>`,
@@ -222,7 +234,7 @@ petname="Snoopy">
       options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}],
       output: `<template><component
         name="John Doe" age="30"
-        job="Vet" pet="dog" 
+        job="Vet" pet="dog"
 petname="Snoopy" extra="foo">
         </component>
       </template>`,

From e89110d4e21136e47e2fceb6afa5a8c22cc6bda7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Sun, 11 Nov 2018 02:34:55 +0100
Subject: [PATCH 2/5] Update .eslintrc - allow report message value to start
 with curly brace

---
 .eslintrc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 4b8396bec..4b2731d67 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,7 +19,7 @@ module.exports = {
     'eslint-plugin'
   ],
   rules: {
-    'eslint-plugin/report-message-format': ['error', '^[A-Z`\'].*\\.$'],
+    'eslint-plugin/report-message-format': ['error', '^[A-Z`\'{].*\\.$'],
     'eslint-plugin/prefer-placeholders': 'error',
     'eslint-plugin/consistent-output': 'error'
   },

From cd49a00bc90e5a6c458e5fc2effbbbdd699a1949 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Sun, 11 Nov 2018 02:46:26 +0100
Subject: [PATCH 3/5] 616 - Add failing cases

---
 tests/lib/rules/max-attributes-per-line.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index 0f0f3c114..56c43d93e 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -101,6 +101,24 @@ age="30"></component></template>`,
 :age="user.age"></component></template>`,
       errors: ['Binding "age" should be on a new line.']
     },
+    {
+      code: `<template><component :name="user.name" @buy="buyProduct"></component></template>`,
+      output: `<template><component :name="user.name"
+@buy="buyProduct"></component></template>`,
+      errors: ['Event "buy" should be on a new line.']
+    },
+    {
+      code: `<template><component :name="user.name" @click.stop></component></template>`,
+      output: `<template><component :name="user.name"
+@click.stop></component></template>`,
+      errors: ['Event "click" should be on a new line.']
+    },
+    {
+      code: `<template><component :name="user.name" v-if="something"></component></template>`,
+      output: `<template><component :name="user.name"
+v-if="something"></component></template>`,
+      errors: ['Directive "v-if" should be on a new line.']
+    },
     {
       code: `<template><component name="John Doe"    v-bind:age="user.age"></component></template>`,
       output: `<template><component name="John Doe"

From b22a6e93d125f4db6f087ed4f651997b7dc46c7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Sun, 11 Nov 2018 03:08:53 +0100
Subject: [PATCH 4/5] 616 - Improve events and other directives reporting

---
 lib/rules/max-attributes-per-line.js       | 24 +++++++++++++-----
 lib/utils/index.js                         | 29 ++++++++++++++++++++++
 tests/lib/rules/max-attributes-per-line.js |  2 +-
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index 70c2a4ccc..573816c77 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -129,10 +129,25 @@ module.exports = {
       return defaults
     }
 
+    function getPropData (prop) {
+      let propType = 'Attribute'
+      let propName = prop.key.name
+
+      if (utils.isBindingAttribute(prop)) {
+        propType = 'Binding'
+        propName = prop.key.raw.argument
+      } else if (utils.isEventAttribute(prop)) {
+        propType = 'Event'
+        propName = prop.key.raw.argument
+      } else if (utils.isDirectiveAttribute(prop)) {
+        propType = 'Directive'
+      }
+
+      return { propType, propName }
+    }
+
     function showErrors (attributes) {
       attributes.forEach((prop, i) => {
-        const isBinding = prop.key.name === 'bind'
-
         const fix = (fixer) => {
           if (i !== 0) return null
 
@@ -151,10 +166,7 @@ module.exports = {
           node: prop,
           loc: prop.loc,
           message: '{{propType}} "{{propName}}" should be on a new line.',
-          data: {
-            propType: isBinding ? 'Binding' : 'Attribute',
-            propName: isBinding ? prop.key.raw.argument : prop.key.name
-          },
+          data: getPropData(prop),
           fix
         })
       })
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 28caa444d..fc29ec315 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -294,6 +294,35 @@ module.exports = {
     return VOID_ELEMENT_NAMES.has(name)
   },
 
+  /**
+   * Check whether the given attribute node is a binding
+   * @param {ASTNode} name The attribute to check.
+   * @returns {boolean}
+   */
+  isBindingAttribute (attribute) {
+    return attribute.directive && attribute.key.name === 'bind'
+  },
+
+  /**
+   * Check whether the given attribute node is an event
+   * @param {ASTNode} name The attribute to check.
+   * @returns {boolean}
+   */
+  isEventAttribute (attribute) {
+    return attribute.directive && attribute.key.name === 'on'
+  },
+
+  /**
+   * Check whether the given attribute node is a directive
+   * @param {ASTNode} name The attribute to check.
+   * @returns {boolean}
+   */
+  isDirectiveAttribute (attribute) {
+    return attribute.directive &&
+      attribute.key.name !== 'on' &&
+      attribute.key.name !== 'bind'
+  },
+
   /**
    * Parse member expression node to get array with all of its parts
    * @param {ASTNode} MemberExpression
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index 56c43d93e..c34fee373 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -117,7 +117,7 @@ age="30"></component></template>`,
       code: `<template><component :name="user.name" v-if="something"></component></template>`,
       output: `<template><component :name="user.name"
 v-if="something"></component></template>`,
-      errors: ['Directive "v-if" should be on a new line.']
+      errors: ['Directive "if" should be on a new line.']
     },
     {
       code: `<template><component name="John Doe"    v-bind:age="user.age"></component></template>`,

From af215d4d91376f619a68102a2e503e01c8d9fd28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 12 Nov 2018 21:21:07 +0100
Subject: [PATCH 5/5] 616 Handle v-bind case

---
 lib/rules/max-attributes-per-line.js       |  2 +-
 lib/utils/index.js                         | 15 +++------------
 tests/lib/rules/max-attributes-per-line.js |  6 ++++++
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index 573816c77..421e55394 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -139,7 +139,7 @@ module.exports = {
       } else if (utils.isEventAttribute(prop)) {
         propType = 'Event'
         propName = prop.key.raw.argument
-      } else if (utils.isDirectiveAttribute(prop)) {
+      } else if (prop.directive) {
         propType = 'Directive'
       }
 
diff --git a/lib/utils/index.js b/lib/utils/index.js
index fc29ec315..bc9cc0407 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -300,7 +300,9 @@ module.exports = {
    * @returns {boolean}
    */
   isBindingAttribute (attribute) {
-    return attribute.directive && attribute.key.name === 'bind'
+    return attribute.directive &&
+      attribute.key.name === 'bind' &&
+      attribute.key.argument
   },
 
   /**
@@ -312,17 +314,6 @@ module.exports = {
     return attribute.directive && attribute.key.name === 'on'
   },
 
-  /**
-   * Check whether the given attribute node is a directive
-   * @param {ASTNode} name The attribute to check.
-   * @returns {boolean}
-   */
-  isDirectiveAttribute (attribute) {
-    return attribute.directive &&
-      attribute.key.name !== 'on' &&
-      attribute.key.name !== 'bind'
-  },
-
   /**
    * Parse member expression node to get array with all of its parts
    * @param {ASTNode} MemberExpression
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index c34fee373..ce4d45ffe 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -101,6 +101,12 @@ age="30"></component></template>`,
 :age="user.age"></component></template>`,
       errors: ['Binding "age" should be on a new line.']
     },
+    {
+      code: `<template><component :is="test" v-bind="user"></component></template>`,
+      output: `<template><component :is="test"
+v-bind="user"></component></template>`,
+      errors: ['Directive "bind" should be on a new line.']
+    },
     {
       code: `<template><component :name="user.name" @buy="buyProduct"></component></template>`,
       output: `<template><component :name="user.name"