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.

[fschroiff]

Literally any VSCode window I open I get a message

Hybrid Mode is disabled automatically because there is a potentially incompatible jpoissonnier.vscode-styled-components TypeScript plugin installed.

Not only for vue projects, but for literally any VSCode window I open. And I don't even have that "incompatible plugin" installed...

[pandres95]

Literally any VSCode window I open I get a message

Hybrid Mode is disabled automatically because there is a potentially incompatible jpoissonnier.vscode-styled-components TypeScript plugin installed.

Not only for vue projects, but for literally any VSCode window I open. And I don't even have that "incompatible plugin" installed...

This 👆

[darrelfrancis]

I get this with Github Copilot Chat. Interestingly it is specifically from the "Github Copilot Chat" (which I never use) and not the main "Github Copilot", but I don't seem to be able to install one without the other.

[stephanjohnson]

I get this with Github Copilot Chat. Interestingly it is specifically from the "Github Copilot Chat" (which I never use) and not the main "Github Copilot", but I don't seem to be able to install one without the other.

I am getting the same

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

[FabianMontoya]

I get this with Github Copilot Chat. Interestingly it is specifically from the "Github Copilot Chat" (which I never use) and not the main "Github Copilot", but I don't seem to be able to install one without the other.

Same Here

GitHub.copilot-chat TypeScript plugin installed.

[Zheng-Shuo]

I got the same issue. Are there any solutions now?

[jeoooo]

currently having this issue

[GuoJikun]

[Bourne115]

[Ahrjen]

[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
}