Formatting <template> the same as <script> is broken for folks that want semicolons in <script>

[ubershmekel]

Hi @johnsoncodehk, I've been going down this rabbit hole for a few days now and I think I finally figured out what's going on.

You don't like semicolons. That's why you closed these issues without realizing the underlying problem:

#417
#477

I do like semicolons. The following code example looks fine to me.

<script setup lang="ts">
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

When I use Volar to format it, and I have "typescript.format.semicolons": "remove", then everything builds fine. {{ count }} stays {{ count }}. Though all of the <script> semicolons go away, which I'm not happy with.

When I use Volar to format it, and I have "typescript.format.semicolons": "insert", then everything breaks because {{ count }} turns into {{ count; }}.

I tried disabling Volar and using Prettier which fixes the problem. Prettier lets me have my semicolons in <script> and not in <template>. So #1078 is part of the problem here. I also realize you never saw this problem because you yourself are not a semicolon person.

Here are a few reasons why it took me so long to figure out what's going on:

• I had to figure out that it was the semicolons in templates that were breaking everything. In a big file, the error showed up somewhere seemingly unrelated.
• I had to figure out which builtin extensions to disable to prevent and allow Volar to format.
• I had to figure out which settings affected the semicolon behavior.
• I had to discover that modifying settings and disabling extensions doesn't always get picked up by the formatter unless I reload the entire VS Code window. So it took me a while to figure out how to consistently reproduce and fix the issues.
• Takeover mode requiring disabling some of the builtin extensions, but volar using others, was a bit confusing for me.
• Folks don't commit their .vscode/settings.json file, so it's hard to compare formatter settings.

All this is isn't your fault. Sorry this is a big dump of text. In the end I have a workaround - to avoid Volar's formatting system and rely on Prettier. Cheers.

[ubershmekel]

Did you just go and fix every issue I mentioned only 34 minutes after I posted this?

[johnsoncodehk]

I randomly fix. 😅