Add rule html-attributes-casing.

Author: armano2

docs/rules/html-attributes-casing.md

@@ -0,0 +1,35 @@
+# Define a style for the attributes casing in templates. (html-attributes-casing)
+
+Define a style for the attributes casing in templates.
+
+:+1: Examples of **correct** code for `PascalCase`:
+
+```html
+<template>
+  <component MyProp="prop"></component>
+</template>
+```
+
+:+1: Examples of **correct** code for `kebab-case`:
+
+```html
+<template>
+  <component my-prop="prop"></component>
+</template>
+```
+
+:+1: Examples of **correct** code for `camelCase`:
+
+```html
+<template>
+  <component myProp="prop"></component>
+</template>
+```
+
+## :wrench: Options
+
+Default casing is set to `kebab-case`
+
+```
+'vue/html-attributes-casing': [2, 'camelCase'|'kebab-case'|'PascalCase']
+```

lib/rules/html-attributes-casing.js

@@ -0,0 +1,96 @@
+/**
+ * @fileoverview Define a style for the props casing in templates.
+ * @author Armano
+ */
+'use strict'
+
+const utils = require('../utils')
+
+function kebabCase (str) {
+  return str.replace(/([a-z])([A-Z])/g, match => match[0] + '-' + match[1]).replace(/\s+/g, '-').toLowerCase()
+}
+
+function camelCase (str) {
+  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => index === 0 ? letter.toLowerCase() : letter.toUpperCase()).replace(/[\s-]+/g, '')
+}
+
+function pascalCase (str) {
+  str = camelCase(str)
+  return str.length > 0 ? str.charAt(0).toUpperCase() + str.slice(1) : ''
+}
+
+function convertCase (str, caseType) {
+  if (caseType === 'kebab-case') {
+    return kebabCase(str)
+  } else if (caseType === 'PascalCase') {
+    return pascalCase(str)
+  }
+  return camelCase(str)
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+function create (context) {
+  const options = context.options[0]
+  const caseType = ['camelCase', 'kebab-case', 'PascalCase'].indexOf(options) !== -1 ? options : 'kebab-case'
+
+  // ----------------------------------------------------------------------
+  // Public
+  // ----------------------------------------------------------------------
+
+  utils.registerTemplateBodyVisitor(context, {
+    "VAttribute[directive=true][key.name='bind']" (node) {
+      const value = convertCase(node.key.argument, caseType)
+      if (value !== node.key.argument) {
+        context.report({
+          node: node.key,
+          loc: node.loc,
+          message: 'Attribute {{bind}}:{{name}} is not {{caseType}}.',
+          data: {
+            name: node.key.argument,
+            caseType: caseType,
+            bind: node.key.shorthand ? '' : 'v-bind'
+          }
+        })
+      }
+    },
+    'VAttribute[directive=false]' (node) {
+      if (node.key.type === 'VIdentifier') {
+        const value = convertCase(node.key.name, caseType)
+        if (value !== node.key.name) {
+          context.report({
+            node: node.key,
+            loc: node.loc,
+            message: 'Attribute {{name}} is not {{caseType}}.',
+            data: {
+              name: node.key.name,
+              caseType: caseType
+            }
+          })
+        }
+      }
+    }
+  })
+
+  return {}
+}
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Define a style for the props casing in templates.',
+      category: 'Stylistic Issues',
+      recommended: false
+    },
+    fixable: null,  // or "code" or "whitespace"
+    schema: [
+      {
+        enum: ['camelCase', 'kebab-case', 'PascalCase']
+      }
+    ]
+  },
+
+  create
+}

tests/lib/rules/html-attributes-casing.js

@@ -0,0 +1,125 @@
+/**
+ * @fileoverview Define a style for the props casing in templates.
+ * @author Armano
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/html-attributes-casing')
+
+const RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: 'vue-eslint-parser',
+  parserOptions: { ecmaVersion: 2015 }
+})
+
+ruleTester.run('html-attributes-casing', rule, {
+
+  valid: [
+    {
+      filename: 'test.vue',
+      code: ''
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component my-prop="prop"></component></div></template>',
+      options: ['kebab-case']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component myProp="prop"></component></div></template>',
+      options: ['camelCase']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component MyProp="prop"></component></div></template>',
+      options: ['PascalCase']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component :my-prop="prop"></component></div></template>',
+      options: ['kebab-case']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component :myProp="prop"></component></div></template>',
+      options: ['camelCase']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component :MyProp="prop"></component></div></template>',
+      options: ['PascalCase']
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div><component my-prop="prop"></component></div></template>',
+      options: ['camelCase'],
+      errors: [{
+        message: 'Attribute my-prop is not camelCase.',
+        type: 'VIdentifier',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component my-prop="prop"></component></div></template>',
+      options: ['PascalCase'],
+      errors: [{
+        message: 'Attribute my-prop is not PascalCase.',
+        type: 'VIdentifier',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component MyProp="prop"></component></div></template>',
+      options: ['kebab-case'],
+      errors: [{
+        message: 'Attribute MyProp is not kebab-case.',
+        type: 'VIdentifier',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component :my-prop="prop"></component></div></template>',
+      options: ['camelCase'],
+      errors: [{
+        message: 'Attribute :my-prop is not camelCase.',
+        type: 'VDirectiveKey',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component :my-prop="prop"></component></div></template>',
+      options: ['PascalCase'],
+      errors: [{
+        message: 'Attribute :my-prop is not PascalCase.',
+        type: 'VDirectiveKey',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component :MyProp="prop"></component></div></template>',
+      options: ['kebab-case'],
+      errors: [{
+        message: 'Attribute :MyProp is not kebab-case.',
+        type: 'VDirectiveKey',
+        line: 1
+      }]
+    }
+  ]
+})