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.

[sapphi-red]

I got a message with miaonster.vscode-tsx-arrow-definition. It seems to be working with it.

[arnauddoub]

Same error with p42ai.refactor extension

[luxaritas]

Any chance for some clarification on why nrwl.angular-console is marked incompatible? Looking at https://github.com/nrwl/nx-console/tree/master/apps/nxls it seems like their language server is specifically focused on autocompletion for the Nx json configuration files, so I'm curious what's conflicting.

[johnsoncodehk]

@luxaritas Via volarjs/volar.js#216, nrwl.angular-console will be compatible with Hybrid Mode starting in the next version (v2.0.24).

[said12345plus]

Hybrid Mode is disabled automatically because there is a potentially incompatible MylesMurphy.prettify-ts TypeScript plugin installed.

[ShenQingchuan]

Hybrid Mode is disabled automatically because there is a potentially incompatible ShenQingchuan.vue-vine-extension TypeScript plugin installed.

I don't quite get it with this message but found this PR page, is there anything need to do in Vue Vine?

[so1ve]

@ShenQingchuan easy to resolve, add your extension to https://github.com/vuejs/language-tools/blob/master/extensions/vscode/src/common.ts#L47-L64. Created a pr #4543

[Sunny264]

[matvejs16]

@johnsoncodehk Can we kindly ask you to check for new reports? There is long time with no updates

[Soviut]

@matvejs16 This is a merged commit, you're not going to see any meaningful updates here. They will announce any fixes in releases.

[matvejs16]

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.

@Soviut I think you are incorrect.

[Soviut]

@matvejs16 that doesn't say the maintainers will issue a report, it says that people with problems can report them here and they'll add them to the whitelist. They are not going to publish the whitelist here.

So if you encounter an compatibility issue, you can leave a message saying which package caused the incompatibility, but if all the compatibility issues are solved, then this thread will be very quiet.

[matvejs16]

Thank you, @Soviut for sharing your perspective. I now better understand the reasoning behind your comments and your position on similar issues.

To clarify my intentions, I raised this concern here because I observed that the extension responsible for compatibility issues had been reported more than four months ago, yet it still hasn’t been added to the whitelist. I understand that sometimes users may inquire without checking the latest updates, but in this case, I made sure to verify that the problem persists before commenting. With several years of programming experience, I approached this thoughtfully, not to hasten the process but to inquire constructively.

Thanks again for your insight!

[Soviut]

@matvejs16 okay, that's reasonable. Just report which one you're still seeing and mention its absence from the whitelist.

[uppercaveman]

[leindfraust]

Is there any updates on https://marketplace.visualstudio.com/items?itemName=MylesMurphy.prettify-ts extension as @said12345plus have commented earlier?

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