Update: options for no-duplicate-attributes (fixes #112)(#113)

Author: armano2

docs/rules/no-duplicate-attributes.md

@@ -27,9 +27,20 @@ This rule reports duplicate attributes.
 
 ## :wrench: Options
 
-Nothing.
+`allowCoexistClass` - Enables [`v-bind:class`] directive can coexist with the plain `class` attribute.
+`allowCoexistStyle` - Enables [`v-bind:style`] directive can coexist with the plain `style` attribute.
+
+```
+'vue/name-property-casing': [2, {
+  allowCoexistClass: Boolean // default: true
+  allowCoexistStyle: Boolean, // default: true
+}]
+```
 
 ## TODO: `<div foo foo></div>`
 
 `parse5` remove duplicate attributes on the tokenization phase.
 Needs investigation to check.
+
+[`v-bind:class`]: https://vuejs.org/v2/guide/class-and-style.html
+[`v-bind:style`]: https://vuejs.org/v2/guide/class-and-style.html

lib/rules/no-duplicate-attributes.js

@@ -37,27 +37,45 @@ function getName (attribute) {
  * @returns {Object} AST event handlers.
  */
 function create (context) {
-  const names = new Set()
+  const options = context.options[0] || {}
+  const allowCoexistStyle = options.allowCoexistStyle !== false
+  const allowCoexistClass = options.allowCoexistClass !== false
+
+  const directiveNames = new Set()
+  const attributeNames = new Set()
+
+  function isDuplicate (name, isDirective) {
+    if ((allowCoexistStyle && name === 'style') || (allowCoexistClass && name === 'class')) {
+      return isDirective ? directiveNames.has(name) : attributeNames.has(name)
+    }
+    return directiveNames.has(name) || attributeNames.has(name)
+  }
 
   utils.registerTemplateBodyVisitor(context, {
     'VStartTag' () {
-      names.clear()
+      directiveNames.clear()
+      attributeNames.clear()
     },
     'VAttribute' (node) {
       const name = getName(node)
       if (name == null) {
         return
       }
 
-      if (names.has(name)) {
+      if (isDuplicate(name, node.directive)) {
         context.report({
           node,
           loc: node.loc,
           message: "Duplicate attribute '{{name}}'.",
           data: { name }
         })
       }
-      names.add(name)
+
+      if (node.directive) {
+        directiveNames.add(name)
+      } else {
+        attributeNames.add(name)
+      }
     }
   })
 
@@ -77,6 +95,19 @@ module.exports = {
       recommended: false
     },
     fixable: false,
-    schema: []
+
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allowCoexistClass: {
+            type: 'boolean'
+          },
+          allowCoexistStyle: {
+            type: 'boolean'
+          }
+        }
+      }
+    ]
   }
 }

tests/lib/rules/no-duplicate-attributes.js

@@ -34,14 +34,32 @@ tester.run('no-duplicate-attributes', rule, {
     {
       filename: 'test.vue',
       code: '<template><div><div @click="foo" @click="bar"></div></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><div style :style></div></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><div class :class></div></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><div :class="a" class="b"></div></div></template>',
+      options: [{ allowCoexistStyle: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><div :style="a" style="b"></div></div></template>',
+      options: [{ allowCoexistStyle: true }]
     }
   ],
   invalid: [
-        // {
-        //     filename: "test.vue",
-        //     code: "<template><div><div foo foo></div></div></template>",
-        //     errors: ["Duplicate attribute 'foo'."],
-        // },
+    // {
+    //   filename: 'test.vue',
+    //   code: '<template><div><div foo foo></div></div></template>',
+    //   errors: ["Duplicate attribute 'foo'."]
+    // },
     {
       filename: 'test.vue',
       code: '<template><div><div foo v-bind:foo></div></div></template>',
@@ -51,6 +69,30 @@ tester.run('no-duplicate-attributes', rule, {
       filename: 'test.vue',
       code: '<template><div><div foo :foo></div></div></template>',
       errors: ["Duplicate attribute 'foo'."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><div style :style></div></div></template>',
+      errors: ["Duplicate attribute 'style'."],
+      options: [{ allowCoexistStyle: false }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><div class :class></div></div></template>',
+      errors: ["Duplicate attribute 'class'."],
+      options: [{ allowCoexistClass: false }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><div :style style></div></div></template>',
+      errors: ["Duplicate attribute 'style'."],
+      options: [{ allowCoexistStyle: false }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><div :class class></div></div></template>',
+      errors: ["Duplicate attribute 'class'."],
+      options: [{ allowCoexistClass: false }]
     }
   ]
 })