valid-each-key.md

pageClass	sidebarDepth	title	description	since
rule-details	0	svelte/valid-each-key	enforce keys to use variables defined in the `{#each}` block	v2.28.0

svelte/valid-each-key

enforce keys to use variables defined in the {#each} block

📖 Rule Details

This rule reports that {#each} block keys does not use the variables which are defined by the {#each} block.

<script>
  /* eslint svelte/valid-each-key: "error" */

  let things = [
    { id: 1, name: "apple" },
    { id: 2, name: "banana" },
    { id: 3, name: "carrot" },
    { id: 4, name: "doughnut" },
    { id: 5, name: "egg" },
  ]
  let foo = 42
</script>

<!-- ✓ GOOD -->
{#each things as thing (thing.id)}
  <Thing name={thing.name} />
{/each}

<!-- ✗ BAD -->
{#each things as thing (foo)}
  <Thing name={thing.name} />
{/each}

🔧 Options

Nothing.

👫 Related Rules

• svelte/require-each-key

📚 Further Reading

• Svelte - Tutorial > 4. Logic / Keyed each blocks

🚀 Version

This rule was introduced in eslint-plugin-svelte v2.28.0

🔍 Implementation

• Rule source
• Test source