script/prefer-define-emits-binding

Prefer the captured defineEmits function over template $emit.

Applies to: JS/TS scripts in Vue SFCs; examples show the relevant Options API or script setup form.

Bad

The template calls the component-only $emit helper even though <script setup> already captures the typed function returned by defineEmits.

<script setup lang="ts">
const emit = defineEmits<{ save: [id: number] }>();
</script>
<template><button @click="$emit('save', 1)">Save</button></template>

Good

The template calls the captured emit binding, so event names and payloads go through the component's defineEmits contract.

<script setup lang="ts">
const emit = defineEmits<{ save: [id: number] }>();
</script>
<template><button @click="emit('save', 1)">Save</button></template>

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  linter: {
    "preset": "incremental",
    "rules": {
      "script/prefer-define-emits-binding": "warn"
    }
  },
});

Then run vp run lint.

Related

• Type and script rules
• All rules
• Source code