Installations

npm install prettier-plugin-svelte

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

20.18.0

NPM Version

10.8.2 Score

96

Supply Chain

98.8

Quality

87.7

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

5

Total

215

Closed

42

Merged

168

Issues

Open

48

Total

269

Closed

221

Releases

Unable to fetch releases

Contributors

44

Unable to fetch Contributors

View All 44 Contributors

Languages

3

TypeScript

HTML

JavaScript

TypeScript (64.61%)

HTML (34.44%)

JavaScript (0.95%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

sveltejs

Download Statistics

Total Downloads

38,551,191

Last Day

27,038

Last Week

456,754

Last Month

1,797,720

Last Year

18,231,418

GitHub Statistics

MIT License

758 Stars

348 Commits

98 Forks

14 Watchers

5 Branches

44 Contributors

Updated on Feb 17, 2025

Bundle Size

329.98 kB

Minified

88.47 kB

Minified + Gzipped

Bundlephobia

Maintainers

3

Package Meta Information

Latest Version

3.3.3

Package Id

prettier-plugin-svelte@3.3.3

Unpacked Size

1.43 MB

Size

283.50 kB

File Count

7

NPM Version

10.8.2

Node Version

20.18.0

Published on

Jan 13, 2025

Total Downloads

Cumulative downloads

Total Downloads

38,551,191

Last Day

-6.2%

27,038

Compared to previous day

Last Week

2.9%

456,754

Compared to previous week

Last Month

30.3%

1,797,720

Compared to previous month

Last Year

60.7%

18,231,418

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

2

prettier svelte

Dev Dependencies

12

@rollup/plugin-alias @rollup/plugin-commonjs @rollup/plugin-node-resolve @types/node ava prettier rollup rollup-plugin-typescript svelte ts-node tslib typescript

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

Compatibility

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

Setup

Install Prettier and the plugin as a dev dependency:

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

Then create a .prettierrc configuration file:

1// .prettierrc
2{
3    // ..
4    "plugins": ["prettier-plugin-svelte"],
5    "pluginSearchDirs": ["."], // should be removed in v3
6    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
7}

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

CLI Usage

Format your code using the Prettier CLI.

1npx prettier --write . # v3
2npx prettier --write --plugin prettier-plugin-svelte . # v2

As part of your scripts in package.json:

1// package.json
2{
3    // ..
4    "scripts": {
5        "format": "prettier --write .", // v3
6        "format": "prettier --write  --plugin prettier-plugin-svelte ." // v2
7    }
8}

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.

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.

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

Example:

1<!-- svelteStrictMode: true (Svelte 3 and 4) -->
2<div foo="{bar}"></div>
3<!-- svelteStrictMode: true (Svelte 5) -->
4<div foo={bar}></div>
5
6<!-- svelteStrictMode: false -->
7<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:

1<!-- allowShorthand: true -->
2<input type="text" {value} />
3
4<!-- allowShorthand: false -->
5<input type="text" value={value} />

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

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:

1<!-- before formatting -->
2<span><div>foo</div><span>bar</span></span>
3<div pretend break>content</div>
4
5<!-- after formatting, svelteBracketNewLine true -->
6<span
7    ><div>foo</div>
8    <span>bar</span></span
9>
10<div
11     pretend
12     break
13>
14    content
15</div>
16
17<!-- after formatting, svelteBracketNewLine false -->
18<span
19    ><div>foo</div>
20    <span>bar</span></span>
21<div
22     pretend
23     break>
24    content
25</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

1{
2    "svelteSortOrder": "options-styles-scripts-markup",
3    "svelteStrictMode": true,
4    "svelteBracketNewLine": false,
5    "svelteAllowShorthand": false,
6    "svelteIndentScriptAndStyle": false
7}

Usage with Tailwind Prettier Plugin

VS Code Extension: Use it as the default formatter for Svelte files
Prettier Plugin: Load the Tailwind plugin in the end - Tailwind docs

1// .prettierrc
2{
3    // ..
4    "plugins": [
5        "prettier-plugin-svelte",
6        "prettier-plugin-tailwindcss" // MUST come last
7    ]
8}

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:

1// settings.json
2{
3    // ..
4    "prettier.documentSelectors": ["**/*.svelte"]
5}

Usage in the browser

Usage in the browser is semi-supported. You can import the plugin from prettier-plugin-svelte/browser to get a version that depends on prettier/standalone and therefore doesn't use any node APIs. What isn't supported in a good way yet is using this without a build step - you still need a bundler like Vite to build everything together as one self-contained package in advance.

Migration

1# package.json
2- "format": "prettier --plugin-search-dir . --write ."
3+ "format": "prettier --write ."

1# package.json
2- "prettier": "^2.8.8",
3+ "prettier": "^3.1.0",
4- "prettier-plugin-svelte": "^2.10.1",
5+ "prettier-plugin-svelte": "^3.1.0",

1# .prettierrc
2- "pluginSearchDirs": ["."],
3+ "plugins": ["prettier-plugin-svelte"]

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 only works with Prettier version 3. 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.
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

FAQ

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

If you are wondering why this code

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

becomes this

1<span
2      ><span>assume very long text</span
3    ></span
4>

it's because of whitespace 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.

Version 2 does not work in `pnpm`

You may need to use a .prettierrc.cjs file instead to point Prettier to the exact location of the plugin using require.resolve:

1module.exports = {
2    pluginSearchDirs: false,
3    plugins: [require('prettier-plugin-svelte')],
4    overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
5};

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

5

Maintained

Determines if the project is "actively maintained".

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.9

/10

Last Scanned on 2025-02-10

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to prettier-plugin-svelte

prettier-plugin-svelte

Installations

Developer Guide

Yes

CommonJS, ESM

20.18.0

10.8.2

Score

Pull Requests

5

215

42

168

Issues

48

269

221

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

sveltejs

Download Statistics

GitHub Statistics

Bundle Size

329.98 kB

88.47 kB

Maintainers

Package Meta Information

Total Downloads

38,551,191

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

Prettier for Svelte components

Features

VS Code Extension

Prettier Plugin

Compatibility

Setup

CLI Usage

Options

Svelte Sort Order

Svelte Strict Mode

Svelte Allow Shorthand

Svelte Bracket New Line

Svelte Indent Script And Style

.prettierrc example

Usage with Tailwind Prettier Plugin

Usage in the browser

Migration

FAQ

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

Version 2 does not work in pnpm

10

10

10

6

5

3

2

0

0

0

0

0

0

3.9

/10

`.prettierrc` example

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

Version 2 does not work in `pnpm`