Add ignore for data- property

vuejs · Jul 23, 2017 · 6178486 · 6178486
1 parent a4be85d
commit 6178486
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/lib/rules/html-attributes-casing.js b/lib/rules/html-attributes-casing.js
@@ -38,18 +38,24 @@ function create (context) {
     'VStartTag' (obj) {
       if (!utils.isSvgElementName(obj.id.name) && !utils.isMathMLElementName(obj.id.name)) {
         obj.attributes.forEach((node) => {
-          if (node.directive && node.key.name === 'bind') {
-            const text = sourceCode.getText(node.key)
-            const oldValue = node.key.argument
+          if (!node.directive) {
+            const oldValue = node.key.name
+            if (oldValue.indexOf('data-') !== -1) {
+              return
+            }
             const value = casing.getConverter(caseType)(oldValue)
             if (value !== oldValue) {
-              reportIssue(node, text, text.replace(oldValue, value))
+              reportIssue(node, oldValue, value)
             }
-          } else if (!node.directive) {
-            const oldValue = node.key.name
+          } else if (node.key.name === 'bind') {
+            const oldValue = node.key.argument
+            if (oldValue.indexOf('data-') !== -1) {
+              return
+            }
+            const text = sourceCode.getText(node.key)
             const value = casing.getConverter(caseType)(oldValue)
             if (value !== oldValue) {
-              reportIssue(node, oldValue, value)
+              reportIssue(node, text, text.replace(oldValue, value))
             }
           }
         })

diff --git a/tests/lib/rules/html-attributes-casing.js b/tests/lib/rules/html-attributes-casing.js
@@ -62,6 +62,16 @@ ruleTester.run('html-attributes-casing', rule, {
       filename: 'test.vue',
       code: '<template><div><svg foo-bar="prop"></svg></div></template>',
       options: ['PascalCase']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component data-foo-bar="prop"></component></div></template>',
+      options: ['PascalCase']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><component :data-foo-bar="prop"></component></div></template>',
+      options: ['PascalCase']
     }
   ],