# svelte/no-at-const-tags

disallow the use of {@const} in favor of {const ...} declaration tags

  • ❗ This rule has not been released yet.
  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

# 📖 Rule Details

This rule reports uses of {@const ...} in runes mode.

{let/const ...} declaration tags were introduced in Svelte 5.56.0. This rule only reports and fixes when running on Svelte >=5.56.0.

In Svelte 5, the {@const ...} tag is considered legacy. Use the {const ...} declaration tag instead, which can be placed anywhere inside the component.

{@const ...} is reactive — its value is re-evaluated when its dependencies change. To preserve that behavior, the initializer must be wrapped in $derived(...), and the auto-fix does this automatically.

This rule does nothing in non-runes mode: it neither reports nor fixes there. $derived(...) is unavailable outside runes mode, so the reactive behavior of {@const ...} cannot be preserved when converting to a {const ...} declaration tag.

<script>
  /* eslint svelte/no-at-const-tags: "error" */
  let boxes = $state([
    { width: 10, height: 10 },
    { width: 15, height: 15 }
  ]);
</script>

{#each boxes as box}
  <!-- ✓ GOOD -->
  {const area = $derived(box.width * box.height)}

  <!-- ✗ BAD -->
  {@const label = `${box.width} ⨉ ${box.height}`}

  {label}: {area}
{/each}

# 🔧 Options

Nothing.

# 📚 Further Reading

# 🔍 Implementation