Skip to content

Commit db728cc

Browse files
committed
docs(require-event-prefix): added rule docs
1 parent 6619ac1 commit db728cc

File tree

1 file changed

+71
-0
lines changed

1 file changed

+71
-0
lines changed

docs/rules/require-event-prefix.md

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
pageClass: 'rule-details'
3+
sidebarDepth: 0
4+
title: 'svelte/require-event-prefix'
5+
description: 'require component event names to start with "on"'
6+
---
7+
8+
# svelte/require-event-prefix
9+
10+
> require component event names to start with "on"
11+
12+
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
13+
14+
## :book: Rule Details
15+
16+
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".
17+
18+
<!--eslint-skip-->
19+
20+
```svelte
21+
<script lang="ts">
22+
/* eslint svelte/require-event-prefix: "error" */
23+
24+
/* ✓ GOOD */
25+
26+
interface Props {
27+
regularProp: string;
28+
onclick(): void;
29+
}
30+
31+
let { regularProp, onclick }: Props = $props();
32+
</script>
33+
```
34+
35+
```svelte
36+
<script lang="ts">
37+
/* eslint svelte/require-event-prefix: "error" */
38+
39+
/* ✗ BAD */
40+
41+
interface Props {
42+
click(): void;
43+
}
44+
45+
let { click }: Props = $props();
46+
</script>
47+
```
48+
49+
## :wrench: Options
50+
51+
```json
52+
{
53+
"svelte/require-event-prefix": [
54+
"error",
55+
{
56+
"checkAsyncFunctions": false
57+
}
58+
]
59+
}
60+
```
61+
62+
- `checkAsyncFunctions` ... Whether to also report asychronous function properties. Default `false`.
63+
64+
## :books: Further Reading
65+
66+
- [Svelte docs on events in version 5](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes)
67+
68+
## :mag: Implementation
69+
70+
- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/require-event-prefix.ts)
71+
- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/require-event-prefix.ts)

0 commit comments

Comments
 (0)