Format on save not working as expected

[gavinmcfarland]

Describe the bug
When a .svelte document is formatted on save the indentation does not change.

To Reproduce

1. Install Svelte Beta for VScode.
2. Open any .svelte file
3. Save (make sure "format on save" is enabled in VScode settings).

Expected behavior
I expect the code to be formatted on save.

Screenshots
An example of code not being formatted below.

System (please complete the following information):

• OS: Mac
• IDE: VScode
• Plugin/Package: Svelte Beta

Additional context
I'm using this with .editorconfig.

[dummdidumm]

Does this mean if you do formatting "by hand" (with the sortcut/command) the code is formatted? Or is it not formatted at all?

[gavinmcfarland]

I tried debugging it further. I tried including a .prettierrc config and installing Prettier and I was able to get something working. Since disabling Prettier and removing the .prettierrc config it no longer has the issue and it formats on save. My guess would be that even before formatting by hand wouldn't have worked.

I should uninstall VScode and try from scratch if I get time.

I'm not familiar with how formatting works, but I'm thinking about the following scenarios:

• Should it format without Prettier installed?
• Should it format without a .prettierrc config?
• Should it pick up configuration from .editorconfig? Currently, editor config works when .prettierrc is present.

[dummdidumm]

• It should be able to format without Prettier installed
• It should format without a .prettierrc config
• It does currently not pick up configuration from .editorconfig, but this can be added.

Under the hood, formatting works like the following:

1. Try to resolve prettier. First search in user's node_modules, fall back to own version, if not present.
2. Try to find a configuration file. If none present, no problem, defaults are used.
3. Format file using prettier-plugin-svelte.

If you try to format but it does not format anything, could you look into Output->Svelte and see if there is anything suspicious (or just copy the log in here)?

[gavinmcfarland]

Thanks for clarifying those points. If I get chance I'll try re-installing VScode and trying to reproduce the issue.

[s0me0ther]

I do have the same error. The code does not get modified on save.
This only occurs in .svelte files, other files will get auto-formatted on save.
My Output->Svelte only prints the Line Using Svelte v3.24.0 from ....
Output->Prettier keeps empty on .svelte files, but works as expected and fills output on other files (eg: js, ts, ..)

Triggered via console prettier --write "**/*.{css,html,js,json,md,scss,svelte,ts,yml}", svelte files will get auto-formatted - but not after save in vs-code.

[dummdidumm]

Does it format if you explicitely invoke the "format" command, or does it not format at all?

[s0me0ther]

Does it format if you explicitely invoke the "format" command, or does it not format at all?

If i force vs-code format (ctr + shift + i), it does format all files except *.svelte files.

[dummdidumm]

There is a setting svelte.format.enable, is it set to true in your settings?

You said that inside Output-Svelte, only Using svelte ... is shown, which means it does not even get to the formatting code. If it would, there should be Using Prettier ... in the output as well.

[s0me0ther]

There is a setting svelte.format.enable, is it set to true in your settings?

Yes, this setting is true

You said that inside Output-Svelte, only Using svelte ... is shown, which means it does not even get to the formatting code. If it would, there should be Using Prettier ... in the output as well.

It seems to me that IDE and console does not work with the same options / settings.

Yesterday i added the option to preprocess sass, which works nice, without any problems (via cli webpack-dev-server --config config/webpack.config.js --progress), but the IDE throws an error (Output Svelte):

Using Svelte v3.24.0 from /home/user/path/project/node_modules/svelte/compiler
Preprocessing failed
Error: Cannot find any of modules: sass,node-sass
    at Object.importAny (/home/user/path/project/node_modules/svelte-preprocess/dist/modules/importAny.js:29:15) {
  __source: 'Style'
}

Maybe this is related..

[dummdidumm]

I think this is an unrelated issue. You need to install either sass (recommended) or node-sass. See here for more info.

[s0me0ther]

I think this is an unrelated issue. You need to install either sass (recommended) or node-sass. See here for more info.

Thanks for the link. I just added the node binary path into svelte.language-server.runtime, which resolves the none-sass error ⚡.

The settings svelte.language-server.ls-path and svelte.language-server.port are empty. All other settings like svelte.plugin.typescript.enable are enabled.

[dummdidumm]

Possible reason: sveltejs/prettier-plugin-svelte#74 (comment)

[dummdidumm]

@s0me0ther @limitlessloop could you check if this could be the cause of your problem? sveltejs/prettier-plugin-svelte#74 (comment)

[s0me0ther]

@s0me0ther @limitlessloop could you check if this could be the cause of your problem? sveltejs/prettier-plugin-svelte#74 (comment)

@dummdidumm , this works great for svelte files now, thank you!
But, if i change the default formatter from esbenp.prettier-vscode to svelte.svelte-vscode i can only format svelte files :/.
Is there a way to use different formatters on different filetypes?

[jasonlyu123]

Did you set the default to all the file type?

[s0me0ther]

Did you set the default to all the file type?

Yes i did. I'm pretty new to VSCode..
Now i use following Settings, which works like a charm:

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },

Thank you all for solving this Issue!