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

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

ubershmekel opened this issue Apr 18, 2022 · 2 comments


Copy link

ubershmekel commented Apr 18, 2022

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:


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

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

const count = ref(0);

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

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.

Copy link

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

Copy link

I randomly fix. 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

No branches or pull requests

2 participants