VScode syntax highlighting goes haywire

[thany]

At some point, the syntax highlighting just goes completely nuts. It doesn't usually take much encouragement to trigger this issue. Sometimes it's literally one letter, other times it needs a bit more of a push.

I've most notably seen this happen with more complex .vue component files, using the Options API.

Here's an example:

If I reload the window, or just restart VScode, it goes back the way it's intended:

It's worth mentioning the syntax highlighting part for script part also goes awry. Same conditions - usually all it takes is one or a few changed characters. Strangely, the style part seems okay. So far.

I should also emphasise that the above screenshots are an example. It's fairly random in terms of how the syntax highlighting stuffs up, and it feels like it goes stranger and stranger the more I edit without reloading VScode.

I have not seen this happening with any other type of file, among with are plain javascript and typescript files, plain scss, and plain html files.

VScode is at version 1.88.1 and the "Vue - Official" extension is at 2.0.8 2.0.12.
I Do NOT have the old Vetur or Volar extensions installed.

[kcmeven]

2.0.6 yes

[johnsoncodehk]

2.0.8 is outdated, please use v2.0.12.

[thany]

I would love to use 2.0.12, but for some reason my VScode refuses to update the extension. Says everything is up to date. I just uninstalled and reinstalled the Vue extension, but now it's at 2.0.10 for whatever (other) reason 🤨

[so1ve]

@thany See #4227

[thany]

I installed 2.0.12 manually. Problem is not fixed yet.

[Shyam-Chen]

[thany]

@Shyam-Chen Can you explain what you mean?

[Shyam-Chen]

@thany There are two "Vue - Official" extensions on the VS Code marketplace.

[thany]

Yes, one is 2.0.10 and the other is 2.0.12.

I'm not sure what to do with your comment, since I already said I've installed 2.0.12.

[Shyam-Chen]

I also installed 2.0.12, but I didn't encounter this issue. However, I disabled Deno and Svelte. And updated UnoCSS to 0.59.2.

• VS Code: 1.88.1
  • Vue: 2.0.12
• vue: 3.4.21
• vue-tsc: 2.0.13
• typescript: 5.4.4

[thany]

Well then, don't break it, I guess 😀

What is the best way to diagnose this issue and give more information that may lead towards a fix or workaround?

[thany]

Again, kindly asking what information I should bring in, in order to come to a resolution?

Just for reference, here's another fun one:

And it goes randomly different for each character changed, for funsies I guess 😀

[davidmatter]

Is this one still an issue for you in the latest 2.x? Can you provide example code so we can reproduce it?

[thany]

There is no specific code that reproduces this problem. It just sort of happens "at some point". There doesn't seem to be a clear reproduction path. Just start coding, I guess, is all I can come up with for now.

[moritz-baecker-integra]

I've noticed it happening with <script setup lang="ts"> components as well.
It happens pretty often if i change branches and if there are a lot of changes.
Also causes recommendations to break for me, but that could be an additional separate problem.

Once i restart the Vue & Ts Server it works fine again.

Vue - Official 2.2.0
VSCode 1.96.4

[moritz-baecker-integra]

Anything i can provide to get this resolved? As before mentioned it's not based on a reproduction repo since it just happens sometimes not depending on the code base. This ticket is open for quite some time and it happens very often for me. Multiple times a day.