noSvelteLegacyConst (HTML)
Language HTML
Summary
Section titled “Summary”- Rule available since:
v2.5.8 - Diagnostic Category:
lint/nursery/noSvelteLegacyConst - This rule doesn’t have a fix.
- The default severity of this rule is information.
- This rule belongs to the following domains:
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "noSvelteLegacyConst": "error" } } }}Description
Section titled “Description”Disallow legacy Svelte {@const} tags.
Declaration tags provide the current syntax for deriving values in Svelte markup (available since Svelte 5.56).
Examples
Section titled “Examples”Invalid
Section titled “Invalid”{#each boxes as box} {@const area = box.width * box.height} <p>{area}</p>{/each}code-block.svelte:2:5 lint/nursery/noSvelteLegacyConst ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ Avoid legacy Svelte {@const} tags.
1 │ {#each boxes as box}
> 2 │ {@const area = box.width * box.height}
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 │ <p>{area}</p>
4 │ {/each}
ℹ {@const} legacy syntax is less versatile. Declaration tags are the preferred syntax for deriving values in Svelte markup.
ℹ Remove the @ and add $state() or $derived() runes if the value should be reactive, for example: {const area = $derived(box.width * box.height)}.
ℹ 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.
{#each boxes as box} {const area = $derived(box.width * box.height)} <p>{area}</p>{/each}References
Section titled “References”Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.