Fix vuejs#1808: Lint slots in attribute-hyphenation

Author: doug-wade

docs/rules/attribute-hyphenation.md

@@ -35,7 +35,8 @@ This rule enforces using hyphenated attribute names on custom components in Vue
 ```json
 {
   "vue/attribute-hyphenation": ["error", "always" | "never", {
-    "ignore": []
+    "ignore": [],
+    "includeSlots": false,
   }]
 }
 ```
@@ -46,6 +47,7 @@ and all the [SVG attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/At
 - `"always"` (default) ... Use hyphenated name.
 - `"never"` ... Don't use hyphenated name except the ones that are ignored.
 - `"ignore"` ... Array of ignored names
+- `"includeSlots"` ... Will lint attributes on slot elements when set to true
 
 ### `"always"`
 
@@ -108,6 +110,24 @@ Don't use hyphenated name but allow custom attributes
 
 </eslint-code-block>
 
+### `"always", { "includeSlots": true }`
+
+Use hyphenated names on slot elements
+
+<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always', { includeSlots: true }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <MyComponent><slot my-prop="prop"></slot></MyComponent>
+
+  <!-- ✗ BAD -->
+  <MyComponent><slot myProp="prop"></slot></MyComponent>
+</template>
+```
+
+</eslint-code-block>
+
 ## :couple: Related Rules
 
 - [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md)

lib/rules/attribute-hyphenation.js

@@ -40,6 +40,9 @@ module.exports = {
             },
             uniqueItems: true,
             additionalItems: false
+          },
+          includeSlots: {
+            type: 'boolean'
           }
         },
         additionalProperties: false
@@ -100,13 +103,28 @@ module.exports = {
       return useHyphenated ? value.toLowerCase() === value : !/-/.test(value)
     }
 
+    /**
+     * @param {VDirective | VAttribute} node
+     */
+    function isConfiguredSlot(node) {
+      return (
+        optionsPayload &&
+        optionsPayload.includeSlots &&
+        node.parent.parent.name === 'slot'
+      )
+    }
+
     // ----------------------------------------------------------------------
     // Public
     // ----------------------------------------------------------------------
 
     return utils.defineTemplateBodyVisitor(context, {
       VAttribute(node) {
-        if (!utils.isCustomComponent(node.parent.parent)) return
+        if (
+          !utils.isCustomComponent(node.parent.parent) &&
+          !isConfiguredSlot(node)
+        )
+          return
 
         const name = !node.directive
           ? node.key.rawName

tests/lib/rules/attribute-hyphenation.js

@@ -56,6 +56,16 @@ ruleTester.run('attribute-hyphenation', rule, {
       filename: 'test.vue',
       code: '<template><my-component :[foo-bar]></my-component></template>',
       options: ['never']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><slot my-prop></slot></div></template>',
+      options: ['always', { includeSlots: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><slot myProp></slot></div></template>',
+      options: ['never', { includeSlots: true }]
     }
   ],
 
@@ -252,6 +262,32 @@ ruleTester.run('attribute-hyphenation', rule, {
           line: 3
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><slot my-prop="foo"></slot></div></template>',
+      output: '<template><div><slot myProp="foo"></slot></div></template>',
+      options: ['never', { includeSlots: true }],
+      errors: [
+        {
+          message: "Attribute 'my-prop' can't be hyphenated.",
+          type: 'VIdentifier',
+          line: 1
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><slot MyProp="Bar"></slot></div></template>',
+      output: '<template><div><slot my-prop="Bar"></slot></div></template>',
+      options: ['always', { includeSlots: true }],
+      errors: [
+        {
+          message: "Attribute 'MyProp' must be hyphenated.",
+          type: 'VIdentifier',
+          line: 1
+        }
+      ]
     }
   ]
 })