Add rule html-attributes-casing.

fixes #92

docs/rules/attribute-hyphenation.md

@@ -0,0 +1,53 @@
+# Define if attributes on cusom components can be hyphened. (attribute-hyphenation)
+
+## :wrench: Options
+
+Default casing is set to `always`
+
+```
+'vue/attribute-hyphenation': [2, 'always'|'never']
+```
+
+### `"always"` - Use hyphenated name. (It errors on upper case letters.)
+
+:+1: Examples of **correct** code`:
+
+```html
+<template>
+  <foo my-prop="prop">
+    <a onClick="return false"></a>
+  </foo>
+</template>
+```
+
+:-1: Examples of **incorrect** code`:
+
+```html
+<template>
+  <foo myProp="prop">
+    <a onClick="return false"></a>
+  </foo>
+</template>
+```
+
+### `"never"` - Don't use hyphenated name. (It errors on hyphens except `data-` and `aria-`.)
+
+:+1: Examples of **correct** code`:
+
+```html
+<template>
+  <foo myProp="prop">
+    <a onClick="return false"></a>
+  </foo>
+</template>
+```
+
+:-1: Examples of **incorrect** code`:
+
+```html
+<template>
+  <foo my-prop="prop">
+    <a onClick="return false"></a>
+  </foo>
+</template>
+```

lib/rules/attribute-hyphenation.js

@@ -0,0 +1,76 @@
+/**
+ * @fileoverview Define a style for the props casing in templates.
+ * @author Armano
+ */
+'use strict'
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+function create (context) {
+  const sourceCode = context.getSourceCode()
+  const options = context.options[0]
+  const useHyphenated = options !== 'never'
+
+  const caseConverter = casing.getConverter(useHyphenated ? 'kebab-case' : 'camelCase')
+
+  function reportIssue (node, name) {
+    const text = sourceCode.getText(node.key)
+
+    context.report({
+      node: node.key,
+      loc: node.loc,
+      message: useHyphenated ? "Attribute '{{text}}' must be hyphenated." : "Attribute '{{text}}' cann't be hyphenated.",
+      data: {
+        text
+      },
+      fix: fixer => fixer.replaceText(node.key, text.replace(name, caseConverter(name)))
+    })
+  }
+
+  function isIgnoredAttribute (value) {
+    if (value.indexOf('data-') !== -1 || value.indexOf('aria-') !== -1) {
+      return true
+    }
+    return useHyphenated ? value.toLowerCase() === value : !/-/.test(value)
+  }
+
+  // ----------------------------------------------------------------------
+  // Public
+  // ----------------------------------------------------------------------
+
+  utils.registerTemplateBodyVisitor(context, {
+    VAttribute (node) {
+      if (!utils.isCustomComponent(node.parent.parent)) return
+
+      const name = !node.directive ? node.key.rawName : node.key.name === 'bind' ? node.key.raw.argument : false
+      if (!name || isIgnoredAttribute(name)) return
+
+      reportIssue(node, name)
+    }
+  })
+
+  return {}
+}
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Define a style for the props casing in templates.',
+      category: 'Stylistic Issues',
+      recommended: false
+    },
+    fixable: 'code',
+    schema: [
+      {
+        enum: ['always', 'never']
+      }
+    ]
+  },
+
+  create
+}

tests/lib/rules/attribute-hyphenation.js

@@ -0,0 +1,116 @@
+/**
+ * @fileoverview Define a style for the props casing in templates.
+ * @author Armano
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/attribute-hyphenation')
+
+const RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: 'vue-eslint-parser',
+  parserOptions: { ecmaVersion: 2015 }
+})
+
+ruleTester.run('attribute-hyphenation', rule, {
+
+  valid: [
+    {
+      filename: 'test.vue',
+      code: ''
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom data-id="foo" aria-test="bar" my-prop="prop"></custom></div></template>',
+      options: ['always']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom data-id="foo" aria-test="bar" myProp="prop"></custom></div></template>',
+      options: ['never']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div data-id="foo" aria-test="bar"><a onClick="" my-prop="prop"></a></div></template>',
+      options: ['never']
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom my-prop="foo"></custom></div></template>',
+      output: '<template><div><custom myProp="foo"></custom></div></template>',
+      options: ['never'],
+      errors: [{
+        message: "Attribute 'my-prop' cann't be hyphenated.",
+        type: 'VIdentifier',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom MyProp="Bar"></custom></div></template>',
+      output: '<template><div><custom my-prop="Bar"></custom></div></template>',
+      options: ['always'],
+      errors: [{
+        message: "Attribute 'MyProp' must be hyphenated.",
+        type: 'VIdentifier',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :my-prop="prop"></custom></div></template>',
+      output: '<template><div><custom :myProp="prop"></custom></div></template>',
+      options: ['never'],
+      errors: [{
+        message: "Attribute ':my-prop' cann't be hyphenated.",
+        type: 'VDirectiveKey',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :MyProp="prop"></custom></div></template>',
+      output: '<template><div><custom :my-prop="prop"></custom></div></template>',
+      options: ['always'],
+      errors: [{
+        message: "Attribute ':MyProp' must be hyphenated.",
+        type: 'VDirectiveKey',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom v-bind:my-prop="prop"></custom></div></template>',
+      output: '<template><div><custom v-bind:myProp="prop"></custom></div></template>',
+      options: ['never'],
+      errors: [{
+        message: "Attribute 'v-bind:my-prop' cann't be hyphenated.",
+        type: 'VDirectiveKey',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom v-bind:MyProp="prop"></custom></div></template>',
+      output: '<template><div><custom v-bind:my-prop="prop"></custom></div></template>',
+      options: ['always'],
+      errors: [{
+        message: "Attribute 'v-bind:MyProp' must be hyphenated.",
+        type: 'VDirectiveKey',
+        line: 1
+      }]
+    }
+  ]
+})