{"id":20436,"library":"prettier-plugin-svelte","title":"prettier-plugin-svelte","description":"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.","status":"active","version":"3.5.1","language":"javascript","source_language":"en","source_url":"https://github.com/sveltejs/prettier-plugin-svelte","tags":["javascript","prettier","svelte","typescript"],"install":[{"cmd":"npm install prettier-plugin-svelte","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-svelte","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-svelte","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency – the plugin requires Prettier v3","package":"prettier","optional":false},{"reason":"Peer dependency – supports Svelte 3, 4, and 5","package":"svelte","optional":false}],"imports":[{"note":"This package is a Prettier plugin, not a library you import in your code. Configure it in .prettierrc or prettier.config.js.","wrong":"Using require() or import() to load the plugin directly","symbol":"(none – plugin is loaded via Prettier config)","correct":"Add 'prettier-plugin-svelte' to the plugins array in your Prettier config"},{"note":"Options are Prettier options, not imported. Use the preitter configuration file or CLI flags.","wrong":"Passing options directly via CLI without configuration file","symbol":"(none – for custom options)","correct":"Set options in .prettierrc: { \"svelteSortOrder\": \"options-scripts-markup-styles\", \"svelteStrictMode\": true }"},{"note":"The package ships TypeScript declarations for the plugin options, but they are not directly imported. They are used by Prettier's config type system.","wrong":"Attempting to import types like SvelteOptions from this package","symbol":"(none – TypeScript types)","correct":"No import needed; types are provided automatically when using Prettier's config"}],"quickstart":{"code":"// Install\nnpm i --save-dev prettier prettier-plugin-svelte\n\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-svelte\"],\n  \"overrides\": [{ \"files\": \"*.svelte\", \"options\": { \"parser\": \"svelte\" } }],\n  \"svelteSortOrder\": \"options-scripts-markup-styles\",\n  \"svelteStrictMode\": true\n}\n\n// Format all .svelte files\nnpx prettier --write \"**/*.svelte\"","lang":"javascript","description":"Shows installation, Prettier configuration with plugin and Svelte options, and CLI usage to format all Svelte files."},"warnings":[{"fix":"Ensure you have prettier@3 installed (npm i prettier@3) and use the v3 plugin.","message":"prettier-plugin-svelte@3 only works with prettier@3. Do not mix major versions.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Delete 'pluginSearchDirs' from .prettierrc.","message":"pluginSearchDirs option is deprecated in Prettier v3. Remove it from your config.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"If using Svelte 5, ensure your code does not rely on quotes being added. Update templates accordingly.","message":"In Svelte 5, svelteStrictMode: true no longer quotes attributes; attribute values are bare expressions.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Add 'overrides' entry as shown in the quickstart. Without it, formatting falls back to default HTML parser.","message":"Overrides in .prettierrc must specify parser: 'svelte' for *.svelte files, otherwise the plugin won't be applied.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"If using v1, omit 'options' from the sort order string.","message":"The 'options' keyword in svelteSortOrder was added in v2; v1 only supported scripts-markup-styles.","severity":"deprecated","affected_versions":"<2.0.0"},{"fix":"Either remove the .prettierrc file to use extension settings, or configure options only in .prettierrc.","message":"When using VS Code, if a .prettierrc file exists, the Svelte extension's settings are ignored – Prettier config takes precedence.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm i --save-dev prettier-plugin-svelte prettier' to install both.","cause":"The plugin is not installed or not listed in package.json dependencies.","error":"Error: Could not find plugin \"prettier-plugin-svelte\". Did you forget to install it?"},{"fix":"Ensure the plugin is in node_modules and add 'plugins' array in .prettierrc. Do not use require() – use the config file only.","cause":"Plugin is installed but Prettier cannot locate it, often due to missing config or incorrect module resolution.","error":"Cannot find module 'prettier-plugin-svelte'"},{"fix":"Upgrade to prettier-plugin-svelte@3 if using Prettier v3, or downgrade to Prettier v2.","cause":"The plugin version mismatches with Prettier major version (e.g., v2 plugin with Prettier v3).","error":"TypeError: Cannot read properties of undefined (reading 'type')"},{"fix":"Verify the plugin is correctly configured in 'plugins' array. Ensure you are using prettier-plugin-svelte@2 or higher.","cause":"The option is not recognized because the plugin is not loaded or a different version without that option is used.","error":"Warning: Ignored unknown option 'svelteSortOrder'"},{"fix":"Set 'parser': 'svelte' (string) in the overrides. Example: 'overrides': [{ 'files': '*.svelte', 'options': { 'parser': 'svelte' } }]","cause":"The parser option in overrides is set to a non-string value (e.g., an object).","error":"Error: Invalid configuration: 'overrides[0].options.parser' must be a string"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}