From a7d9313c65ac186c579455b9fede66ceefd81dc9 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 29 Jun 2017 11:24:28 +0100
Subject: [PATCH 01/12] Inits new rule. Adds documentation.

---
 docs/rules/max-attributes-per-line.md      | 88 ++++++++++++++++++++++
 lib/rules/max-attributes-per-line.js       | 44 +++++++++++
 tests/lib/rules/max-attributes-per-line.js | 37 +++++++++
 3 files changed, 169 insertions(+)
 create mode 100644 docs/rules/max-attributes-per-line.md
 create mode 100644 lib/rules/max-attributes-per-line.js
 create mode 100644 tests/lib/rules/max-attributes-per-line.js

diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
new file mode 100644
index 000000000..dc0a1fa38
--- /dev/null
+++ b/docs/rules/max-attributes-per-line.md
@@ -0,0 +1,88 @@
+# Define the number of attributes allows per line (max-attributes-per-line)
+
+Limits the maximum number of props per line to improve readability
+
+
+## Rule Details
+
+This rule aims to enforce a number of props per line in templates. It checks all the elements in a template and verifies that the number of props per line does not exceed the defined maximum.
+A prop is considered to be in a new line when there is a line break between two props.
+
+The default is one prop per line
+
+Examples of **incorrect** code for this rule:
+
+```js
+
+<component foo="1" bar="3"></component>
+
+<component foo="1" bar="2"
+  foobar="3"></component>
+
+```
+
+Examples of **correct** code for this rule:
+
+```js
+
+<component
+  foo="1"
+  bar="3"
+>
+</component>
+
+```
+
+### Options
+
+```
+{
+  "vue/max-attributes-per-line": ["error", {
+    "singleline": 2,
+    "multiline": 1
+  }]
+}
+```
+### `singleline`
+Number of maximum number of props when a tag is in a single line.
+
+The following patterns is considered a warning:
+```js
+// ["error", { "singleline": 2, "multiline": 1}]
+<component foo="John" bar="Smith" foobar={5555555}></component>;
+```
+
+The following pattern is not considered a warning:
+```js
+// ["error", { "singleline": 3, "multiline": 1}]
+<component foo="John" bar="Smith" foobar={5555555}></component>;
+```
+
+
+### `multiline`
+Number of maximum number of props when a tag is in a single line.
+
+
+The following patterns is considered a warning:
+```js
+// ["error", { "singleline": 2, "multiline": 1}]
+<component foo="John" bar="Smith"
+  foobar={5555555}>
+</component>;
+```
+
+The following pattern is not considered a warning:
+```js
+// ["error", { "singleline": 3, "multiline": 1}]
+<component
+  foo="John"
+  bar="Smith"
+  foobar={5555555}
+  >
+</component>;
+```
+
+## When Not To Use It
+
+If you do not want to check the number of props declared per line you can disable this rule.
+
diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
new file mode 100644
index 000000000..0138b4aa1
--- /dev/null
+++ b/lib/rules/max-attributes-per-line.js
@@ -0,0 +1,44 @@
+/**
+ * @fileoverview Define the number of attributes allows per line
+ * @author Filipa Lacerda
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+    meta: {
+        docs: {
+            description: "Define the number of attributes allows per line",
+            category: "Fill me in",
+            recommended: false
+        },
+        fixable: null,  // or "code" or "whitespace"
+        schema: [
+            // fill in your schema
+        ]
+    },
+
+    create: function(context) {
+
+        // variables should be defined here
+
+        //----------------------------------------------------------------------
+        // Helpers
+        //----------------------------------------------------------------------
+
+        // any helper functions should go here or else delete this section
+
+        //----------------------------------------------------------------------
+        // Public
+        //----------------------------------------------------------------------
+
+        return {
+
+            // give me methods
+
+        };
+    }
+};
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
new file mode 100644
index 000000000..9da2a5ea3
--- /dev/null
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -0,0 +1,37 @@
+/**
+ * @fileoverview Define the number of attributes allows per line
+ * @author Filipa Lacerda
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var rule = require("../../../lib/rules/max-attributes-per-line"),
+
+    RuleTester = require("eslint").RuleTester;
+
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+ruleTester.run("max-attributes-per-line", rule, {
+
+    valid: [
+
+        // give me some code that won't trigger a warning
+    ],
+
+    invalid: [
+        {
+            code: "",
+            errors: [{
+                message: "Fill me in.",
+                type: "Me too"
+            }]
+        }
+    ]
+});

From 7ef1ca540716d6e57e04009109669f48c234bf2f Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 29 Jun 2017 12:03:50 +0100
Subject: [PATCH 02/12] Improves rule definition

---
 docs/rules/max-attributes-per-line.md | 71 ++++++++++++++++++++-------
 1 file changed, 53 insertions(+), 18 deletions(-)

diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index dc0a1fa38..b20e1b03e 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -1,33 +1,42 @@
 # Define the number of attributes allows per line (max-attributes-per-line)
 
-Limits the maximum number of props per line to improve readability
+Limits the maximum number of attributes/properties per line to improve readability.
 
 
 ## Rule Details
 
-This rule aims to enforce a number of props per line in templates. It checks all the elements in a template and verifies that the number of props per line does not exceed the defined maximum.
-A prop is considered to be in a new line when there is a line break between two props.
+This rule aims to enforce a number of attributes per line in templates. It checks all the elements in a template and verifies that the number of attributes per line does not exceed the defined maximum.
+An attribute is considered to be in a new line when there is a line break between two attributes.
 
-The default is one prop per line
+There is predefined number of attributes that are acceptable in one-line case, as well as how many attributes are acceptable per line in multi-line case.
+
+The default is one attribute per line for multiline and three attributes per line in singleline.
 
 Examples of **incorrect** code for this rule:
 
 ```js
+<component lorem="1" ipsum="2" dolor="3" sit="4">
+</component>
 
-<component foo="1" bar="3"></component>
-
-<component foo="1" bar="2"
-  foobar="3"></component>
-
+<component
+  lorem="1" ipsum="2"
+  dolor="3"
+  sit="4"
+>
+</component>
 ```
 
 Examples of **correct** code for this rule:
 
 ```js
+<component lorem="1" ipsum="2" dolor="3">
+</component>
 
 <component
-  foo="1"
-  bar="3"
+  lorem="1"
+  ipsum="2"
+  dolor="3"
+  sit="4"
 >
 </component>
 
@@ -38,34 +47,60 @@ Examples of **correct** code for this rule:
 ```
 {
   "vue/max-attributes-per-line": ["error", {
+    "firstline": 1,
     "singleline": 2,
     "multiline": 1
   }]
 }
 ```
+
+### `firstline`
+For muliline declarations, defines if it accepts an attribute in the first line.
+
+The following patterns is considered a warning:
+```js
+// ["error", { "firstline": 1, "singleline": 2, "multiline": 1}]
+<component
+  foo="John" bar="Smith"
+  foobar={5555555}>
+</component>;
+```
+
+The following pattern is not considered a warning:
+```js
+// ["error", { "firstline": 0, "singleline": 3, "multiline": 1}]
+<component
+  foo="John"
+  bar="Smith"
+  foobar={5555555}
+  >
+</component>;
+```
+
+
 ### `singleline`
-Number of maximum number of props when a tag is in a single line.
+Number of maximum attributes per line when the opening tag is in a single line.
 
 The following patterns is considered a warning:
 ```js
-// ["error", { "singleline": 2, "multiline": 1}]
+// ["error", { "firstline": 1, "singleline": 2, "multiline": 1}]
 <component foo="John" bar="Smith" foobar={5555555}></component>;
 ```
 
 The following pattern is not considered a warning:
 ```js
-// ["error", { "singleline": 3, "multiline": 1}]
+// ["error", { "firstline": 1, "singleline": 3, "multiline": 1}]
 <component foo="John" bar="Smith" foobar={5555555}></component>;
 ```
 
 
 ### `multiline`
-Number of maximum number of props when a tag is in a single line.
+Number of maximum attributes per line when a tag is in multiple lines.
 
 
 The following patterns is considered a warning:
 ```js
-// ["error", { "singleline": 2, "multiline": 1}]
+// ["error", { "firstline": 1, "singleline": 2, "multiline": 1}]
 <component foo="John" bar="Smith"
   foobar={5555555}>
 </component>;
@@ -73,7 +108,7 @@ The following patterns is considered a warning:
 
 The following pattern is not considered a warning:
 ```js
-// ["error", { "singleline": 3, "multiline": 1}]
+// ["error", { "firstline": 0, "singleline": 3, "multiline": 1}]
 <component
   foo="John"
   bar="Smith"
@@ -84,5 +119,5 @@ The following pattern is not considered a warning:
 
 ## When Not To Use It
 
-If you do not want to check the number of props declared per line you can disable this rule.
+If you do not want to check the number of attributes declared per line you can disable this rule.
 

From 6a62bddb4d71cde507da23a8b95b3602bfd69f7a Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 30 Jun 2017 19:08:42 +0100
Subject: [PATCH 03/12] Update docs to match review

---
 docs/rules/max-attributes-per-line.md | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index b20e1b03e..fed2a6875 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -5,12 +5,11 @@ Limits the maximum number of attributes/properties per line to improve readabili
 
 ## Rule Details
 
-This rule aims to enforce a number of attributes per line in templates. It checks all the elements in a template and verifies that the number of attributes per line does not exceed the defined maximum.
+This rule aims to enforce a number of attributes per line in templates.
+It checks all the elements in a template and verifies that the number of attributes per line does not exceed the defined maximum.
 An attribute is considered to be in a new line when there is a line break between two attributes.
 
-There is predefined number of attributes that are acceptable in one-line case, as well as how many attributes are acceptable per line in multi-line case.
-
-The default is one attribute per line for multiline and three attributes per line in singleline.
+There is a configurable number of attributes that are acceptable in one-line case (default 3), as well as how many attributes are acceptable per line in multi-line case (default 1).
 
 Examples of **incorrect** code for this rule:
 
@@ -55,9 +54,9 @@ Examples of **correct** code for this rule:
 ```
 
 ### `firstline`
-For muliline declarations, defines if it accepts an attribute in the first line.
+For multi-line declarations, defines how many attributes are acceptable to be put in the first line. (Default 0)
 
-The following patterns is considered a warning:
+Example of **incorrect** code for this setting:
 ```js
 // ["error", { "firstline": 1, "singleline": 2, "multiline": 1}]
 <component
@@ -66,7 +65,7 @@ The following patterns is considered a warning:
 </component>;
 ```
 
-The following pattern is not considered a warning:
+Example of **correct** code for this setting:
 ```js
 // ["error", { "firstline": 0, "singleline": 3, "multiline": 1}]
 <component
@@ -81,13 +80,13 @@ The following pattern is not considered a warning:
 ### `singleline`
 Number of maximum attributes per line when the opening tag is in a single line.
 
-The following patterns is considered a warning:
+Example of **incorrect** code for this setting:
 ```js
 // ["error", { "firstline": 1, "singleline": 2, "multiline": 1}]
 <component foo="John" bar="Smith" foobar={5555555}></component>;
 ```
 
-The following pattern is not considered a warning:
+Example of **correct** code for this setting:
 ```js
 // ["error", { "firstline": 1, "singleline": 3, "multiline": 1}]
 <component foo="John" bar="Smith" foobar={5555555}></component>;
@@ -97,8 +96,7 @@ The following pattern is not considered a warning:
 ### `multiline`
 Number of maximum attributes per line when a tag is in multiple lines.
 
-
-The following patterns is considered a warning:
+Example of **incorrect** code for this setting:
 ```js
 // ["error", { "firstline": 1, "singleline": 2, "multiline": 1}]
 <component foo="John" bar="Smith"
@@ -106,7 +104,7 @@ The following patterns is considered a warning:
 </component>;
 ```
 
-The following pattern is not considered a warning:
+Example of **correct** code for this setting:
 ```js
 // ["error", { "firstline": 0, "singleline": 3, "multiline": 1}]
 <component

From 1d347132f120d6e5c085b8d3ee79170002068cb8 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 6 Jul 2017 23:30:36 +0100
Subject: [PATCH 04/12] Adds rule to check for number of attributes per line

---
 lib/rules/max-attributes-per-line.js       | 119 ++++++++++++++++-----
 tests/lib/rules/max-attributes-per-line.js | 104 +++++++++++++-----
 2 files changed, 172 insertions(+), 51 deletions(-)

diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index 0138b4aa1..1f1e3d6b9 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -2,43 +2,110 @@
  * @fileoverview Define the number of attributes allows per line
  * @author Filipa Lacerda
  */
-"use strict";
+'use strict'
 
-//------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------
 // Rule Definition
-//------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------
+const utils = require('../utils')
 
 module.exports = {
-    meta: {
-        docs: {
-            description: "Define the number of attributes allows per line",
-            category: "Fill me in",
-            recommended: false
-        },
-        fixable: null,  // or "code" or "whitespace"
-        schema: [
-            // fill in your schema
-        ]
+  meta: {
+    docs: {
+      description: 'Define the number of attributes allows per line',
+      category: 'Stylistic Issues',
+      recommended: false
     },
+    fixable: 'code',
+    schema: [{
+      type: 'object',
+      properties: {
+        'firstline': {
+          type: 'number',
+          minimum: 0
+        },
+        'singleline': {
+          type: 'number',
+          minimum: 1
+        },
+        'multiline': {
+          type: 'number',
+          minimum: 1
+        }
+      }
+    }]
+  },
+
+  create: function (context) {
+    const configuration = context.options[0]
+    const multilineMaximum = configuration.multiline
+    const singlelinemMaximum = configuration.singleline
+    const canHaveFirstLine = configuration.firstline !== 0
+
+    utils.registerTemplateBodyVisitor(context, {
+      'VStartTag' (node) {
+        const numberOfAttributes = node.attributes.length
 
-    create: function(context) {
+        if (!numberOfAttributes) return
 
-        // variables should be defined here
+        if (isSingleLine(node) && numberOfAttributes > singlelinemMaximum) {
+          context.report({
+            node,
+            loc: node.loc,
+            message: 'It has more than {{singlelinemMaximum}} attributes per line.',
+            data: {
+              singlelinemMaximum
+            }
+          })
+        }
 
-        //----------------------------------------------------------------------
-        // Helpers
-        //----------------------------------------------------------------------
+        if (!isSingleLine(node)) {
+          if (!canHaveFirstLine && node.attributes[0].loc.start.line === node.loc.start.line) {
+            context.report({
+              node,
+              loc: node.loc,
+              message: 'Attribute {{propName}} should be on a new line.',
+              data: {
+                propName: node.attributes[0].key.name
+              }
+            })
+          }
 
-        // any helper functions should go here or else delete this section
+          const propsPerLine = [[node.attributes[0]]]
 
-        //----------------------------------------------------------------------
-        // Public
-        //----------------------------------------------------------------------
+          node.attributes.reduce(function (previous, current) {
+            if (previous.loc.end.line === current.loc.start.line) {
+              propsPerLine[propsPerLine.length - 1].push(current)
+            } else {
+              propsPerLine.push([current])
+            }
+            return current
+          })
 
-        return {
+          propsPerLine.forEach(function (attributes) {
+            if (attributes.length > multilineMaximum) {
+              const prop = attributes[multilineMaximum]
 
-            // give me methods
+              context.report({
+                node,
+                loc: node.loc,
+                message: 'Attribute {{propName}} should be on a new line.',
+                data: {
+                  propName: prop.key.name
+                }
+              })
+            }
+          })
+        }
+      }
+    })
 
-        };
+    // ----------------------------------------------------------------------
+    // Helpers
+    // ----------------------------------------------------------------------
+    function isSingleLine (node) {
+      return node.loc.start.line === node.loc.end.line
     }
-};
+    return {}
+  }
+}
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index 9da2a5ea3..09c9eed61 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -2,36 +2,90 @@
  * @fileoverview Define the number of attributes allows per line
  * @author Filipa Lacerda
  */
-"use strict";
+'use strict'
 
-//------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------
 // Requirements
-//------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------
 
-var rule = require("../../../lib/rules/max-attributes-per-line"),
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/max-attributes-per-line')
 
-    RuleTester = require("eslint").RuleTester;
-
-
-//------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------
 // Tests
-//------------------------------------------------------------------------------
-
-var ruleTester = new RuleTester();
-ruleTester.run("max-attributes-per-line", rule, {
+// ------------------------------------------------------------------------------
 
-    valid: [
+const ruleTester = new RuleTester({
+  parser: 'vue-eslint-parser',
+  parserOptions: { ecmaVersion: 2015 }
+})
 
-        // give me some code that won't trigger a warning
-    ],
+ruleTester.run('max-attributes-per-line', rule, {
+  valid: [
+    {
+      code: `<template><component></component></template>`,
+      options: [{ singleline: 1, multiline: 1, firstline: 0 }]
+    },
+    {
+      code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
+      options: [{ singleline: 3, multiline: 1, firstline: 0 }]
+    },
+    {
+      code: `<template><component name="John Doe"
+        age="30">
+        </component>
+      </template>`,
+      options: [{ singleline: 3, multiline: 1, firstline: 1 }]
+    },
+    {
+      code: `<template><component
+        name="John Doe"
+        age="30">
+        </component>
+      </template>`,
+      options: [{ singleline: 3, multiline: 1, firstline: 0 }]
+    },
+    {
+      code: `<template><component
+        name="John Doe" age="30"
+        job="Vet">
+        </component>
+      </template>`,
+      options: [{ singleline: 3, multiline: 2, firstline: 0 }]
+    }
+  ],
 
-    invalid: [
-        {
-            code: "",
-            errors: [{
-                message: "Fill me in.",
-                type: "Me too"
-            }]
-        }
-    ]
-});
+  invalid: [
+    {
+      code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
+      options: [{ singleline: 1, multiline: 1, firstline: 0 }],
+      errors: ['It has more than 1 attributes per line.']
+    },
+    {
+      code: `<template><component name="John Doe"
+        age="30">
+        </component>
+      </template>`,
+      options: [{ singleline: 3, multiline: 1, firstline: 0 }],
+      errors: ['Attribute name should be on a new line.']
+    },
+    {
+      code: `<template><component
+        name="John Doe" age="30"
+        job="Vet">
+        </component>
+      </template>`,
+      options: [{ singleline: 3, multiline: 1, firstline: 0 }],
+      errors: ['Attribute age should be on a new line.']
+    },
+    {
+      code: `<template><component
+        name="John Doe" age="30"
+        job="Vet" pet="dog" petname="Snoopy">
+        </component>
+      </template>`,
+      options: [{ singleline: 3, multiline: 2, firstline: 0 }],
+      errors: ['Attribute petname should be on a new line.']
+    }
+  ]
+})

From c78b20d131041dc1b371f134235e9783967a5a17 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 13 Jul 2017 10:15:19 +0100
Subject: [PATCH 05/12] Updates per code review: - Adds defaults values - Adds
 tests for the default values

---
 lib/rules/max-attributes-per-line.js       | 24 +++++++-----
 tests/lib/rules/max-attributes-per-line.js | 43 +++++++++++++++++-----
 2 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index 1f1e3d6b9..c1a6d0149 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -16,31 +16,35 @@ module.exports = {
       category: 'Stylistic Issues',
       recommended: false
     },
-    fixable: 'code',
+    fixable: null,
     schema: [{
       type: 'object',
       properties: {
-        'firstline': {
-          type: 'number',
-          minimum: 0
-        },
         'singleline': {
           type: 'number',
           minimum: 1
         },
         'multiline': {
-          type: 'number',
-          minimum: 1
+          type: 'object',
+          properties: {
+            'max': {
+              type: 'number',
+              minimum: 1
+            },
+            'allowFirstLine': {
+              type: 'boolean'
+            }
+          }
         }
       }
     }]
   },
 
   create: function (context) {
-    const configuration = context.options[0]
-    const multilineMaximum = configuration.multiline
+    const configuration = context.options[0] || { singleline: 3, multiline: { max: 1, allowFirstLine: false }}
+    const multilineMaximum = configuration.multiline.max
     const singlelinemMaximum = configuration.singleline
-    const canHaveFirstLine = configuration.firstline !== 0
+    const canHaveFirstLine = configuration.multiline.allowFirstLine
 
     utils.registerTemplateBodyVisitor(context, {
       'VStartTag' (node) {
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index 09c9eed61..189d47a30 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -22,20 +22,33 @@ const ruleTester = new RuleTester({
 
 ruleTester.run('max-attributes-per-line', rule, {
   valid: [
+    {
+      code: `<template><component></component></template>`
+    },
+    {
+      code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`
+    },
+    {
+      code: `<template><component
+        name="John Doe"
+        age="30">
+        </component>
+      </template>`
+    },
     {
       code: `<template><component></component></template>`,
-      options: [{ singleline: 1, multiline: 1, firstline: 0 }]
+      options: [{ singleline: 1, multiline: { max: 1, allowFirstLine: false }}]
     },
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
-      options: [{ singleline: 3, multiline: 1, firstline: 0 }]
+      options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}]
     },
     {
       code: `<template><component name="John Doe"
         age="30">
         </component>
       </template>`,
-      options: [{ singleline: 3, multiline: 1, firstline: 1 }]
+      options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: true }}]
     },
     {
       code: `<template><component
@@ -43,7 +56,7 @@ ruleTester.run('max-attributes-per-line', rule, {
         age="30">
         </component>
       </template>`,
-      options: [{ singleline: 3, multiline: 1, firstline: 0 }]
+      options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}]
     },
     {
       code: `<template><component
@@ -51,14 +64,26 @@ ruleTester.run('max-attributes-per-line', rule, {
         job="Vet">
         </component>
       </template>`,
-      options: [{ singleline: 3, multiline: 2, firstline: 0 }]
+      options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}]
     }
   ],
 
   invalid: [
+    {
+      code: `<template><component name="John Doe" age="30" job="Vet" petname="Snoopy"></component></template>`,
+      errors: ['It has more than 3 attributes per line.']
+    },
+    {
+      code: `<template><component job="Vet"
+        name="John Doe"
+        age="30">
+        </component>
+      </template>`,
+      errors: ['Attribute job should be on a new line.']
+    },
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
-      options: [{ singleline: 1, multiline: 1, firstline: 0 }],
+      options: [{ singleline: 1, multiline: { max: 1, allowFirstLine: false }}],
       errors: ['It has more than 1 attributes per line.']
     },
     {
@@ -66,7 +91,7 @@ ruleTester.run('max-attributes-per-line', rule, {
         age="30">
         </component>
       </template>`,
-      options: [{ singleline: 3, multiline: 1, firstline: 0 }],
+      options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}],
       errors: ['Attribute name should be on a new line.']
     },
     {
@@ -75,7 +100,7 @@ ruleTester.run('max-attributes-per-line', rule, {
         job="Vet">
         </component>
       </template>`,
-      options: [{ singleline: 3, multiline: 1, firstline: 0 }],
+      options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}],
       errors: ['Attribute age should be on a new line.']
     },
     {
@@ -84,7 +109,7 @@ ruleTester.run('max-attributes-per-line', rule, {
         job="Vet" pet="dog" petname="Snoopy">
         </component>
       </template>`,
-      options: [{ singleline: 3, multiline: 2, firstline: 0 }],
+      options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}],
       errors: ['Attribute petname should be on a new line.']
     }
   ]

From 56f5f7062ceb6b69376db51db4944a08fa21d923 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 18 Jul 2017 14:37:46 +0100
Subject: [PATCH 06/12] Updates single line max attributes error as per code
 review

---
 lib/rules/max-attributes-per-line.js       | 3 ++-
 tests/lib/rules/max-attributes-per-line.js | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index c1a6d0149..2c6b50b3e 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -56,8 +56,9 @@ module.exports = {
           context.report({
             node,
             loc: node.loc,
-            message: 'It has more than {{singlelinemMaximum}} attributes per line.',
+            message: 'There are {{numberOfAttributes}} in this line, but the maximum is {{singlelinemMaximum}}.',
             data: {
+              numberOfAttributes,
               singlelinemMaximum
             }
           })
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index 189d47a30..0701e414a 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -71,7 +71,7 @@ ruleTester.run('max-attributes-per-line', rule, {
   invalid: [
     {
       code: `<template><component name="John Doe" age="30" job="Vet" petname="Snoopy"></component></template>`,
-      errors: ['It has more than 3 attributes per line.']
+      errors: ['There are 4 in this line, but the maximum is 3.']
     },
     {
       code: `<template><component job="Vet"
@@ -84,7 +84,7 @@ ruleTester.run('max-attributes-per-line', rule, {
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
       options: [{ singleline: 1, multiline: { max: 1, allowFirstLine: false }}],
-      errors: ['It has more than 1 attributes per line.']
+      errors: ['There are 3 in this line, but the maximum is 1.']
     },
     {
       code: `<template><component name="John Doe"

From ca31f0958e6f92aa1d4a7dcf38a7dde216d4844f Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 24 Jul 2017 10:47:23 +0100
Subject: [PATCH 07/12] Changes schema to allow a different config Changes
 options parser to allow to redifine only one prop Changes error thrown for
 singleline errors Updates tests and docs accordingly

---
 docs/rules/max-attributes-per-line.md      |  33 ++---
 lib/rules/max-attributes-per-line.js       | 143 ++++++++++++++-------
 tests/lib/rules/max-attributes-per-line.js |  28 +++-
 3 files changed, 138 insertions(+), 66 deletions(-)

diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index fed2a6875..5febe9d33 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -45,29 +45,30 @@ Examples of **correct** code for this rule:
 
 ```
 {
-  "vue/max-attributes-per-line": ["error", {
-    "firstline": 1,
-    "singleline": 2,
-    "multiline": 1
+  "vue/max-attributes-per-line": [{
+    "singleline": 3,
+    "multiline": {
+      max: 1,
+      allowFirstLine: false
+    }
   }]
 }
 ```
 
-### `firstline`
-For multi-line declarations, defines how many attributes are acceptable to be put in the first line. (Default 0)
+### `allowFirstLine`
+For multi-line declarations, defines if allows attributes to be put in the first line. (Default false)
 
 Example of **incorrect** code for this setting:
 ```js
-// ["error", { "firstline": 1, "singleline": 2, "multiline": 1}]
-<component
-  foo="John" bar="Smith"
+// [{ "multiline": { "allowFirstLine": false }}]
+<component foo="John" bar="Smith"
   foobar={5555555}>
 </component>;
 ```
 
 Example of **correct** code for this setting:
 ```js
-// ["error", { "firstline": 0, "singleline": 3, "multiline": 1}]
+// [{ "multiline": { "allowFirstLine": false }}]
 <component
   foo="John"
   bar="Smith"
@@ -78,27 +79,27 @@ Example of **correct** code for this setting:
 
 
 ### `singleline`
-Number of maximum attributes per line when the opening tag is in a single line.
+Number of maximum attributes per line when the opening tag is in a single line. (Default is 3)
 
 Example of **incorrect** code for this setting:
 ```js
-// ["error", { "firstline": 1, "singleline": 2, "multiline": 1}]
+// [{"singleline": 2,}]
 <component foo="John" bar="Smith" foobar={5555555}></component>;
 ```
 
 Example of **correct** code for this setting:
 ```js
-// ["error", { "firstline": 1, "singleline": 3, "multiline": 1}]
+// [{"singleline": 3,}]
 <component foo="John" bar="Smith" foobar={5555555}></component>;
 ```
 
 
 ### `multiline`
-Number of maximum attributes per line when a tag is in multiple lines.
+Number of maximum attributes per line when a tag is in multiple lines. (Default is 1)
 
 Example of **incorrect** code for this setting:
 ```js
-// ["error", { "firstline": 1, "singleline": 2, "multiline": 1}]
+// [{"multiline": 1}]
 <component foo="John" bar="Smith"
   foobar={5555555}>
 </component>;
@@ -106,7 +107,7 @@ Example of **incorrect** code for this setting:
 
 Example of **correct** code for this setting:
 ```js
-// ["error", { "firstline": 0, "singleline": 3, "multiline": 1}]
+// [{"multiline": 1}]
 <component
   foo="John"
   bar="Smith"
diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index 2c6b50b3e..3fcd96686 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -17,34 +17,59 @@ module.exports = {
       recommended: false
     },
     fixable: null,
-    schema: [{
-      type: 'object',
-      properties: {
-        'singleline': {
-          type: 'number',
-          minimum: 1
-        },
-        'multiline': {
-          type: 'object',
-          properties: {
-            'max': {
-              type: 'number',
-              minimum: 1
-            },
-            'allowFirstLine': {
-              type: 'boolean'
-            }
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          singleline: {
+            anyOf: [
+              {
+                type: 'number',
+                minimum: 1
+              },
+              {
+                type: 'object',
+                properties: {
+                  max: {
+                    type: 'number',
+                    minimum: 1
+                  }
+                },
+                additionalProperties: false
+              }
+            ]
+          },
+          multiline: {
+            anyOf: [
+              {
+                type: 'number',
+                minimum: 1
+              },
+              {
+                type: 'object',
+                properties: {
+                  max: {
+                    type: 'number',
+                    minimum: 1
+                  },
+                  allowFirstLine: {
+                    type: 'boolean'
+                  }
+                },
+                additionalProperties: false
+              }
+            ]
           }
         }
       }
-    }]
+    ]
   },
 
   create: function (context) {
-    const configuration = context.options[0] || { singleline: 3, multiline: { max: 1, allowFirstLine: false }}
-    const multilineMaximum = configuration.multiline.max
+    const configuration = parseOptions(context.options[0])
+    const multilineMaximum = configuration.multiline
     const singlelinemMaximum = configuration.singleline
-    const canHaveFirstLine = configuration.multiline.allowFirstLine
+    const canHaveFirstLine = configuration.allowFirstLine
 
     utils.registerTemplateBodyVisitor(context, {
       'VStartTag' (node) {
@@ -53,27 +78,12 @@ module.exports = {
         if (!numberOfAttributes) return
 
         if (isSingleLine(node) && numberOfAttributes > singlelinemMaximum) {
-          context.report({
-            node,
-            loc: node.loc,
-            message: 'There are {{numberOfAttributes}} in this line, but the maximum is {{singlelinemMaximum}}.',
-            data: {
-              numberOfAttributes,
-              singlelinemMaximum
-            }
-          })
+          showErrors(node.attributes.slice(singlelinemMaximum), node)
         }
 
         if (!isSingleLine(node)) {
           if (!canHaveFirstLine && node.attributes[0].loc.start.line === node.loc.start.line) {
-            context.report({
-              node,
-              loc: node.loc,
-              message: 'Attribute {{propName}} should be on a new line.',
-              data: {
-                propName: node.attributes[0].key.name
-              }
-            })
+            showErrors([node.attributes[0]], node)
           }
 
           const propsPerLine = [[node.attributes[0]]]
@@ -89,16 +99,7 @@ module.exports = {
 
           propsPerLine.forEach(function (attributes) {
             if (attributes.length > multilineMaximum) {
-              const prop = attributes[multilineMaximum]
-
-              context.report({
-                node,
-                loc: node.loc,
-                message: 'Attribute {{propName}} should be on a new line.',
-                data: {
-                  propName: prop.key.name
-                }
-              })
+              showErrors(attributes.splice(multilineMaximum), node)
             }
           })
         }
@@ -111,6 +112,52 @@ module.exports = {
     function isSingleLine (node) {
       return node.loc.start.line === node.loc.end.line
     }
+
+    function parseOptions (options) {
+      const defaults = {
+        singleline: 3,
+        multiline: 1,
+        allowFirstLine: false
+      }
+
+      if (options) {
+        if (typeof options.singleline === 'number') {
+          defaults.singleline = options.singleline
+        } else if (options.singleline && options.singleline.max) {
+          defaults.singleline = options.singleline.max
+        }
+
+        if (options.multiline) {
+          if (typeof options.multiline === 'number') {
+            defaults.multiline = options.multiline
+          } else if (options.multiline) {
+            if (options.multiline.max) {
+              defaults.multiline = options.multiline.max
+            }
+
+            if (options.multiline.allowFirstLine) {
+              defaults.allowFirstLine = options.multiline.allowFirstLine
+            }
+          }
+        }
+      }
+
+      return defaults
+    }
+
+    function showErrors (attributes, node) {
+      attributes.forEach((prop) => {
+        context.report({
+          node,
+          loc: node.loc,
+          message: 'Attribute {{propName}} should be on a new line.',
+          data: {
+            propName: prop.key.name
+          }
+        })
+      })
+    }
+
     return {}
   }
 }
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index 0701e414a..ab98db57d 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -28,6 +28,10 @@ ruleTester.run('max-attributes-per-line', rule, {
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`
     },
+    {
+      code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
+      options: [{ multiline: { allowFirstLine: true }}]
+    },
     {
       code: `<template><component
         name="John Doe"
@@ -35,6 +39,14 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`
     },
+    {
+      code: `<template><component
+        name="John Doe"
+        age="30">
+        </component>
+      </template>`,
+      options: [{ singleline: 1 }]
+    },
     {
       code: `<template><component></component></template>`,
       options: [{ singleline: 1, multiline: { max: 1, allowFirstLine: false }}]
@@ -71,7 +83,7 @@ ruleTester.run('max-attributes-per-line', rule, {
   invalid: [
     {
       code: `<template><component name="John Doe" age="30" job="Vet" petname="Snoopy"></component></template>`,
-      errors: ['There are 4 in this line, but the maximum is 3.']
+      errors: ['Attribute petname should be on a new line.']
     },
     {
       code: `<template><component job="Vet"
@@ -84,7 +96,7 @@ ruleTester.run('max-attributes-per-line', rule, {
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
       options: [{ singleline: 1, multiline: { max: 1, allowFirstLine: false }}],
-      errors: ['There are 3 in this line, but the maximum is 1.']
+      errors: ['Attribute age should be on a new line.', 'Attribute job should be on a new line.']
     },
     {
       code: `<template><component name="John Doe"
@@ -111,6 +123,18 @@ ruleTester.run('max-attributes-per-line', rule, {
       </template>`,
       options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}],
       errors: ['Attribute petname should be on a new line.']
+    },
+    {
+      code: `<template><component
+        name="John Doe" age="30"
+        job="Vet" pet="dog" petname="Snoopy" extra="foo">
+        </component>
+      </template>`,
+      options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}],
+      errors: [
+        'Attribute petname should be on a new line.',
+        'Attribute extra should be on a new line.'
+      ]
     }
   ]
 })

From ed73ad869e7c0962f6a650af3ee8adc392447027 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Sun, 30 Jul 2017 16:28:35 +0100
Subject: [PATCH 08/12] Moves function into utils Uses arrow function Improves
 readability

---
 lib/rules/max-attributes-per-line.js       | 44 +++++++++++-----------
 lib/utils/index.js                         |  9 +++++
 tests/lib/rules/max-attributes-per-line.js | 16 ++++----
 3 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index 3fcd96686..efae5acf1 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -77,31 +77,18 @@ module.exports = {
 
         if (!numberOfAttributes) return
 
-        if (isSingleLine(node) && numberOfAttributes > singlelinemMaximum) {
+        if (utils.isSingleLine(node) && numberOfAttributes > singlelinemMaximum) {
           showErrors(node.attributes.slice(singlelinemMaximum), node)
         }
 
-        if (!isSingleLine(node)) {
+        if (!utils.isSingleLine(node)) {
           if (!canHaveFirstLine && node.attributes[0].loc.start.line === node.loc.start.line) {
             showErrors([node.attributes[0]], node)
           }
 
-          const propsPerLine = [[node.attributes[0]]]
-
-          node.attributes.reduce(function (previous, current) {
-            if (previous.loc.end.line === current.loc.start.line) {
-              propsPerLine[propsPerLine.length - 1].push(current)
-            } else {
-              propsPerLine.push([current])
-            }
-            return current
-          })
-
-          propsPerLine.forEach(function (attributes) {
-            if (attributes.length > multilineMaximum) {
-              showErrors(attributes.splice(multilineMaximum), node)
-            }
-          })
+          groupAttrsByLine(node.attributes)
+            .filter(attrs => attrs.length > multilineMaximum)
+            .forEach(attrs => showErrors(attrs.splice(multilineMaximum), node))
         }
       }
     })
@@ -109,10 +96,6 @@ module.exports = {
     // ----------------------------------------------------------------------
     // Helpers
     // ----------------------------------------------------------------------
-    function isSingleLine (node) {
-      return node.loc.start.line === node.loc.end.line
-    }
-
     function parseOptions (options) {
       const defaults = {
         singleline: 3,
@@ -150,7 +133,7 @@ module.exports = {
         context.report({
           node,
           loc: node.loc,
-          message: 'Attribute {{propName}} should be on a new line.',
+          message: 'Attribute "{{propName}}" should be on a new line.',
           data: {
             propName: prop.key.name
           }
@@ -158,6 +141,21 @@ module.exports = {
       })
     }
 
+    function groupAttrsByLine(attributes) {
+      const propsPerLine = [[attributes[0]]]
+
+      attributes.reduce((previous, current) => {
+        if (previous.loc.end.line === current.loc.start.line) {
+          propsPerLine[propsPerLine.length - 1].push(current)
+        } else {
+          propsPerLine.push([current])
+        }
+        return current
+      })
+
+      return propsPerLine
+    }
+
     return {}
   }
 }
diff --git a/lib/utils/index.js b/lib/utils/index.js
index cd01df744..6efd0c081 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -241,5 +241,14 @@ module.exports = {
     assert(typeof name === 'string')
 
     return VOID_ELEMENT_NAMES.has(name.toLowerCase())
+  },
+
+    /**
+     * Check whether the component is declared in a single line or not.
+     * @param {ASTNode} node
+     * @returns {boolean
+     */
+  isSingleLine (node) {
+    return node.loc.start.line === node.loc.end.line
   }
 }
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index ab98db57d..7ed03fb54 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -83,7 +83,7 @@ ruleTester.run('max-attributes-per-line', rule, {
   invalid: [
     {
       code: `<template><component name="John Doe" age="30" job="Vet" petname="Snoopy"></component></template>`,
-      errors: ['Attribute petname should be on a new line.']
+      errors: ['Attribute "petname" should be on a new line.']
     },
     {
       code: `<template><component job="Vet"
@@ -91,12 +91,12 @@ ruleTester.run('max-attributes-per-line', rule, {
         age="30">
         </component>
       </template>`,
-      errors: ['Attribute job should be on a new line.']
+      errors: ['Attribute "job" should be on a new line.']
     },
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
       options: [{ singleline: 1, multiline: { max: 1, allowFirstLine: false }}],
-      errors: ['Attribute age should be on a new line.', 'Attribute job should be on a new line.']
+      errors: ['Attribute "age" should be on a new line.', 'Attribute "job" should be on a new line.']
     },
     {
       code: `<template><component name="John Doe"
@@ -104,7 +104,7 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}],
-      errors: ['Attribute name should be on a new line.']
+      errors: ['Attribute "name" should be on a new line.']
     },
     {
       code: `<template><component
@@ -113,7 +113,7 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}],
-      errors: ['Attribute age should be on a new line.']
+      errors: ['Attribute "age" should be on a new line.']
     },
     {
       code: `<template><component
@@ -122,7 +122,7 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}],
-      errors: ['Attribute petname should be on a new line.']
+      errors: ['Attribute "petname" should be on a new line.']
     },
     {
       code: `<template><component
@@ -132,8 +132,8 @@ ruleTester.run('max-attributes-per-line', rule, {
       </template>`,
       options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}],
       errors: [
-        'Attribute petname should be on a new line.',
-        'Attribute extra should be on a new line.'
+        'Attribute "petname" should be on a new line.',
+        'Attribute "extra" should be on a new line.'
       ]
     }
   ]

From 39d0743887972de15ab830a09f1f69f18c7ca31a Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Sun, 30 Jul 2017 16:37:27 +0100
Subject: [PATCH 09/12] Fix eslint error

---
 lib/rules/max-attributes-per-line.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index efae5acf1..b0cfd851b 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -141,7 +141,7 @@ module.exports = {
       })
     }
 
-    function groupAttrsByLine(attributes) {
+    function groupAttrsByLine (attributes) {
       const propsPerLine = [[attributes[0]]]
 
       attributes.reduce((previous, current) => {

From 796611e7bf7f5f22b77a9870b37b550ecd3f6fb3 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Sun, 30 Jul 2017 16:42:54 +0100
Subject: [PATCH 10/12] Improves code coverage

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

diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index b0cfd851b..3e683cbcd 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -113,7 +113,7 @@ module.exports = {
         if (options.multiline) {
           if (typeof options.multiline === 'number') {
             defaults.multiline = options.multiline
-          } else if (options.multiline) {
+          } else if (typeof options.multiline === 'object') {
             if (options.multiline.max) {
               defaults.multiline = options.multiline.max
             }
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 9c1d83aa2..a78f99987 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -402,7 +402,7 @@ module.exports = {
       /**
      * Check whether the component is declared in a single line or not.
      * @param {ASTNode} node
-     * @returns {boolean
+     * @returns {boolean}
      */
   isSingleLine (node) {
     return node.loc.start.line === node.loc.end.line
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index 7ed03fb54..668ca62ad 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -93,6 +93,11 @@ ruleTester.run('max-attributes-per-line', rule, {
       </template>`,
       errors: ['Attribute "job" should be on a new line.']
     },
+    {
+      code: `<template><component name="John Doe" age="30"></component></template>`,
+      options: [{ singleline: { max: 1 }}],
+      errors: ['Attribute "age" should be on a new line.']
+    },
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
       options: [{ singleline: 1, multiline: { max: 1, allowFirstLine: false }}],
@@ -115,6 +120,15 @@ ruleTester.run('max-attributes-per-line', rule, {
       options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}],
       errors: ['Attribute "age" should be on a new line.']
     },
+    {
+      code: `<template><component
+        name="John Doe" age="30"
+        job="Vet">
+        </component>
+      </template>`,
+      options: [{ singleline: 3, multiline: 1 }],
+      errors: ['Attribute "age" should be on a new line.']
+    },
     {
       code: `<template><component
         name="John Doe" age="30"

From 982d9f26c0366c0f151e7ed32c792b8bd2f8fda8 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Sat, 5 Aug 2017 14:22:51 +0100
Subject: [PATCH 11/12] Update docs as per code review

---
 docs/rules/max-attributes-per-line.md | 42 +++++++++++++--------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index 5febe9d33..8493465b6 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -3,7 +3,7 @@
 Limits the maximum number of attributes/properties per line to improve readability.
 
 
-## Rule Details
+## :book: Rule Details
 
 This rule aims to enforce a number of attributes per line in templates.
 It checks all the elements in a template and verifies that the number of attributes per line does not exceed the defined maximum.
@@ -11,9 +11,9 @@ An attribute is considered to be in a new line when there is a line break betwee
 
 There is a configurable number of attributes that are acceptable in one-line case (default 3), as well as how many attributes are acceptable per line in multi-line case (default 1).
 
-Examples of **incorrect** code for this rule:
+:-1: Examples of **incorrect** code for this rule:
 
-```js
+```html
 <component lorem="1" ipsum="2" dolor="3" sit="4">
 </component>
 
@@ -25,9 +25,9 @@ Examples of **incorrect** code for this rule:
 </component>
 ```
 
-Examples of **correct** code for this rule:
+:+1: Examples of **correct** code for this rule:
 
-```js
+```html
 <component lorem="1" ipsum="2" dolor="3">
 </component>
 
@@ -41,7 +41,7 @@ Examples of **correct** code for this rule:
 
 ```
 
-### Options
+### :wrench:  Options
 
 ```
 {
@@ -55,19 +55,19 @@ Examples of **correct** code for this rule:
 }
 ```
 
-### `allowFirstLine`
+#### `allowFirstLine`
 For multi-line declarations, defines if allows attributes to be put in the first line. (Default false)
 
-Example of **incorrect** code for this setting:
-```js
+:-1: Example of **incorrect** code for this setting:
+```html
 // [{ "multiline": { "allowFirstLine": false }}]
 <component foo="John" bar="Smith"
   foobar={5555555}>
 </component>;
 ```
 
-Example of **correct** code for this setting:
-```js
+:+1: Example of **correct** code for this setting:
+```html
 // [{ "multiline": { "allowFirstLine": false }}]
 <component
   foo="John"
@@ -78,35 +78,35 @@ Example of **correct** code for this setting:
 ```
 
 
-### `singleline`
+#### `singleline`
 Number of maximum attributes per line when the opening tag is in a single line. (Default is 3)
 
-Example of **incorrect** code for this setting:
-```js
+:-1: Example of **incorrect** code for this setting:
+```html
 // [{"singleline": 2,}]
 <component foo="John" bar="Smith" foobar={5555555}></component>;
 ```
 
-Example of **correct** code for this setting:
-```js
+:+1: Example of **correct** code for this setting:
+```html
 // [{"singleline": 3,}]
 <component foo="John" bar="Smith" foobar={5555555}></component>;
 ```
 
 
-### `multiline`
+#### `multiline`
 Number of maximum attributes per line when a tag is in multiple lines. (Default is 1)
 
-Example of **incorrect** code for this setting:
-```js
+:-1: Example of **incorrect** code for this setting:
+```html
 // [{"multiline": 1}]
 <component foo="John" bar="Smith"
   foobar={5555555}>
 </component>;
 ```
 
-Example of **correct** code for this setting:
-```js
+:+1: Example of **correct** code for this setting:
+```html
 // [{"multiline": 1}]
 <component
   foo="John"

From dcb3ee337f4fed3bc60c78980ba0c01f6ef3a5d9 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 9 Aug 2017 21:41:51 +0200
Subject: [PATCH 12/12] reports the violated attributes instead of elements

---
 lib/rules/max-attributes-per-line.js       |  4 +-
 tests/lib/rules/max-attributes-per-line.js | 59 ++++++++++++++++++----
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index 3e683cbcd..f5309e4a1 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -131,8 +131,8 @@ module.exports = {
     function showErrors (attributes, node) {
       attributes.forEach((prop) => {
         context.report({
-          node,
-          loc: node.loc,
+          node: prop,
+          loc: prop.loc,
           message: 'Attribute "{{propName}}" should be on a new line.',
           data: {
             propName: prop.key.name
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index 668ca62ad..07d24197c 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -91,17 +91,33 @@ ruleTester.run('max-attributes-per-line', rule, {
         age="30">
         </component>
       </template>`,
-      errors: ['Attribute "job" should be on a new line.']
+      errors: [{
+        message: 'Attribute "job" should be on a new line.',
+        type: 'VAttribute',
+        line: 1
+      }]
     },
     {
       code: `<template><component name="John Doe" age="30"></component></template>`,
       options: [{ singleline: { max: 1 }}],
-      errors: ['Attribute "age" should be on a new line.']
+      errors: [{
+        message: 'Attribute "age" should be on a new line.',
+        type: 'VAttribute',
+        line: 1
+      }]
     },
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
       options: [{ singleline: 1, multiline: { max: 1, allowFirstLine: false }}],
-      errors: ['Attribute "age" should be on a new line.', 'Attribute "job" should be on a new line.']
+      errors: [{
+        message: 'Attribute "age" should be on a new line.',
+        type: 'VAttribute',
+        line: 1
+      }, {
+        message: 'Attribute "job" should be on a new line.',
+        type: 'VAttribute',
+        line: 1
+      }]
     },
     {
       code: `<template><component name="John Doe"
@@ -109,7 +125,11 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}],
-      errors: ['Attribute "name" should be on a new line.']
+      errors: [{
+        message: 'Attribute "name" should be on a new line.',
+        type: 'VAttribute',
+        line: 1
+      }]
     },
     {
       code: `<template><component
@@ -118,7 +138,11 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}],
-      errors: ['Attribute "age" should be on a new line.']
+      errors: [{
+        message: 'Attribute "age" should be on a new line.',
+        type: 'VAttribute',
+        line: 2
+      }]
     },
     {
       code: `<template><component
@@ -127,7 +151,11 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: 1 }],
-      errors: ['Attribute "age" should be on a new line.']
+      errors: [{
+        message: 'Attribute "age" should be on a new line.',
+        type: 'VAttribute',
+        line: 2
+      }]
     },
     {
       code: `<template><component
@@ -136,7 +164,11 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}],
-      errors: ['Attribute "petname" should be on a new line.']
+      errors: [{
+        message: 'Attribute "petname" should be on a new line.',
+        type: 'VAttribute',
+        line: 3
+      }]
     },
     {
       code: `<template><component
@@ -145,10 +177,15 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}],
-      errors: [
-        'Attribute "petname" should be on a new line.',
-        'Attribute "extra" should be on a new line.'
-      ]
+      errors: [{
+        message: 'Attribute "petname" should be on a new line.',
+        type: 'VAttribute',
+        line: 3
+      }, {
+        message: 'Attribute "extra" should be on a new line.',
+        type: 'VAttribute',
+        line: 3
+      }]
     }
   ]
 })