Formatting triggers auto close tag

[fourcels]

Describe the bug

vscode auto format not correct

https://github.com/sveltejs/language-tools/assets/1042568/f6140742-b6b2-4882-b083-b6daf0b183a5

Reproduction

<button class="text-slate-500 bg-red-500 rounded-sm text-ellipsis"
  > Show Popup
</button>

after auto format

<button class="text-slate-500 bg-red-500 rounded-sm text-ellipsis"></button>
  Show Popup
</button>

Expected behaviour

<button class="text-slate-500 bg-red-500 rounded-sm text-ellipsis">
  Show Popup
</button>

System Info

• OS: MacOS
• IDE: vscode 1.82.2

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

No response

[jasonlyu123]

I can't reproduce this. Can you elaborate more on what you mean by "auto format"? Is a format on save? Code action on save? Or do you trigger the format? Please also describe the steps to reproduce. I don't understand what is the implication of the video. Does the cursor position have anything to do with the issue?

[fourcels]

@jasonlyu123 Both Format Document and format on save reproduction this bug Have you try this snippet

<button class="text-slate-500 bg-red-500 rounded-sm text-ellipsis"
  > Show Popup
</button>

[jasonlyu123]

Yeah, I tried both, but I can't reproduce it. That's why I thought there might be something else you didn't mention. It might be related to your config. Does this happen in an empty SvelteKit project? If not, please provide a reproduction repository. If it does, can you create an empty settings profile in VSCode to see if the problem persists and find the config or extension causing the problem?

[fourcels]

@jasonlyu123 Conflict with html.autoClosingTags vscode setting But the default setting is true

[jasonlyu123]

If turning off html.autoClosingTags can stop the issue, the problem is that the formatting causes small changes to the file similar to when you manually typed > and therefore triggers the auto-closing tag. This is also an edge case that only happens if you have a single attribute that is very close to the prettier print width config and has the end start tag in the next line. Took me a long time to find the exact way to reproduce it.

By the time the auto-closing tag is triggered, there is no way to differentiate if the change is user input or formatting, so it'll be hard to fix without changing how auto-closing tags work. Until we can come up with a workaround you can "Ctrl+z"(Command-Z) to undo the closing tag whenever it happens.

[jasonlyu123]

Similar issue with HTML https://github.com/microsoft/vscode/issues/137938