fix(require-explicit-emits): detect template emits (#2350)

Co-authored-by: Flo Edelmann <[email protected]>

Author: waynzh

lib/rules/require-explicit-emits.js

@@ -71,6 +71,22 @@ function getNameParamNode(node) {
   return null
 }
 
+/**
+ * Check if the given name matches defineEmitsNode variable name
+ * @param {string} name
+ * @param {CallExpression | undefined} defineEmitsNode
+ * @returns {boolean}
+ */
+function isEmitVariableName(name, defineEmitsNode) {
+  const node = defineEmitsNode?.parent
+
+  if (node?.type === 'VariableDeclarator' && node.id.type === 'Identifier') {
+    return name === node.id.name
+  }
+
+  return false
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -251,7 +267,16 @@ module.exports = {
           if (!vueTemplateDefineData) {
             return
           }
-          if (callee.type === 'Identifier' && callee.name === '$emit') {
+
+          // e.g. $emit() / emit() in template
+          if (
+            callee.type === 'Identifier' &&
+            (callee.name === '$emit' ||
+              isEmitVariableName(
+                callee.name,
+                vueTemplateDefineData.defineEmits
+              ))
+          ) {
             verifyEmit(
               vueTemplateDefineData.emits,
               vueTemplateDefineData.props,

tests/lib/rules/require-explicit-emits.js

@@ -461,6 +461,19 @@ tester.run('require-explicit-emits', rule, {
       `,
       parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div @click="emit('foo')"/>
+        <div @click="emit('bar')"/>
+      </template>
+      <script setup lang="ts">
+      const emit = defineEmits<(e: 'foo' | 'bar') => void>()
+      </script>
+      `,
+      parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+    },
 
     // unknown emits definition
     {
@@ -1983,6 +1996,25 @@ emits: {'foo': null}
         }
       ],
       ...getTypeScriptFixtureTestOptions()
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div @click="emit('bar')"/>
+      </template>
+      <script setup lang="ts">
+      const emit = defineEmits<(e: 'foo') => void>()
+      </script>
+      `,
+      parserOptions: { parser: require.resolve('@typescript-eslint/parser') },
+      errors: [
+        {
+          message:
+            'The "bar" event has been triggered but not declared on `defineEmits`.',
+          line: 3
+        }
+      ]
     }
   ]
 })