prettier-plugin-svelte

3.5.1 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

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

error Cannot find module 'prettier-plugin-svelte' ↓

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

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

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

error Warning: Ignored unknown option 'svelteSortOrder' ↓

cause 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 Error: Invalid configuration: 'overrides[0].options.parser' must be a string ↓

cause 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' } }]

Warnings

breaking prettier-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.

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

fix Delete 'pluginSearchDirs' from .prettierrc.

breaking In 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.

gotcha Overrides 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.

deprecated The '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.

gotcha When 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.

Install

npm install prettier-plugin-svelte

yarn add prettier-plugin-svelte

pnpm add prettier-plugin-svelte

Imports

(none – plugin is loaded via Prettier config)
wrong
```
Using require() or import() to load the plugin directly
```
correct
```
Add 'prettier-plugin-svelte' to the plugins array in your Prettier config
```
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)

wrong

Passing options directly via CLI without configuration file

correct

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

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

(none – TypeScript types)
wrong
```
Attempting to import types like SvelteOptions from this package
```
correct
```
No import needed; types are provided automatically when using Prettier's config
```
The package ships TypeScript declarations for the plugin options, but they are not directly imported. They are used by Prettier's config type system.

Quickstart

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"