useSvelteRequireEachKey (HTML)

Language HTML

Summary

Rule available since: v2.5.0
Diagnostic Category: lint/nursery/useSvelteRequireEachKey
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- svelte
Sources:
- Same as svelte/require-each-key

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useSvelteRequireEachKey": "error"
6
      }
7
    }
8
  }
9
}

Description

Require keyed {#each} blocks in Svelte templates.

Svelte uses keyed each blocks to track list items across updates. Without a key, Svelte updates items by position, which can cause state to move between items when the list changes.

For more information, see the Svelte documentation on keyed each blocks.

Examples

Invalid

1
{#each items as item}
2
  <div>{item}</div>
3
{/each}

code-block.svelte:1:1 lint/nursery/useSvelteRequireEachKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This {#each} block is missing a key.
  
  > 1 │ {#each items as item}
      │ ^^^^^^^^^^^^^^^^^^^^^
    2 │   <div>{item}</div>
    3 │ {/each}
  
  ℹ Providing a key helps Svelte track each item when the list changes.
  
  ℹ Add a unique key using the (key) syntax, for example: {#each items as item (item.id)}.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
{#each items as item (item.id)}
2
  <div>{item}</div>
3
{/each}