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 othersvelte:elements are block-level. <script>is formatted by the JavaScript pack, or by the TypeScript pack withlang="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 widthcore.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.