Prettier for Svelte components

Format your Svelte components using Prettier.

Features

- Format your HTML, CSS, and JavaScript using prettier
- Format Svelte syntax, e.g. each loops, if statements, await blocks, etc.
- Format the JavaScript expressions embedded in the Svelte syntax
- e.g. expressions inside of {}, event bindings on:click="", and more

VS Code Extension

This plugin is bundled in the Svelte for VS Code extension. If you only format through the editor, you therefore don't need to do anything in addition.

The extension lets you define options through extension-specific configuration. These settings are ignored however if there's any configuration file (.prettierrc for example) present.

Prettier Plugin

Installing the plugin as a package allows:

- customizing the formatting behavior
- using the command line to format
- using a different IDE
- using the official VS Code Prettier extension to format Svelte files

$3

- prettier-plugin-svelte@3 only works with prettier@3
- prettier-plugin-svelte@2 only works with prettier@2

$3

Install Prettier and the plugin as a dev dependency:

``bash
npm i --save-dev prettier-plugin-svelte prettier
`

Then create a .prettierrc configuration file:

`jsonc
// .prettierrc
{
// ..
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."], // should be removed in v3
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}
`

If you want to customize some formatting behavior, see section Options.

$3

Format your code using the Prettier CLI.

`bash
npx prettier --write . # v3
npx prettier --write --plugin prettier-plugin-svelte . # v2
`

As part of your scripts in package.json:

`jsonc
// package.json
{
// ..
"scripts": {
"format": "prettier --write .", // v3
"format": "prettier --write --plugin prettier-plugin-svelte ." // v2
}
}
`

If you want to customize some formatting behavior, see section Options.

Options

Configurations are optional

Make a .prettierrc file in your project directory and add your preferred options to configure Prettier. When using Prettier through the CLI, you can also pass options through CLI flags, but a .prettierrc file is recommended.

$3

Sort order for svelte:options, scripts, markup, and styles.

Format: join the keywords options, scripts, markup, styles with a - in the order you want; or none if you don't want Prettier to reorder anything.

| Default | CLI Override | API Override |
| ------------------------------- | ------------------------------ | --------------------------- |
| options-scripts-markup-styles | --svelte-sort-order | svelteSortOrder: |

> The options order option only exists since version 2. If you use version 1 of prettier-plugin-svelte, omit that option (so for example only write scripts-markup-styles).

$3

More strict HTML syntax: Quotes in attributes and no self-closing DOM elements (except void elements).

> In version 2 this overruled svelteAllowShorthand, which is no longer the case.

> In Svelte 5, attributes are never quoted, because this will mean "stringify this attribute value" in a future Svelte version

Example:


`html




>