Template not treated as HTML in SFC in VSCode

vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js

https://marketplace.visualstudio.com/items?itemName=Vue.volar

MIT License

5.58k stars 376 forks source link

Template not treated as HTML in SFC in VSCode #4016

Open gianLuigiL opened 4 months ago

gianLuigiL commented 4 months ago

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 commented 3 months ago

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

gianLuigiL commented 3 months ago

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 commented 3 months ago

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

gianLuigiL commented 3 months ago

Is there something actionable i can do to help?

so1ve commented 3 months ago

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

hermesjpappas commented 2 months ago

@gianLuigiL Any luck solving this?

johnsoncodehk commented 2 months ago

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

gianLuigiL commented 2 months ago

@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 commented 1 week ago

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 commented 1 week ago

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? https://github.com/vuejs/language-tools/pull/4452

OsidAbu-alrub commented 1 week ago

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 commented 6 days ago

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