Prettier doesn't work in editor on fresh project

[wojtekgalaj]

Describe the bug

On a project created with npm create svelte editor plugins for prettier do not work. The problem gets resolved when bumping prettier and prettier plugin svelte to version 3:

		"prettier": "^3.0.1",
		"prettier-plugin-svelte": "^3.0.3",

Reproduction

npm create svelte
npm i

Open any of the svelte files, move code around, save.

Expected:
Prettier reformats the code on save.

Actual:
Code is not reformatted.

Expected behaviour

Prettier reformats the code on save.

System Info

System:
    OS: macOS 13.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.92 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 19.9.0 - ~/.local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - /opt/homebrew/bin/npm
    pnpm: 8.6.9 - ~/.local/npm-global/bin/pnpm
  Browsers:
    Chrome: 115.0.5790.170
    Edge: 114.0.1823.67
    Safari: 16.6
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0
    @sveltejs/kit: ^1.5.0 => 1.22.5
    svelte: ^3.54.0 => 3.59.2
    vite: ^4.3.0 => 4.4.9

Which package is the issue about?

No response

Additional Information, eg. Screenshots

Again, bumping prettier and the svelte plugin to v3 fixes the problem.

[jasonlyu123]

Are you using the prettier extension to format Svelte files or the Svelte extension? If you're using the prettier extension 10.0.0, then it might be a compatibility issue with prettier v2 and v3. They bump the default version to prettier v3 in 10.0.0 but then revert it to 10.1.0.

[wojtekgalaj]

I use neoformat in Neovim. I am actually not sure how to check the version of the plugin there.

As for VSCode, that uses 10.1.0 and I can reproduce the problem on a fresh npm create svelte@latest project.

[jasonlyu123]

In both cases, it is unrelated to this repository, but what exactly happened in both cases?
Are there any errors, or is it silently failed?

[wojtekgalaj]

I originally posted this issue on the svelte kit repository but I was redirected here by Ghost.

So, I just did the whole thing again, created a new svelte kit project with npm create svelte@latest installed deps with node 19, opened a random svelte file, added a bunch of line breaks and got no formatting from prettier. In VSCode that is, since I suppose it's what most people are using.

I don't really know how to debug VSCode, but if I click on the prettier thing in the status bar I get the following output:

["INFO" - 18:40:14] Extension Name: esbenp.prettier-vscode.
["INFO" - 18:40:14] Extension Version: 10.1.0.

No formatting happens. If I bump prettier and the svelte plugin to 3, it all works.

I love Svelte and Svelte Kit and I would really like to help fixing this issue for any newcomers. I know it might seem like a small silly nit pick but, as they say, the devil is in the details :)

[wojtekgalaj]

If you would let me know which repository is responsible for the dependencies installed when running npm create svelte, I'd open a PR there, since it seems like a simple deps bump fixes the issue?

[ghostdevv]

For me I have a slightly different problem, the Svelte extension is correctly formatting but the Prettier extension is just doing nothing (in like ts files etc) despite there being two ticks in vscode.

If you would let me know which repository is responsible for the dependencies installed when running npm create svelte, I'd open a PR there, since it seems like a simple deps bump fixes the issue?

The Kit repo under packages/create-svelte. If language tools is working with v3 then would be good to bump them even if it doesn't fix your issue with prettier v2 not working

[wojtekgalaj]

Hey Ghost,

It does fix the issue for me. I don't mind which version of prettier is running as long as it is doing it's job.

I'll see about the PR later this evening.

Thanks.

[jasonlyu123]

I can't reproduce the problem with the prettier extension version 10.1.0. As for neoformat, you probably have a global prettier v3 installed. If that's the case, It is expected to fail because prettier v3 and prettier v2 are incompatible. If you use prettier v3, You have to update the prettier-plugin-svelte to v3. There is already sveltejs/kit#10410 to update create-svelte to prettier v3, but an upstream issue currently blocks it. But that probably won't help to ease the onboarding experience with neoformat since some people might have a v2 install globally instead.

[wojtekgalaj]

If you can't reproduce then there is something wrong with my setup clearly. I will close this ticket and have a better look at my env. I don't have global prettier at all but it must be something along those lines.

Thanks for the other links, I am watching those now.