require-event-prefix.md

pageClass	sidebarDepth	title	description
rule-details	0	svelte/require-event-prefix	require component event names to start with "on"

svelte/require-event-prefix

require component event names to start with "on"

• ❗ This rule has not been released yet.

📖 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".

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

  /* ✓ GOOD */

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

  let { regularProp, onclick }: 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 asychronous function properties. Default false.

📚 Further Reading

• Svelte docs on events in version 5

🔍 Implementation

• Rule source
• Test source