fix(custom-event-name-casing): check defineEmits variable name in template (#2585)

waynzh · web-flow · commit 86300c489f5f · 2024-10-28T19:01:11.000+09:00
diff --git a/lib/rules/custom-event-name-casing.js b/lib/rules/custom-event-name-casing.js
@@ -101,6 +101,7 @@ module.exports = {
   create(context) {
     /** @type {Map<ObjectExpression|Program, {contextReferenceIds:Set<Identifier>,emitReferenceIds:Set<Identifier>}>} */
     const setupContexts = new Map()
+    let emitParamName = ''
     const options =
       context.options.length === 1 && typeof context.options[0] !== 'string'
         ? // For backward compatibility
@@ -189,7 +190,11 @@ module.exports = {
             // cannot check
             return
           }
-          if (callee.type === 'Identifier' && callee.name === '$emit') {
+
+          if (
+            callee.type === 'Identifier' &&
+            (callee.name === '$emit' || callee.name === emitParamName)
+          ) {
             verify(nameWithLoc)
           }
         }
@@ -209,6 +214,8 @@ module.exports = {
             if (emitParam.type !== 'Identifier') {
               return
             }
+            emitParamName = emitParam.name
+
             // const emit = defineEmits()
             const variable = findVariable(
               utils.getScope(context, emitParam),
diff --git a/tests/lib/rules/custom-event-name-casing.js b/tests/lib/rules/custom-event-name-casing.js
@@ -329,6 +329,22 @@ tester.run('custom-event-name-casing', rule, {
       </script>
       `,
       options: ['kebab-case']
+    },
+    // setup defineEmits
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const emit = defineEmits({})
+      emit('foo-bar')
+      </script>
+
+      <template>
+      <button @click="emit('foo-bar')">Foo</button>
+      <button @click="$emit('foo-bar')">Foo</button>
+      </template>
+      `,
+      options: ['kebab-case']
     }
   ],
   invalid: [
@@ -605,6 +621,35 @@ tester.run('custom-event-name-casing', rule, {
           line: 4
         }
       ]
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2577
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const emit = defineEmits({})
+      emit('foo-bar')
+      </script>
+
+      <template>
+      <button @click="emit('foo-bar')">Foo</button>
+      <button @click="$emit('foo-bar')">Foo</button>
+      </template>
+      `,
+      errors: [
+        {
+          message: "Custom event name 'foo-bar' must be camelCase.",
+          line: 4
+        },
+        {
+          message: "Custom event name 'foo-bar' must be camelCase.",
+          line: 8
+        },
+        {
+          message: "Custom event name 'foo-bar' must be camelCase.",
+          line: 9
+        }
+      ]
     }
   ]
 })
