vscode extension does not respect (certain) user preferences

[m4rch3n1ng]

Describe the bug

the svelte for vscode extension ignores style preferences like tabs over spaces or no semicolon vs semicolon (less severe because more obvious)

Reproduction

in any svelte / svelte-kit project with the main identation set to tabs (see screenshots below), if you start typing a component that is not yet imported into the component (see screenshots 1 and 2) and let the extension complete the import for you (screenshot 2), then the import will be added to the file with 4 spaces instead of a tab (like the editor settings specify).

less "severe" (since it's visible) and less obvious is, that it also includes a semicolon at the end of the import, even though the rest of the file (and all other files) do not have semicolons. the regular vscode builtin javascript / typescript extension does respect with or without semicolons, depending on the file context.

the extension works, as far as i have tested, when it comes to preferences of " and ' for import strings, changing all the strings to use ' over " also makes the auto-import use ', even though i have not configured anything in my settings file.

Expected behaviour

the extension should respect my preferences

System Info

• OS: Arch Linux
• IDE: VSCode / Code - OSS

• Svelte for VS Code extension: v107.3.0
• Code: 1.77.3

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

screenshot 1

screenshot 2

screenshot 3

screenshot 4 [vscode settings.json]

[jasonlyu123]

There are other configs for these preferences. javascript.preferences.quoteStyle and typescript.preferences.quoteStyle for quote style. And prettier configs control indent size, tab preference, and semicolons. You can use prettier.useTabs, prettier.tabWidth and prettier.semi in your vscode settings or the corresponding config in a prettier config file. For your preferences, you need to set useTabs to true, tabWidth to 4 and semi to false.

As for why it doesn't work as you expected, editor.insertSpaces is not a readily available config for us. It'll be overridden by file indentation detection. So we'll need to sync per file configuration with VSCode for it to work automatically. This is not part of the language server protocol, so we'll have to implement this by ourselves. We can consider adding this, but if we do, this will be overridden by prettier configs if present.

And for semicolons, TypeScript does have semicolon detection, just like the quote style. But we currently override the auto-config with the prettier config. We have a virtual file behind the scenes for TypeScript to understand Svelte syntax. And the virtual file has a semicolon, so the detection usually doesn't work. Making the detection work needs a lot of work. So we probably won't do it, at least anytime soon.

[wildyaboku]

Hi @jasonlyu123,

When I accept an auto-import suggestion, the extension adds the import to the script tag with spaces for the indentation. This is not ideal, I would honestly rather have no indentation at all (the old behavior) than spaces snuck into my code like that.

It doesn't matter if the file I'm working on already has other imports indented with tabs, the extension still indents the new import with spaces. If the extension is supposed to be detecting my indentation style from the surrounding code, it's definitely not working properly.

Literally every option in my editor is configured for tabs. If I use the "svelte: show compiled code" command, even the compiled JS file is using tabs. I'm really not sure where the plugin (or whoever is responsible) is getting the idea of using spaces from.

You can use prettier.useTabs, prettier.tabWidth and prettier.semi in your vscode settings or the corresponding config in a prettier config file.

I searched for these options in my VSCode settings and there were no matches. I'm assuming I need to install some kind of extension, but installing another extension just for proper indentation is not a viable solution for me.

If I'm doing something wrong or if there's some other trick to this, please let me know.

[m4rch3n1ng]

I searched for these options in my VSCode settings and there were no matches. I'm assuming I need to install some kind of extension, but installing another extension just for proper indentation is not a viable solution for me.

@wildyaboku while you need the prettier extension to see those options in the graphical settings, you can actually just add them to the json settings like so

	"prettier.useTabs": true,
	"prettier.tabWidth": 4,

vscode will gray those out and warn you that they are "Unknown Configuration Setting[s]", but the vscode svelte extension will still respect those, at least on my end.

[jasonlyu123]

or the corresponding config in a prettier config file.

Maybe my message isn't that clear. You can also use a .prettierrc config file if you don't have the prettier extension installed.

[wildyaboku]

I see, that makes a lot more sense. I've just tested this and it's working correctly, even without the "prettier" extension. Thanks for the clarification, @m4rch3n1ng and @jasonlyu123, I really appreciate it!