Skip to content

Svelte

Files ending in .svelte are formatted by the Svelte pack (rainbow_fmt.languages.svelte, grammar tree-sitter-svelte).

<script>
let {items=[]} = $props()
</script>
<ul>{#each items as item}<li class:done={item.done}>{ item.name }</li>{/each}</ul>

becomes

<script>
    let { items = [] } = $props()
</script>
<ul>
    {#each items as item}
        <li class:done={item.done}>{item.name}</li>
    {/each}
</ul>

What changes and what does not

  • Markup follows the HTML pack: block elements one per line, inline elements and text filled to the width, whitespace kept where it matters, attributes one per line when a tag is too long. Components (<Button>) and other unknown tags are inline; <svelte:head>, <svelte:window> and the other svelte: elements are block-level.
  • <script> is formatted by the JavaScript pack, or by the TypeScript pack with lang="ts"; <style> by the CSS pack. Each follows its own [language.X] options. A style in another language (lang="scss") is kept as written, and so is any region that does not parse.
  • Expressions {…} in content and attribute values (class:active={a && b}, onclick={() => count++}) are formatted as JavaScript (or TypeScript) expressions: { { a } } stays an object. One that does not parse is kept as written. Shorthand ({href}), spread ({...rest}) and quoted values with expressions inside ("a {b}") are as written.
  • Logic blocks ({#if}, {#each}, {#await}, {#key}, {#snippet}) are block-level: each tag on a line of its own, branches indented. {#if}, {:else if} and {#key} conditions are formatted as expressions; {#each …} and {#await …} heads are as written. {@const} and {@debug} are block-level and as written; {@html} and {@render} flow inline with their expression formatted.
  • Comments, blank lines (at most core.max_blank_lines) and inline directives (<!-- rainbow: off -->, <!-- prettier-ignore -->, …) work as in HTML; inside <script> and <style>, the directives of that language apply.

Options

The HTML pack's options, under [language.svelte]:

Key Values Default
language.svelte.whitespace_sensitivity "css", "strict", "ignore" (see html.md) "css"
language.svelte.bracket_same_line boolean false
language.svelte.void_elements "no_slash", "slash", "preserve" (see html.md); only the void elements, so <Component /> keeps its slash "no_slash"

Differences from prettier-plugin-svelte

  • Indentation is core.indent_size (4), the width core.max_width.
  • Quotes and attribute values are as written; void elements are written <br>, not <br />.
  • {#each} and {#await} heads are not re-formatted.
  • The order of <script>, markup and <style> is never changed.