Template not treated as HTML in SFC in VSCode

[gianLuigiL]

Updating to latest official vue extension stopped vscode from treating the template section in Vue SFC as HTML.
Example: auto completion of quotes after the equal sign stopped working.

Adding :test= will not trigger automatic quotes insertion anymore. In common HTML files this works as expected.

[so1ve]

I can't reproduce this. Could you please share a video?

[gianLuigiL]

screencast-bpconcjcammlapcogcnnelfmaeghhagj-2024.03.07-09_23_08.webm
Yes, thanks.

In this video notice how in the previous version:

• The closing angle bracket on the opening <Accordion> tag triggered autocompletion for the closing </Accordion> tag.
• The attribute hello= triggered automatically adding the quotes. They are not inserted automatically anymore.
  It appears all behaviours defined for HTML in vscode stopped applying to the template section of SFC

[so1ve]

Accordion doesn't have correct highlight so it seemed that the plugin isn't loaded correctly.

[gianLuigiL]

Is there something actionable i can do to help?

[so1ve]

Sorry I'm not sure how to deal with this part, we may wait for @johnsoncodehk's input

[hermesjpappas]

@gianLuigiL Any luck solving this?

[johnsoncodehk]

@gianLuigiL Can you reproduce this problem with v2.0.12?

[gianLuigiL]

@gianLuigiL Can you reproduce this problem with v2.0.12?

Yes still stuck on the same behaviour. No auto closing tags and no auto closing quotes.
I'm running 1.8.27 for now.

[OsidAbu-alrub]

Any updates on this? This is still happening

TS Version: 5.5.2
VSCode version: 1.90.2
OS: Darwin arm64 23.5.0

Only solution that currently works is what @gianLuigiL mentioned (running anything below 2.0.20)

[OsidAbu-alrub]

I went through every version from 1.8.27 until 2.0.19 and syntax highlighting in template was working as expected with typescript version 5.4.5. With 5.5.X it breaks again

Anything above 2.0.19 release with any typescript version is broken on vscode for me

Maybe this PR had something to do with it? #4452

[OsidAbu-alrub]

might've found the cause

The Hybrid Mode setting was set to auto by default. And it was being enabled in Vue files. I disabled it, upgraded both Vue extension to latest version (2.0.22) and upgraded Typescript to (5.5.2). Everything works as expected now.

[OsidAbu-alrub]

Another update

Disabling Hybrid Mode setting fixed all .vue files related issues. But now any imports from .vue file into a .ts will result in typescript screaming at you