Respect `editor.autoIndent` with VSCode in `script` and `style` tag

[lukaszpolowczyk]

Description

Svelte respects the editor.autoIndent setting in markup. But it does not include it at all in the script and style tag.

Proposed solution

Please add editor.autoIndent support for the inside of script and style tag.

Alternatives

No response

Additional Information, eg. Screenshots

https://user-images.githubusercontent.com/16800535/187095030-4cfa40b5-f212-403d-9fef-b309b0c2358a.mp4

In the video:

Copy and paste script line...

	const dispatch = createEventDispatcher();

...Paste with wrong indentation.

Copying and pasting markup line...

<span class="state-symbol"

...pastes correctly, with aligned indentation.

[lukaszpolowczyk]

@dummdidumm

Expanding the problem

In {expression} expressions, it also does not handle the indentation setting:

https://user-images.githubusercontent.com/16800535/187180741-8e104b61-c29a-4bc7-aee3-4fc0e7872ad4.mp4

But it's a broader problem, because in expressions it doesn't even support snippets, for example (inside the script tag it supports snippets, in expression does not support):

https://user-images.githubusercontent.com/16800535/187180991-0148b458-4993-42f7-b643-d96cf525f9ce.mp4

Probably in addition to indentation and snippet support, there are many things that work in script and don't work in {expression}.

---

Perhaps this should be a separate issue.

[jasonlyu123]

This seems to be an upstream issue with vscode. I am debugging the implementation in vscode. When the code is pasted, It'll check if the position is another language embedded into the main language and use the indent settings of the embedded language. But it looks like when it is calculating this information is not updated to include the second line of the pasted code. So it would fall back to using the main language svelte not the embedded one liketypescript.

Also, it's working if you pasted it into the start of an empty line.

    function test() {

       // ↑ here
    }

And the same behaviour happens in HTML as well.

[lukaszpolowczyk]

@jasonlyu123 I don't use TypeScript. I only use JSDoc, in SvelteKit.

Could the cause of the problem also cause this error - https://github.com/sveltejs/language-tools/issues/1618 ? Also, there is an issue that something works one way at the beginning and another way in the rest of the code.

Also, what about `{expression}}? It seems to work even worse in expression (as I showed - even snippet doesn't work).

[jasonlyu123]

I am not saying this has to do with TypeScript. I am only taking TypeScript as an example. Auto indent is not provided by extension, It is core editor functionality. Programming language extension provides config for VSCode to support auto-indent in that language. From my understanding, it should work the same as when you press the enter button.

What I am saying is that this is a problem on the VSCode side. And it's happening in all script/style language embedded inside svelte files in certain a situation. I'll open an issue on their side for it when I have time.

The snippet inside the moustache is a separate issue. You can create another issue to track it. With more detail like how you defined the snippet. The issue you linked is also unrelated.

[lukaszpolowczyk]

I'll open an issue on their side for it when I have time.

@jasonlyu123 Ok, thanks. I am waiting.

Issue about {expression} - https://github.com/sveltejs/language-tools/issues/1619

[lukaszpolowczyk]

I wrote about it - https://github.com/microsoft/vscode/issues/160553