prettier-plugin-svelte

What is prettier-plugin-svelte?

The prettier-plugin-svelte npm package is a plugin for Prettier that adds support for formatting Svelte files. It ensures that your Svelte code is consistently styled according to Prettier's rules, making it easier to maintain and read.

What are prettier-plugin-svelte's main functionalities?

Format Svelte Files

This feature allows you to format Svelte files using Prettier. By including the plugin in your Prettier configuration, you can ensure that your Svelte code is consistently styled.

/* .prettierrc */
{
  "plugins": ["prettier-plugin-svelte"]
}

/* Example Svelte file before formatting */
<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<style>
  h1 {
    color: red;
  }
</style>

<h1 on:click={increment}>Count: {count}</h1>

/* Example Svelte file after formatting */
<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<style>
  h1 {
    color: red;
  }
</style>

<h1 on:click={increment}>Count: {count}</h1>

Integration with Prettier CLI

You can use the Prettier CLI to format all Svelte files in your project. This command will recursively find and format all .svelte files in the src directory.

/* Command to format Svelte files using Prettier CLI */
npx prettier --write "src/**/*.svelte"

Support for Svelte-specific Syntax

The plugin supports Svelte-specific syntax such as reactive statements, bindings, and event handlers, ensuring that these are also formatted correctly.

/* Example Svelte file with Svelte-specific syntax */
<script>
  export let name = 'world';
</script>

<style>
  p {
    font-size: 1.5em;
  }
</style>

<p>Hello {name}!</p>

Other packages similar to prettier-plugin-svelte

eslint-plugin-svelte3

eslint-plugin-svelte3 is an ESLint plugin that provides linting for Svelte files. While it focuses on linting rather than formatting, it can be used alongside prettier-plugin-svelte to ensure both code quality and consistent styling.

svelte-preprocess

svelte-preprocess is a preprocessor for Svelte that allows you to use various languages like TypeScript, SCSS, and PostCSS in your Svelte components. While it doesn't handle formatting, it can be used in conjunction with prettier-plugin-svelte to preprocess and format your Svelte code.

svelte-check

svelte-check is a command-line tool that provides type-checking and linting for Svelte projects. It complements prettier-plugin-svelte by ensuring that your Svelte code is not only well-formatted but also free of type errors and common issues.

README

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

How to use in your IDE

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

If you want to

• customize some formatting behavior
• use the official VS Code Prettier extension to format Svelte files instead
• use a different editor
• also want to use the command line to format

then you need to install the plugin and setup a Prettier configuration file as described in the next section.

Some of the extensions let you define options through extension-specific configuration. These settings are ignored however if there's any configuration file (.prettierrc for example) present.

How to install manually

First install Prettier and the plugin as a dev depenendency:

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

Then create a .prettierrc file to tell Prettier about the plugin:

{
    "plugins": ["prettier-plugin-svelte"]
}

If you're using prettier-plugin-svelte version 2 with pnpm and have problems getting it to work, you may need to use a .prettierrc.cjs file instead to point Prettier to the exact location of the plugin using require.resolve:

module.exports = {
    pluginSearchDirs: false, // you can omit this when using Prettier version 3
    plugins: [require('prettier-plugin-svelte')],
    overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],

    // Other prettier options here
};

Do NOT use the above with version 3 of the plugin

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

How to use (CLI)

Format your code using Prettier CLI.

As a one-time run:

npx prettier --write --plugin prettier-plugin-svelte .

As part of your scripts in package.json:

"format": "prettier --write  --plugin prettier-plugin-svelte ."

There's currently an issue with Prettier 3 which requires the seemingly redundant --plugin setting

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

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.

Svelte Sort Order

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 <string>	svelteSortOrder: <string>

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).

Svelte Strict Mode

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.

Example:

<!-- svelteStrictMode: true -->
<div foo="{bar}"></div>

<!-- svelteStrictMode: false -->
<div foo={bar} />

Default	CLI Override	API Override
false	--svelte-strict-mode <bool>	svelteStrictMode: <bool>

Svelte Allow Shorthand

Option to enable/disable component attribute shorthand if attribute name and expression are same.

Example:

<!-- allowShorthand: true -->
<input type="text" {value} />

<!-- allowShorthand: false -->
<input type="text" value={value} />

Default	CLI Override	API Override
true	--svelte-allow-shorthand <bool>	svelteAllowShorthand: <bool>

Svelte Self Closing Elements

Whether or not empty elements (such as divs) should be self-closed or not.

Example:

<!-- svelteSelfCloseElements: "always" -->
<div />

<!-- svelteSelfCloseElements: "never" -->
<div></div>

Default	CLI Override	API Override
"never"	--svelte-self-close-elements <str>	`svelteSelfCloseElements: "always"	"never"`

Svelte Self Closing Components

Whether or not empty components should be self-closed or not.

Example:

<!-- svelteSelfCloseComponents: "always" -->
<Component />

<!-- svelteSelfCloseComponents: "never" -->
<Component></Component>

Default	CLI Override	API Override
"always"	--svelte-self-close-components <str>	`svelteSelfCloseComponents: "always"	"never"`

Svelte Bracket New Line

Deprecated since 2.5.0. Use Prettier 2.4.0 and bracketSameLine instead.

Put the > of a multiline element on a new line. Roughly the Svelte equivalent of the jsxBracketSameLine rule. Setting this to false will have no effect for whitespace-sensitive tags (inline elements) when there's no whitespace between the > of the start tag and the inner content, or when there's no whitespace after the > of the end tag. You can read more about HTML whitespace sensitivity here. You can adjust whitespace sensitivity through this setting.

Example:

<!-- before formatting -->
<span><div>foo</div><span>bar</span></span>
<div pretend break>content</div>

<!-- after formatting, svelteBracketNewLine true -->
<span
    ><div>foo</div>
    <span>bar</span></span
>
<div
     pretend
     break
>
    content
</div>

<!-- after formatting, svelteBracketNewLine false -->
<span
    ><div>foo</div>
    <span>bar</span></span>
<div
     pretend
     break>
    content
</div>

Default	CLI Override	API Override
true	--svelte-bracket-new-line <bool>	svelteBracketNewLine: <bool>

Svelte Indent Script And Style

Whether or not to indent the code inside <script> and <style> tags in Svelte files. This saves an indentation level, but might break code folding in your editor.

Default	CLI Override	API Override
true	--svelte-indent-script-and-style <bool>	svelteIndentScriptAndStyle: <bool>

.prettierrc example

{
    "svelteSortOrder": "options-styles-scripts-markup",
    "svelteStrictMode": true,
    "svelteBracketNewLine": false,
    "svelteAllowShorthand": false,
    "svelteIndentScriptAndStyle": false
}

Usage with Tailwind Prettier Plugin

There is a Tailwind Prettier Plugin to format classes in a certain way. This plugin must be loaded last, so if you want to use the Tailwind plugin, disable Prettier auto-loading and place prettier-plugin-tailwindcss in the end of the plugins array. If you are using VS Code, make sure to have the Prettier extension installed and switch the default formatter for Svelte files to it.

// .prettierrc
{
    // ..
    plugins: [
        'prettier-plugin-svelte',
        'prettier-plugin-tailwindcss', // MUST come last
    ],
    pluginSearchDirs: false, // you can omit this when using Prettier version 3
}

More info: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

Since we are using configuration overrides to handle svelte files, you might also have to configure the prettier.documentselectors in your VS Code settings.json, to tell Prettier extension to handle svelte files, like this:

// settings.json
{
    // ..
    'prettier.documentSelectors': ['**/*.svelte'],
}

FAQ

Why is the closing or opening tag (> or <) hugging the inner tag or text?

If you are wondering why this code

<span><span>assume very long text</span></span>

becomes this

<span
      ><span>assume very long text</span
    ></span
>

it's because of whitespsace sensitivity. For inline elements (span, a, etc) it makes a difference when rendered if there's a space (or newline) between them. Since we don't know if your slot inside your Svelte component is surrounded by inline elements, Svelte components are treated as such, too. You can adjust this whitespace sensitivity through this setting. You can read more about HTML whitespace sensitivity here.

Which versions are compatibly with which Prettier version?

prettier-plugin-svelte v2 is compatible with Prettier v2 and incompatible with Prettier v3. prettier-plugin-svelte v3 is compatible with Prettier v3 and incompatible with lower Prettier versions.

How to migrate from version 2 to 3?

Version 3 contains the following breaking changes:

• Whether or not empty elements/components should self-close is now left to the user - in other words, if you write <div /> or <Component /> that stays as is, and so does <div></div>/<Component></Component>. If svelteStrictMode is turned on, it will still only allow <div></div> notation for elements (but it will leave your components alone)
• svelteAllowShorthand now takes precedence over svelteStrictMode, which no longer has any effect on that behavior. Set svelteAllowShorthand to false to get back the v2 behavior
• Some deprecated svelteSortOrder options were removed, see the the options section above for which values are valid for that options

Version 3 of this plugin requires Prettier version 3, it won't work with lower versions. Prettier version 3 contains some changes to how it loads plugins which may require you to adjust your configuration file:

• Prettier no longer searches for plugins in the directory automatically, you need to tell Prettier specifically which plugins to use. This means you need to add "plugins": ["prettier-plugin-svelte"] to your config if you haven't already. Also remove the deprecated option pluginSearchDirs. When invoking Prettier from the command line, you currently need to pass --plugin prettier-plugin-svelte in order to format Svelte files due to a bug in Prettier
• Prettier loads plugins from the plugin array differently. If you have used require.resolve("prettier-plugin-svelte") in your .prettierrc.cjs to tell Prettier where to find the plugin, you may need to remove that and just write "prettier-plugin-svelte" instead

Changelog

3.0.3

• (fix) handle static tag attributes on <svelte:element>