svelte-vscode's readme is confusing because it is incomplete and/or outdated, Edit: actually the entire prettier setup is confusing

[205g0]

you must have in your .prettier.rc:

  "plugins": ["prettier-plugin-svelte"], // this is surprisingly not needed, still you need to npm i that, match the version of your prettier version
  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] this is needed!

(this is stated in prettier-plugin-svelte readme but latter is not the one you see when installing the extension and also there they ask to put the plugins line which is also not needed)

what the svelte-vscode readme states: adjust your VS Code settings:

 "[svelte]": { // not needed
   "editor.defaultFormatter": "svelte.svelte-vscode" / not needed
 },

is not needed and doesn't help without the .prettier.rc additions above

and most important: since prettier isn't formatting your .svelte files but this plugin does, do not be confused by this:

THIS IS NORMAL for svelte files yeah super confusing ux but yeah, i still find the reasoning more than confusing, so prettier does not deal with your svelte file directly but behind the curtains it does (just not as the prettier extension 39.4 million users have installed)

since this readme is also used in the store and it's the first thing you see once you install it, i find that the current version should be updated because i wasted one hour to get this working. in contrast most lang-tools for other langs just work in vs code after one click

but that's your call, i can do the pr if time is short on your side

Reproduction

n.a.

Expected behaviour

n.a.

System Info

n.a.

Which package is the issue about?

svelte-vscode

Additional Information, eg. Screenshots

No response

[205g0]

just wondering, why cant we do a setup where the og prettier plugin deals with svelte files? why does this need to be in svelte-vscode? because the user might be overwhelmed installing two extensions?

[205g0]

i edited the title again because it is a structural problem, the entire setup is not right because again, the prettier-is-not-working flag (

) of vscode is a major ux flaw which wouldn't be a thing if the og prettier extension was used in the first place

[jasonlyu123]

I will explain the general problem to you, and you can ask about the details of the part you don't understand. Then, we can discuss what part of the documentation we can improve.

First, Neither the prettier VSCode extension nor the prettier npm package supports Svelte. You must install prettier-plugin-svelte for the prettier npm package to work. The Prettier VSCode extension uses the prettier npm package under the hook. So it'll also need prettier-plugin-svelte installed. But there is another problem: Because it doesn't officially support Svelte, The VSCode extension needs a "vscode" config to handle Svelte files.

The prettier status bar is provided by the prettier extension, over which we have no control. It'll have the forbidden icon when you haven't set it up.

The Svelte extension is "meant to" provide formatting out of the box. Of course, there are cases where it can't. It bundles a version of prettier-plugin-svelte and prettier npm packages. In addition to making the installation of the mentioned package optional, You also don't need the .prettier.rc file.

What makes the problem more complex is the recent prettier v3 breaking changes. The plugin system is incompatible with v2 and v3. So there are cases where you'll need to manually install the prettier-plugin-svelte and prettier and set up the config file because the extension doesn't bundle both v2 and v3. I don't know what the problem you encountered is, but it is highly likely related to this.

And to answer your questions:

"[svelte]": { // not needed
"editor.defaultFormatter": "svelte.svelte-vscode" / not needed
},

It's needed because some people make the default formatter for everything, which, of course, sometimes doesn't work.

why cant we do a setup where the og prettier plugin deals with svelte files? why does this need to be in svelte-vscode? because the user might be overwhelmed installing two extensions?

Yes, you can. It's just way more complex than just installing the prettier VSCode extension.