sveltejs / prettier-plugin-svelte

Format your svelte components using prettier.
MIT License
735 stars 95 forks source link

Snippets are not formatted #448

Open hmnd opened 2 months ago

hmnd commented 2 months ago

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 commented 2 months ago

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

hmnd commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

@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"
  ],
}