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

Author: waynzh

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),

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
+ }
+ ]
  }
  ]
 })