# svelte/require-event-prefix

require component event names to start with “on”

# 📖 Rule Details

Starting with Svelte 5, component events are just component props that are functions and so can be called like any function. Events for HTML elements all have their name begin with “on” (e.g. onclick). This rule enforces that all component events (i.e. function props) also begin with “on”.

Function props that return a value (e.g. getHref: (item: Item) => string) are not events, so this rule ignores them. It only checks return types known to produce no value:

  • void, undefined, or null.
  • A union of these types, optionally including Promises of these types (e.g. void | Promise<void>).
  • A Promise or Promise-like of these types, only when checkAsyncFunctions is enabled.

The rule ignores any, unknown, never, and unresolved generic return types. If any union member or overload returns a value or an uncertain type, the function is ignored. Otherwise, a synchronous overload is checked even if another overload is asynchronous.

In components with <script generics="...">, the parser can erase information about generic return types. To avoid false positives, this rule only checks explicit void, undefined, or null return annotations, unions of them, and Promise / PromiseLike wrappers around them. Aliases, indexed access types, conditional types, and generic constraints are not followed in these components, even when they ultimately return no value. A callback such as select: (item: T) => void is still checked.

<script lang="ts">
  /* eslint svelte/require-event-prefix: "error" */

  /* ✓ GOOD */

  interface Props {
    regularProp: string;
    onclick(): void;
    getHref(item: string): string;
  }

  let { regularProp, onclick, getHref }: Props = $props();
</script>
<script lang="ts">
  /* eslint svelte/require-event-prefix: "error" */

  /* ✗ BAD */

  interface Props {
    click(): void;
  }

  let { click }: Props = $props();
</script>

# 🔧 Options

{
  "svelte/require-event-prefix": [
    "error",
    {
      "checkAsyncFunctions": false
    }
  ]
}
  • checkAsyncFunctions … Whether to also report asynchronous function properties that return a Promise of void, undefined, or null (e.g. Promise<void>). Default false.

# 📚 Further Reading

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v3.6.0

# 🔍 Implementation