Svelte formatter suddenly do not respect formatting rules

[rallets]

Hi, I'm not sure this is the correct repo to post this issue. My problem is that suddenly VS Code has started to format the svelte files without respecting my settings. I haven't changed anything. I did not install any new extensions or packages. It just happened while I was working. Tried to restart VS Code many times. The most evident - and annoying - is the single/double-quotes in imports. My config says it should be single quotes, but - on save - it change them to double quotes. Ineed every time to use Eslint autofixer to get them back correct. I double checked all my settings, and they are correct (I mean Svelte › Plugin › Svelte › Format › Config: Single Quote "svelte.plugin.svelte.format.config.singleQuote": true) I don't have Prettier installed. I have installed Svelte for VS Code v108.2.1. Anyone else experienced the same? I don't know where to look to get back my sanity. Thank you

[jasonlyu123]

Can you check if you have any .prettierrc or prettier.config.js files? If there is a prettier config file, it takes priority over VSCode config. And maybe also check if there is any error logged. It might be that your config file is no longer valid in prettier v3 and throws an error. You can check it with the Output: Show Output Chanel command and choose svelte. It'll be near the integrated terminal.

[rallets]

Hi @jasonlyu123 , thanks for the reply. I don't have prettier config files. I just tried to nuke /node_modules/ just to exclude some corruptions there, but nothing. I tried another repo, much smaller, and it works correctly, so I exclude machine problem. Svelte output it looks good to me:

Initialize language server at  file:///c%3A/[...]
No svelte.config.js found. Using https://github.com/sveltejs/svelte-preprocess as fallback
Initialize new ts service at  c:/[...]/tsconfig.json
Trying to load configs for c:/[...]
Loaded config at  c:\[...]\App-v2\svelte-pipeline\svelte.config.js
Loaded config at  c:\[...]\App-v3\svelte-pipeline\svelte.config.js
SnapshotManager File Statistics:
Project files: 562
Svelte files: 186
From node_modules: 0
Total: 562
No svelte.config.js found. Using https://github.com/sveltejs/svelte-preprocess as fallback
No svelte.config.js found. Using https://github.com/sveltejs/svelte-preprocess as fallback

Any other idea? The funny thing is that it happened while I was working and saved a file with 1k lines

Does the svelte VS Code extension scan all the files at startup, or only when a file is opened?

[jasonlyu123]

Prettier will load config files outside your workspace and files that aren't at the root level, You may need to check the directory tree. If there isn't, we'll need a reproduction to determine the problem.

[rallets]

I'm 100% sure there is no prettier config in my repo, can you please explain better Prettier will load config files outside your workspace?

[jasonlyu123]

If your file is at c:/some/repo/path/to/file.svelte and your repo is at c:/some/repo.c:/some/repo/path/to/.prettierrc and c:/some/.prettierrc are both valid config file paths.

[rallets]

I checked the tree, no prettier configs found. The VS Code extension uses a prettier config, right? could I use that and check if an explicit prettier config is loaded? In this way I could also "bypass" the problem while I'm trying to close a task.

[rallets]

I'm also wondering if the vs code extension try to load only the .svelte files opened in the editor, or if at startup it scans the full tree. I'm asking because I have some "weird" huge .svelte files that maybe could cause the problem, and it will explain why it happened suddenly while coding.

[rallets]

@jasonlyu123 I found the problem 🥳 The repo has both the frontend and the C# backend API, hence in the app parent folder we have a .editorconfig used to configure Visual Studio and Raider. If I delete the .editorconfig the VS Code extension works fine again. The .editorconfig could be in the App folder, or in the tree (in my case it's in the parent folder, but I tried to move down to the App folder with the same result). I also tried to add this file to a repo that was working, and it starts to have the same problems. So I think the problem is that file. It looks like the extension is trying to read that file, and then crashes? or it have conflicting values? but I don't see svelte or typescript specific settings. It could also be nice to add in the VS Code extension's readme that also this file is used somehow.

I attach it here so it should help to reproduce the issue? The file is zipped because github doesn't allow to upload it as it is. Just unzip it and rename to .editorconfig.

Thank you

editorconfig.zip

[rallets]

I found the offending lines in .editorconfig that make VS Code Svelte Extension doing weird things:

[*]
end_of_line = lf
indent_style = space
indent_size = 4

it looks like the problem appears if it least one of those 3 settings are enabled.

I don't have a .editorconfig VSCode extension installed, so I suspect it's the Svelte extension that is doing something with it.

[jasonlyu123]

Yes. We also take editorconfig into account, and it also takes priority over vscode config. The way it takes priority isn't per setting. If there is a config file, all the vscode config will not be used.

[rallets]

Ok, thanks for the explanation. In my case this is very unfortunate as we need editorconfig for VS/Raider "backend" settings, and I think it's a pretty common scenario in the asp.net core "APIs" world. Is it possible somehow to disable this behavior? Maybe adding a config in the extension? I want to completely ignore that file, as I configure everything in VS Code. Another option is that the extension should not look outside its folder (where tsconfig is), as in my case the editorconfig is in the parent.

[rallets]

I think I found a way to solve this my issue. It's possible to bypass .editorconfig via unset:

[{*.svelte,*.ts}]
end_of_line = unset
indent_style = unset
indent_size = unset

But this conflicts with what you said:

The way it takes priority isn't per setting. If there is a config file, all the vscode config will not be used.

Instead it looks it's working for me. Can you confirm this please? or maybe it's just a coincidence?

BTW it started to happen "suddenly" because a colleague of mine did push a commit changing that file, adding the offending lines and - I don't remember how - VS Code did pick up the new configs.

[jasonlyu123]

If this can stop it, it probably is because it'll only take priority if there is any config in editorconfig that can be translated to prettier. It's handled by Prettier. I went through their code, and it does seem so. What we do is if the prettier config file result is falsy, we use the vscode config. Prettier VSCode has a config to disable the editorconfig loading. I think it does make sense to add the support for that config on our side.

[rallets]

I think it does make sense to add the support for that config on our side.

I agree. It can be solved like how I did, but it's kind of fragile, as new configs add in editorconfig/prettier can trigger the same situation as well, that is pretty hard to diagnose, as it's not well documented which file, which attributes, and which priority. In editorconfig it's not possible to unset all attributes (that I know) for .svelte , but it should be handled manually.