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.

The following TS plugin extensions are currently known to be compatible:

Extensions

• unifiedjs.vscode-mdx
• astro-build.astro-vscode
• ije.esm-vscode
• johnsoncodehk.vscode-tsslint
• VisualStudioExptTeam.vscodeintellicode
• bierner.lit-html (Added in v2.0.14)
• svelte.svelte-vscode (>=108.4.0, refs: fix: volar ts plugin compatibility sveltejs/language-tools#2317)

The following TS plugins are currently known to be incompatible.

Extensions

• styled-components.vscode-styled-components
• svelte.svelte-vscode (<108.4.0)
• Divlo.vscode-styled-jsx-languageserver
• denoland.vscode-deno (When deno.enable is true)
• nrwl.angular-console

NPM packages

• typescript-lit-html-plugin
• 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.