2.0 Hybrid Mode Early Preview & Feedback Thread

[johnsoncodehk]

In the next 2.0 release, we'll implement typescript support through TS plugin integration.

Since Vue no longer needs to run its own TS language server, this will result in a significant reduction in memory usage and an increase in performance. (This was previously done via takeover mode, but is no longer necessary.)

The basic language support is there now, but there is still a lot of additional functionality that needs to be re-implemented through the TS plugin, which won't be done anytime soon.

For those of you who wish to participate in early testing, I will keep posting new versions of the TS plugin integration in this post until the #3788 merge.

There are still a lot of issues with earlier versions, and for the obvious ones it should be fixed soon, so if you find something that hasn't been fixed, then I may have missed it, so please raise it in this thread instead of opening an issue.

Early Preview Download

After downloading and unzipping it, you can install it via the VSCode "Extensions: Install from VSIX..." command.

• v5 (2023-12-15): volar-2.0.0-94c4653e.5.vsix.zip
• v4 (2023-12-11): volar-2.0.0-f7c91202.4.vsix.zip
• v3 (2023-12-10): volar-2.0.0-17cbf2dc.3.vsix.zip
• v2 (2023-12-08): volar-2.0.0-d6afc068.2.vsix.zip
• v1 (2023-12-08): volar-2.0.0-df8b000a.1.vsix.zip

[haoziqaq]

Reduced memory usage by 300m!

[they-cloned-me]

🔥 Thank you Johnson

[troy351]

Could you provide any tips for why Hybrid Mode not possible before?

[warmthsea]

🔥

[warmthsea]

It would be great if .vue file could be automatically repaired and imported like .ts file.

[so1ve]

It should work in 2.0

[zouhangwithsweet]

note: <template v-for> key should be placed on the <template> tag.

[rchl]

After downloading and unzipping it, you can install it via the VSCode "Extensions: Install from VSIX..." command.

Maybe it's a bit early for that but at some point maybe you could also distribute it as a plain plugin so that it would be easier for other editors than VSCode to utilize it.

I guess it could be distributed as a separate npm package.

[rchl]

Do you plan to support experimentalAdditionalLanguageModules in this approach?

[rchl]

Just a heads up that typescript-language-features handling of plugins might be a bit lacking in case of workspace configuration handling. For example due to logic like here, it will apply javascript.* workspace configuration for .vue files.

[Loongphy]

If you got errors like Cannot find name '__VLS_ctx'., add "types": ["vite/client"] in the tsconfig.json.

[johnsoncodehk]

The first video problem is from upstream and it will fix by microsoft/vscode#200945.
The second video problem and memory usage regression should be fixed in v5 by volarjs/volar.js@a0d9295 and #3803, please take a try. Thanks!

[yyx990803]

I noticed in 2.0 the syntax highlighting seems to be a bit off - components are not getting a different color from native elements.

[so1ve]

This could be caused by semantic tokens?

[Tenrys]

I couldn't get any auto-completion working on them as well. Auto-importing them made them auto-import and auto-complete as MyComponentVue.

[Tenrys]

I noticed that the language server was freaking out, constantly finding errors and then cleaning them out, refreshing constantly.

[Tenrys]

I should mention that this happens with this feature enabled:

[Cheerwhy]

component‘s highlight isn't working in template

[Eazash]

After installing v5, ts language server crashes and this is the output

[productdevbook]

this happens to me a lot too. but I don't know where it originated from.

[Eazash]

v4 doesn't crash the Typescript language server but it does have the same message

[rennzhang]

Hi, also I see yesterday's update has been closed #3329 ，But problems(#3329 (comment)) remain

Maybe I should open a new issue?

You can follow these steps to repeat

I have provided the following minimal reproducible cases, hoping to provide some help。

repo：https://github.com/rennzhang/vue3-ts-error-report

This project uses the unplugin-auto-import plug-in.

1. Create a new folder under views, Like "aaa"
2. Create index.vue under "aaa"
3. Enter the following code & npm run dev

<template>
  <div></div>
</template>

<script lang="ts" setup>
let a = ref(1);
</script>

<style scoped lang="less"></style>

The following error will occur

Name not found “ref”。ts(2304)

[sadeghbarati]

@rennzhang

Just tested your repository (with VSCode Profiles) with Volar v1.8.27 and volar-2.0.0-94c4653e.5.vsix both of them working well

Also check this boilerplate seems a better starter project

https://github.com/dishait/tov-template

---

With Volar <=1.8.27

extensions

• Vue Language Features (Volar)

• TypeScript Vue Plugin (Volar)

configurations

• No need to add shims-vue.d.ts when using Volar

• Disabled VSCode TypeScript built-in (Takeover mode)👇

  Details

  

• Add vueTemplate: true to your Vite AutoImport plugin

---

With volar-2.0.0-94c4653e.5.vsix (>=2)

extensions

• Vue Language Features (Volar) (Manually installed version of volar with that .vsix file)

configurations

• No need to add shims-vue.d.ts when using Volar

• No need to disable TypeScript built-in in Volar 2? (No Takeovermode)

• Add vueTemplate: true to your Vite AutoImport plugin

[rennzhang]

Thank you very much, but after I adjust it according to your steps, there is still the same problem when using Volar <= 1.8.27.

But switching to Volar-2.0.0-94C4653E.5.VSIX (> = 2) is okay. Since this is so, I plan to use V2 directly in advance.

[rodrigocfd]

I have project-wide error reporting enabled for TypeScript.

In the example below, I change the name of a function, thus causing an error in the files that import it. When an error happens, the affected files should go red... but instead, the error report keeps going on and off:

I'm using:

• Volar v5 (2023-12-15);
• VSCode v1.85.2;
• Linux Mint v21.3.

[Eazash]

I'm seeing an issue where selecting a component from autocomplete adds an import statement in nuxt projects. Also, if there's no script setup section, the import statement simply goes to the top of the file.

Screen.Recording.2024-01-23.at.8.35.35.AM.mov

I'm using:

• Volar v5 (2023-12-15)
• Vscode insiders, January 2024 (version 1.86)
• Vue 3.43
• Nuxt 3.9.1

Not attaching a reproduction repo as any starter nuxt app has the same issue

[jaskang]

Do we have the latest preview version available? plz 🙏

[baixiaoyu2997]

test with v5
the issue still: #3390