Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte formatter suddenly do not respect formatting rules #2273

Open
rallets opened this issue Jan 27, 2024 · 14 comments
Open

Svelte formatter suddenly do not respect formatting rules #2273

rallets opened this issue Jan 27, 2024 · 14 comments
Labels
documentation Improvements or additions to documentation question Further information is requested

Comments

@rallets
Copy link

rallets commented Jan 27, 2024

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
Copy link
Member

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.

@jasonlyu123 jasonlyu123 added the question Further information is requested label Jan 27, 2024
@rallets
Copy link
Author

rallets commented Jan 27, 2024

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
Copy link
Member

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
Copy link
Author

rallets commented Jan 27, 2024

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
Copy link
Member

jasonlyu123 commented Jan 27, 2024

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
Copy link
Author

rallets commented Jan 27, 2024

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
Copy link
Author

rallets commented Jan 27, 2024

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
Copy link
Author

rallets commented Jan 27, 2024

@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
Copy link
Author

rallets commented Jan 27, 2024

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
Copy link
Member

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.

@jasonlyu123 jasonlyu123 added the documentation Improvements or additions to documentation label Jan 28, 2024
@rallets
Copy link
Author

rallets commented Jan 28, 2024

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
Copy link
Author

rallets commented Jan 28, 2024

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
Copy link
Member

jasonlyu123 commented Jan 28, 2024

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
Copy link
Author

rallets commented Jan 28, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants