Add rule max-attributes-per-line (resolves #47)

docs/rules/max-attributes-per-line.md

@@ -0,0 +1,121 @@
+# Define the number of attributes allows per line (max-attributes-per-line)
+
+Limits the maximum number of attributes/properties per line to improve readability.
+
+
+## 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.
+An attribute is considered to be in a new line when there is a line break between two attributes.
+
+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:
+
+```js
+<component lorem="1" ipsum="2" dolor="3" sit="4">
+</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
+  lorem="1"
+  ipsum="2"
+  dolor="3"
+  sit="4"
+>
+</component>
+
+```
+
+### Options
+
+```
+{
+  "vue/max-attributes-per-line": ["error", {
+    "firstline": 1,
+    "singleline": 2,
+    "multiline": 1
+  }]
+}
+```
+
+### `firstline`
+For multi-line declarations, defines how many attributes are acceptable to be put in the first line. (Default 0)
+
+Example of **incorrect** code for this setting:
+```js
+// ["error", { "firstline": 1, "singleline": 2, "multiline": 1}]
+<component
+  foo="John" bar="Smith"
+  foobar={5555555}>
+</component>;
+```
+
+Example of **correct** code for this setting:
+```js
+// ["error", { "firstline": 0, "singleline": 3, "multiline": 1}]
+<component
+  foo="John"
+  bar="Smith"
+  foobar={5555555}
+  >
+</component>;
+```
+
+
+### `singleline`
+Number of maximum attributes per line when the opening tag is in a single line.
+
+Example of **incorrect** code for this setting:
+```js
+// ["error", { "firstline": 1, "singleline": 2, "multiline": 1}]
+<component foo="John" bar="Smith" foobar={5555555}></component>;
+```
+
+Example of **correct** code for this setting:
+```js
+// ["error", { "firstline": 1, "singleline": 3, "multiline": 1}]
+<component foo="John" bar="Smith" foobar={5555555}></component>;
+```
+
+
+### `multiline`
+Number of maximum attributes per line when a tag is in multiple lines.
+
+Example of **incorrect** code for this setting:
+```js
+// ["error", { "firstline": 1, "singleline": 2, "multiline": 1}]
+<component foo="John" bar="Smith"
+  foobar={5555555}>
+</component>;
+```
+
+Example of **correct** code for this setting:
+```js
+// ["error", { "firstline": 0, "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 attributes declared per line you can disable this rule.
+

lib/rules/max-attributes-per-line.js

@@ -0,0 +1,116 @@
+/**
+ * @fileoverview Define the number of attributes allows per line
+ * @author Filipa Lacerda
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Define the number of attributes allows per line',
+      category: 'Stylistic Issues',
+      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'
+            }
+          }
+        }
+      }
+    }]
+  },
+
+  create: function (context) {
+    const configuration = context.options[0] || { singleline: 3, multiline: { max: 1, allowFirstLine: false }}
+    const multilineMaximum = configuration.multiline.max
+    const singlelinemMaximum = configuration.singleline
+    const canHaveFirstLine = configuration.multiline.allowFirstLine
+
+    utils.registerTemplateBodyVisitor(context, {
+      'VStartTag' (node) {
+        const numberOfAttributes = node.attributes.length
+
+        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
+            }
+          })
+        }
+
+        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
+              }
+            })
+          }
+
+          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) {
+              const prop = attributes[multilineMaximum]
+
+              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 {}
+  }
+}

tests/lib/rules/max-attributes-per-line.js

@@ -0,0 +1,116 @@
+/**
+ * @fileoverview Define the number of attributes allows per line
+ * @author Filipa Lacerda
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/max-attributes-per-line')
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: 'vue-eslint-parser',
+  parserOptions: { ecmaVersion: 2015 }
+})
+
+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: { max: 1, allowFirstLine: false }}]
+    },
+    {
+      code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
+      options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}]
+    },
+    {
+      code: `<template><component name="John Doe"
+        age="30">
+        </component>
+      </template>`,
+      options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: true }}]
+    },
+    {
+      code: `<template><component
+        name="John Doe"
+        age="30">
+        </component>
+      </template>`,
+      options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}]
+    },
+    {
+      code: `<template><component
+        name="John Doe" age="30"
+        job="Vet">
+        </component>
+      </template>`,
+      options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}]
+    }
+  ],
+
+  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.']
+    },
+    {
+      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: { max: 1, allowFirstLine: false }}],
+      errors: ['There are 3 in this line, but the maximum is 1.']
+    },
+    {
+      code: `<template><component name="John Doe"
+        age="30">
+        </component>
+      </template>`,
+      options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}],
+      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: { max: 1, allowFirstLine: false }}],
+      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: { max: 2, allowFirstLine: false }}],
+      errors: ['Attribute petname should be on a new line.']
+    }
+  ]
+})