feat(vscode): automatically enable Hybrid Mode

[johnsoncodehk]

Closes #4131

This introduces the default value of "auto" for vue.server.hybridMode, which automatically enables it based on the compatibility of installed TS plugin extensions with Hybrid Mode.

Currently known compatibility

Extension ID	Compatible	Requirement
unifiedjs.vscode-mdx	✅
astro-build.astro-vscode	✅
ije.esm-vscode	✅
johnsoncodehk.vscode-tsslint	✅
VisualStudioExptTeam.vscodeintellicode	✅
bierner.lit-html	✅
svelte.svelte-vscode	✅	svelte.svelte-vscode >= v108.4.0 (PR: sveltejs/language-tools#2317)
mxsdev.typescript-explorer	✅
jenkey2011.string-highlight	✅
miaonster.vscode-tsx-arrow-definition	✅
runem.lit-plugin	✅
kimuson.ts-type-expand	✅
p42ai.refactor	✅
styled-components.vscode-styled-components	✅	vue.volar >= v2.0.24 (PR: volarjs/volar.js#216)
Divlo.vscode-styled-jsx-languageserver	✅	vue.volar >= v2.0.24 (PR: volarjs/volar.js#216)
nrwl.angular-console	✅	vue.volar >= v2.0.24 (PR: volarjs/volar.js#216)
denoland.vscode-deno	❌

NPM Package ID	Compatible	Requirement
typescript-lit-html-plugin	✅	vue.volar >= v2.0.24 (PR: volarjs/volar.js#216)
typescript-plugin-css-modules	❌

If you know of any other compatible TS plugin extensions, please report them here so that we can update the whitelist.

To verify compatibility, simply set "vue.server.hybridMode": true in your VSCode settings and reload VSCode to check if TS support in .vue files is working as expected.

[imal1]

bierner.lit-html

[peruibeloko]

denoland.vscode-deno should be compatible, as long as its not enabled (which is not by default)

The setting for this is deno.enable and should be set on a workspace basis

[Soviut]

I got the message that jpoissonnier.vscode-styled-components is incompatible, but I don't even have that installed.

[rogadev]

I'd really love if this message stopped popping up every time I open one of my Nuxt applications. 🤷

[cannap]

got this

[johnsoncodehk]

@rogadev You can disable svelte.svelte-vscode in the Vue project workspace to have Hybrid Mode automatically enabled, or set "vue.server.hybridMode": false to explicitly disable Hybrid Mode to avoid message box.

[johnsoncodehk]

@peruibeloko Did you find that installed denoland.vscode-deno and setting deno.enable to true breaks Hybrid Mode?

[peruibeloko]

@johnsoncodehk I'll do some testing tomorrow on a clean project using pnpm create vite, but IIRC Deno doesn't even has to be enabled for Volar to report it

[k-paxian]

[johnsoncodehk]

@k-paxian It is known that denoland.vscode-deno is incompatible with Hybrid Mode when enabled. I will check for nrwl.angular-console.

[Kerumen]

Same as @Soviut, I have the message about jpoissonnier.vscode-styled-components being incompatible but I don't have this installed.

[johnsoncodehk]

@Kerumen I think the extension ID of jpoissonnier.vscode-styled-components has been changed to styled-components.vscode-styled-components, have you installed that extension?

[Kerumen]

@Kerumen I think the extension ID of `jpoissonnier.vscode-styled-components` has been changed to `styled-components.vscode-styled-components`, have you installed that extension?

Maybe in the past but I don't have it installed anymore. I tried to reinstall / uninstall it and it still displays the same message.

[keaedwar]

Still getting this in the release below

Message is below

I can't figure out what plugin it doesn't like. Any clues on how to figure that out would be helpful.
Thanks!

[huqedato]

same here

[xuedaobian]

same here

[zakariabinsaifullah]

same here

[yvoste]

same here

[Soohti]

Same issue with Copilot Chat

[jmaister]

I don't know what this means, take the best guess and remove this message:

[13651871775]

Hybrid Mode is disabled automatically because there is a potentially incompatible GitHub.copilot-chat TypeScript plugin installed.

[mouthguo]

bytedance-microapp.microapp

[gluons]

Maybe the fix of copilot warning is coming.

#5044 (comment)
#5047

[jvhuaiying]

[bee1an]

[HoFaks]

[liujinze666]

[kastanientorte]

I've encountered this situation too.

[ccimage]

[alexovn]

Stop pollute this thread. One or two messages on this problem were enough. Wait for the fix and turn on HybridMode to true explicitly for now

[HitsoKeyco]

VSC alert !! Hybrid Mode is disabled automatically because there is a pootencially incompatible GitHub.copilot-chat Typescript plugin installed.

[antfu]

Put this setting to explicitly enable hybrid mode and bypass the warning:

{
  "vue.server.hybridMode": true
}

[franciscolourenco]

samxchen.ts-viewer-extension

[moazzem-pixel]

Thanks for support

[DailyInvestors]

Closes #4131

This introduces the default value of "auto" for vue.server.hybridMode, which automatically enables it based on the compatibility of installed TS plugin extensions with Hybrid Mode.

Currently known compatibility

Extension ID Compatible Requirement
unifiedjs.vscode-mdx ✅
astro-build.astro-vscode ✅
ije.esm-vscode ✅
johnsoncodehk.vscode-tsslint ✅
VisualStudioExptTeam.vscodeintellicode ✅
bierner.lit-html ✅
svelte.svelte-vscode ✅ svelte.svelte-vscode >= v108.4.0 (PR: sveltejs/language-tools#2317)
mxsdev.typescript-explorer ✅
jenkey2011.string-highlight ✅
miaonster.vscode-tsx-arrow-definition ✅
runem.lit-plugin ✅
kimuson.ts-type-expand ✅
p42ai.refactor ✅
styled-components.vscode-styled-components ✅ vue.volar >= v2.0.24 (PR: volarjs/volar.js#216)
Divlo.vscode-styled-jsx-languageserver ✅ vue.volar >= v2.0.24 (PR: volarjs/volar.js#216)
nrwl.angular-console ✅ vue.volar >= v2.0.24 (PR: volarjs/volar.js#216)
denoland.vscode-deno ❌
NPM Package ID Compatible Requirement
typescript-lit-html-plugin ✅ vue.volar >= v2.0.24 (PR: volarjs/volar.js#216)
typescript-plugin-css-modules ❌
If you know of any other compatible TS plugin extensions, please report them here so that we can update the whitelist.

To verify compatibility, simply set "vue.server.hybridMode": true in your VSCode settings and reload VSCode to check if TS support in .vue files is working as expected.

Just experienced the same Problem. It is set on auto, but it is saying incompatible. Running a flex, could be the reason. But running a flex to hit Google with all Google, or all Microsoft haha

[matheussouza-pwn]

It says it's incompatible with Postman as well.

[seksity]

[isimmons]

Same as seksity above with postman extension. I don't even know what hybrid mode is. Vue extension should be completely silent and inactive if I'm not in a Vue or Nuxt project anyway. I just opened a markdown file to edit.

Please turn off. Thanks

[ceferrari]

Same with Postman extension

[xxxyalaxx90xxx]

Schließt #4131

Dadurch wird der Standardwert von for eingeführt, der ihn basierend auf der Kompatibilität der installierten TS-Plug-In-Erweiterungen mit dem Hybridmodus automatisch aktiviert."auto"``vue.server.hybridMode

Derzeit bekannte Kompatibilität

ID der Erweiterung Kompatibel Anforderung
unifiedjs.vscode-mdx ✅
astro-bauen.astro-vscode ✅
ije.esm-vscode ✅
johnsoncodehk.vscode-tsslint ✅
VisualStudioExptTeam.vscodeintellicode ✅
bierner.lit-html ✅
svelte.svelte-vscode ✅ svelte.svelte-vscode >= v108.4.0 (PR: sveltejs/language-tools#2317)
mxsdev.typescript-explorer ✅
jenkey2011.string-highlight ✅
miaonster.vscode-tsx-pfeildefinition ✅
runem.lit-plugin ✅
kimuson.ts-Typ-Erweiterung ✅
p42ai.refactor ✅
styled-components.vscode-styled-components ✅ vue.volar >= v2.0.24 (PR: volarjs/volar.js#216)
Divlo.vscode-styled-jsx-languageserver ✅ vue.volar >= v2.0.24 (PR: volarjs/volar.js#216)
nrwl.angular-konsole ✅ vue.volar >= v2.0.24 (PR: volarjs/volar.js#216)
denoland.vscode-deno ❌
NPM-Paket-ID Kompatibel Anforderung
typescript-lit-html-plugin ✅ vue.volar >= v2.0.24 (PR: volarjs/volar.js#216)
typescript-plugin-css-module ❌
Wenn Sie weitere kompatible TS-Plugin-Erweiterungen kennen, melden Sie diese bitte hier, damit wir die Whitelist aktualisieren können.

Um die Kompatibilität zu überprüfen, legen Sie einfach die VSCode-Einstellungen fest und laden Sie VSCode neu, um zu überprüfen, ob die TS-Unterstützung in .vue-Dateien wie erwartet funktioniert."vue.server.hybridMode": true

[BasementWoodworker]

false positive

[DailyInvestors]

I had this problem occur as well, but it was nothing to do with VUE that caused this. If you have .dotnet installed, force the updated SDK install. This is a open vuln, and in my opinion I think this affected the Vue. After I debugged and uninstalled the hybrid request faded away. Their are always false errors, but at times the true Malicious actors will sabotage anything and everything.