Registry / web-framework / prettier-plugin-svelte

prettier-plugin-svelte

library3.5.1jsnpmunverified

Prettier plugin for formatting Svelte components, supporting Svelte 3, 4, and 5. Current stable version is 3.5.1, with active development. Automatically formats HTML, CSS, and JavaScript within Svelte files, including Svelte-specific syntax like each loops, if blocks, and event bindings. Key differentiators: official plugin from the Svelte team, integrates natively with the Svelte VS Code extension, and supports Prettier v3 (v2 works with Prettier v2). Released on npm, ships TypeScript types, and follows Prettier's plugin API. Compared to generic formatters, this plugin understands Svelte's template syntax and provides options like sorting order and strict mode.

web-framework

npm install prettier-plugin-svelte

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-SV

prettier-plugin-svelte

web-frameworkjavascriptv3.5.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

(none – plugin is loaded via Prettier config)

✓ Add 'prettier-plugin-svelte' to the plugins array in your Prettier config

✗ Using require() or import() to load the plugin directly

This package is a Prettier plugin, not a library you import in your code. Configure it in .prettierrc or prettier.config.js.

(none – for custom options)

✓ Set options in .prettierrc: { "svelteSortOrder": "options-scripts-markup-styles", "svelteStrictMode": true }

✗ Passing options directly via CLI without configuration file

Options are Prettier options, not imported. Use the preitter configuration file or CLI flags.

(none – TypeScript types)

✓ No import needed; types are provided automatically when using Prettier's config

✗ Attempting to import types like SvelteOptions from this package

The package ships TypeScript declarations for the plugin options, but they are not directly imported. They are used by Prettier's config type system.

Shows installation, Prettier configuration with plugin and Svelte options, and CLI usage to format all Svelte files.

// Install npm i --save-dev prettier prettier-plugin-svelte // .prettierrc { "plugins": ["prettier-plugin-svelte"], "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }], "svelteSortOrder": "options-scripts-markup-styles", "svelteStrictMode": true } // Format all .svelte files npx prettier --write "**/*.svelte"

Debug

Known issues

breakingprettier-plugin-svelte@3 only works with prettier@3. Do not mix major versions.

fix

Ensure you have prettier@3 installed (npm i prettier@3) and use the v3 plugin.

affects: >=3.0.0 <4.0.0

deprecatedpluginSearchDirs option is deprecated in Prettier v3. Remove it from your config.

fix

Delete 'pluginSearchDirs' from .prettierrc.

affects: >=3.0.0

breakingIn Svelte 5, svelteStrictMode: true no longer quotes attributes; attribute values are bare expressions.

fix

If using Svelte 5, ensure your code does not rely on quotes being added. Update templates accordingly.

affects: >=3.0.0

gotchaOverrides in .prettierrc must specify parser: 'svelte' for *.svelte files, otherwise the plugin won't be applied.

fix

Add 'overrides' entry as shown in the quickstart. Without it, formatting falls back to default HTML parser.

affects: >=2.0.0

deprecatedThe 'options' keyword in svelteSortOrder was added in v2; v1 only supported scripts-markup-styles.

fix

If using v1, omit 'options' from the sort order string.

affects: <2.0.0

gotchaWhen using VS Code, if a .prettierrc file exists, the Svelte extension's settings are ignored – Prettier config takes precedence.

fix

Either remove the .prettierrc file to use extension settings, or configure options only in .prettierrc.

affects: >=2.0.0

Errors

Common errors & fixes

Error: Could not find plugin "prettier-plugin-svelte". Did you forget to install it?

The plugin is not installed or not listed in package.json dependencies.

fix

Run 'npm i --save-dev prettier-plugin-svelte prettier' to install both.

Cannot find module 'prettier-plugin-svelte'

Plugin is installed but Prettier cannot locate it, often due to missing config or incorrect module resolution.

fix

Ensure the plugin is in node_modules and add 'plugins' array in .prettierrc. Do not use require() – use the config file only.

TypeError: Cannot read properties of undefined (reading 'type')

The plugin version mismatches with Prettier major version (e.g., v2 plugin with Prettier v3).

fix

Upgrade to prettier-plugin-svelte@3 if using Prettier v3, or downgrade to Prettier v2.

Warning: Ignored unknown option 'svelteSortOrder'

The option is not recognized because the plugin is not loaded or a different version without that option is used.

fix

Verify the plugin is correctly configured in 'plugins' array. Ensure you are using prettier-plugin-svelte@2 or higher.

Error: Invalid configuration: 'overrides[0].options.parser' must be a string

The parser option in overrides is set to a non-string value (e.g., an object).

fix

Set 'parser': 'svelte' (string) in the overrides. Example: 'overrides': [{ 'files': '*.svelte', 'options': { 'parser': 'svelte' } }]

Upgrade

Version history

3.5.1latest on npm

Audit

Dependencies

prettierrequiredPeer dependency – the plugin requires Prettier v3

svelterequiredPeer dependency – supports Svelte 3, 4, and 5

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/sveltejs/prettier-plugin-svelte ↗

packagehttps://www.npmjs.com/package/prettier-plugin-svelte ↗

homepagehttps://svelte.dev ↗