Snippets are not formatted

[hmnd]

I get the following error when I try to format a file containing a Svelte 5 snippet. I'm running the latest v3.2.5 of the plugin.

[error] /home/hmnd/dev/[myproject]/src/[myfile.svelte]: Expected if, each or await

[hmnd]

Oops, I didn't include the parser override in my .prettierrc :facepalm:

[hmnd]

I was experiencing this again and spent a bunch of time trying to track down what was going on. I've found that formatting fails if prettier-plugin-tailwindcss is included after prettier-plugin-svelte. If I list the svelte plugin last, everything works as expected.

Perhaps it should be documented that the svelte plugin must be listed first?

[jasonlyu123]

prettier-plugin-tailwindcss did document that the plugin should be the last one. https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

[hmnd]

@jasonlyu123 didn't notice that! However, that makes this issue even more confusing. I can only get Svelte formatting to work when prettier-plugin-svelte is last, not prettier-plugin-tailwindcss. And although this results in successful formatting, prettier-plugin-tailwindcss no longer sorts classes.

Eg:

Works

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

Does not work

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

[freemnw]

had the same problem This was caused by having both svelte v4 and v5 installed in my monorepo. Removed v4 and the problem went away

[newsve]

tried @hmnd 's solution, didn't do anything, don't have svelte 4 installed just 5

once I introduce snippet to any file, autoformatting is dead

while testing I restarted/reloaded everything after every change (SvelteKit server, VS Code)

edit: also rm'd node_modules and did npm i again, no luck

[ecker00]

Ok, figured it out. It's a monorepo issue. We have prettier configured at root level, while we have a Svelte 5 client and a TS server, both with theirs own packages (but no prettier, and no Svelte at root level).

Svelte 5 require a workspace version of Svelte ~~prettier-plugin-svelte~~ because we currently bundled Svelte 3. Ref: https://github.com/sveltejs/language-tools/issues/2383#issuecomment-2141189342

./package.json

{
  "name": "stuff",
  "node": ">=22.0.0",
  "scripts": {
    "prettierCheck": "prettier --check --config .prettierrc --ignore-path .prettierignore ./**/*",
    "prettierWrite": "prettier --write --config .prettierrc --ignore-path .prettierignore ./**/*"
  },
  "devDependencies": {
    "prettier": "^3.5.0",
    "prettier-plugin-svelte": "^3.3.3",
    "svelte": "^5.2.9" // Must include Svelte 5 here, otherwise it defaults to 3
  }
}

So solution is easy, but will be double up Svelte installed, alright compromise.