Update attribute-hyphenation to allow a custom ignore list

.gitignore

@@ -1,3 +1,4 @@
+.idea
 /.nyc_output
 /coverage
 /tests/integrations/*/node_modules

docs/rules/attribute-hyphenation.md

@@ -1,17 +1,17 @@
-# enforce attribute naming style in template (vue/attribute-hyphenation)
+# enforce attribute naming style on custom components in template (vue/attribute-hyphenation)
 
 - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 - :wrench: The `--fix` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.
 
 ## :wrench: Options
 
-Default casing is set to `always`
+Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to be ignored
 
 ```
-'vue/attribute-hyphenation': [2, 'always'|'never']
+'vue/attribute-hyphenation': [2, 'always'|'never', { 'ignore': ['data-', 'aria-', 'slot-scope'] }]
 ```
 
-### `"always"` - Use hyphenated name. (It errors on upper case letters.)
+### `[2, "always"]` - Use hyphenated name. (It errors on upper case letters.)
 
 :+1: Examples of **correct** code`:
 
@@ -25,7 +25,7 @@ Default casing is set to `always`
 <MyComponent myProp="prop"/>
 ```
 
-### `"never"` - Don't use hyphenated name. (It errors on hyphens except `data-` and `aria-`.)
+### `[2, "never"]` - Don't use hyphenated name. (It errors on hyphens except `data-`, `aria-` and `slot-scope-`.)
 
 :+1: Examples of **correct** code`:
 
@@ -38,3 +38,17 @@ Default casing is set to `always`
 ```html
 <MyComponent my-prop="prop"/>
 ```
+
+### `[2, "never", { 'ignore': ['data-', 'aria-', 'slot-scope', 'custom-prop'] }]` - Don't use hyphenated name but allow custom attributes
+
+:+1: Examples of **correct** code`:
+
+```html
+<MyComponent myProp="prop" custom-prop="foo"/>
+```
+
+:-1: Examples of **incorrect** code`:
+
+```html
+<MyComponent my-prop="prop" custom-prop="foo"/>
+```

lib/rules/attribute-hyphenation.js

@@ -22,14 +22,40 @@ module.exports = {
     schema: [
       {
         enum: ['always', 'never']
+      },
+      {
+        type: 'object',
+        properties: {
+          'ignore': {
+            type: 'array',
+            items: {
+              allOf: [
+                { type: 'string' },
+                { not: { type: 'string', pattern: ':exit$' }},
+                { not: { type: 'string', pattern: '^\\s*$' }}
+              ]
+            },
+            uniqueItems: true,
+            additionalItems: false
+          }
+        },
+        additionalProperties: false
       }
     ]
   },
 
   create (context) {
     const sourceCode = context.getSourceCode()
-    const options = context.options[0]
-    const useHyphenated = options !== 'never'
+    const option = context.options[0]
+    const optionsPayload = context.options[1]
+    const useHyphenated = option !== 'never'
+    let ignoredAttributes = []
+
+    if (optionsPayload && optionsPayload.ignore) {
+      ignoredAttributes = optionsPayload.ignore
+    } else {
+      ignoredAttributes = ['data-', 'aria-', 'slot-scope']
+    }
 
     const caseConverter = casing.getConverter(useHyphenated ? 'kebab-case' : 'camelCase')
 
@@ -48,9 +74,14 @@ module.exports = {
     }
 
     function isIgnoredAttribute (value) {
-      if (value.indexOf('data-') !== -1 || value.indexOf('aria-') !== -1) {
+      const isIgnored = !ignoredAttributes.every(function (attr) {
+        return value.indexOf(attr) === -1
+      })
+
+      if (isIgnored) {
         return true
       }
+
       return useHyphenated ? value.toLowerCase() === value : !/-/.test(value)
     }
 

tests/lib/rules/attribute-hyphenation.js

@@ -30,18 +30,23 @@ ruleTester.run('attribute-hyphenation', rule, {
     },
     {
       filename: 'test.vue',
-      code: '<template><div><custom data-id="foo" aria-test="bar" my-prop="prop"></custom></div></template>',
+      code: '<template><div><custom data-id="foo" aria-test="bar" slot-scope="{ data }" 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>',
+      code: '<template><div><custom data-id="foo" aria-test="bar" slot-scope="{ data }" 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>',
+      code: '<template><div data-id="foo" aria-test="bar" slot-scope="{ data }"><a onClick="" my-prop="prop"></a></div></template>',
       options: ['never']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div data-id="foo" aria-test="bar" slot-scope="{ data }" custom-hypen="foo"><a onClick="" my-prop="prop"></a></div></template>',
+      options: ['never', { 'ignore': ['data-', 'aria-', 'slot-scope', 'custom-hypen'] }]
     }
   ],