The official documents point out some limitations of the TS plugin: https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin#whats-a-language-service-plugin

But what I am care about is that when using both TS plugin and Volar in a single project, the DX is not smooth enough, because it takes more time to update all language service instances while typing. And take over mode can solve this problem.

TS plugin became an independent extension in 0.27.22, users can choose TS plugin or take over mode by themselves.

Yes when take over mode activated, vue language server provide intellisense, type check and all the language features of ts for .ts.

Currently (v0.27.23) you need open a .vue file to active take over mode.

I have read this multiple times and still don't understand what is the recommended way.

The title answered your question.
This post is not to say the recommended way, this post just say the replacement of TS plugin.
In other words, if you are using TS plugin, please change to take over mode. It you are not using TS plugin, ignore this post.

As far as I understand Volar, VueDx and builtin Typescript support they all offer typescript and potentially do duplicate work. Volar by default disables this feature, is it because it's not as good as others?

To be honest, this question is very rude.
Volar disabled TS plugin by default because users expected the extension effect to *.vue not *.ts. So it should optional and default disabled.

Then we have VueDx and builtin Typescript support (TypeScript and JavaScript Language Features) duplicating each other. Which one shall we enable to have most smoothest operation for Volar?

Where did you see that Volar should be use with VueDX?
VueDX is a TS plugin and it's designed to use with Vetur. With Vetur + VueDX you can get complete vue language support in *.vue + *.ts.
I have a different vue language support opinion, so I create Volar and it own TS plugin.
Your options should be Vetur + VueDX (optional), or Volar + Volar TS plugin (optional), not Volar + VueDX.

In short, what is the recommended setup for Volar?

I would recommend Volar + shims-vue.d.ts for you. Don't use TS plugin / take over mode if you have not idea what is it for.

@johnsoncodehk there was no meant any rudeness in my question, quite the opposite, we are raising question because the work is appreciated. I hear everywhere that Volar is the coolest extension to work with Vue3 and Typescript. But then I feel I am not using it properly, because, to be honest, there are no instructions and I have to get to understand it from tips and pieces around. Many of these pieces information are either outdated or conflict with each other. So it will be great to have essential info on home page or vscode page.

That is the reason I am asking these questions.

It says on the website (though not on the extension page in VsCode) to not to use Volar with Vetur. But it doesn't say anywhere to not to use it with VueDX.

It would be really useful to add missing install instructions so that user could follow that. If it is just installing volar and using it with default settings that would be enough to say, but at least user would know that they are doing it right. even the information on this discussion page, how users are supposed to find this?

Also, it doesn't say on extension page in vscode what the features Volar has, I only know about Volar from some good feedback I hear, but the page itself doesn't tell much about Volar's features.

Some other extensions do 1-2 small things and write as if revolutionising the world, whereas here Volar does have many features, but it is very modest and doesn't tell about it.

Thanks

I had this same issue.

The solution for me, was to edit you settings.json in the .vscode folder of your project/repo. There's a setting there from volar that you need to remove.

It's not the setting in the User Preferences (where it also shows up for some reason.

Additionally: I removed the Typescript Volar extension and disabled the built-in TS extension as well in order to enable take-over mode and that combo seems to work.

Okay, unfortunately this doesn't work properly.

Disabling the built-in extension will break TS Jest in VSCode and it'll throw errors in the IDE. I had to enable it again unfortunately.
@johnsoncodehk what are your thoughts on this?

What are the limitations of Take Over Mode? section mentioned, take over mode may have different behavior to built-in TS extension, because volar try to imitate built-in TS extension, and very hard to completely do it.

Please think different behavior case is a bug, open a issue and provide a repro case.

Please check @TheDutchCoder's reply.

as i understand from this page, installing typescript vue plugin is part of enabling the take over mode.

nooooo it's not. "TypeScript Vue Plugin" totally irrelevant with take over mode.

@johnsoncodehk It looks like people are going to install TypeScript Vue Plugin for Takeover mode because it's from the Vue documentation: https://vuejs.org/guide/typescript/overview.html#takeover-mode

I updated the Vue doc as per your comment: vuejs/docs#1863

I love your work, keep it up :)

3*

not important but nice to have. If someone uses take over and opens a ts file instead of a vue file when he first loads vscode, intellisense won't be there. He has to open a vue file to initialize this. again not important but nice to have. When free from fixing issues think about this too thanks

This is difference request :S, this is config in

https://github.com/johnsoncodehk/volar/blob/aad9b12196a3aad02e33de966cdd8eb5daa9d5b8/extensions/vscode-vue-language-features/package.json#L26-L29

Unfortunately it seem that it can't config by user settings.

I totally understand

Hi @johnsoncodehk, I guess @soulsam480 asking for adding "onLanguage:typescript" to activationEvents. Since take over mode takes the place of internal Typescript plugin, this makes sense to me. I encountered this problem while working on VueUse. When I launch VS Code mostly index.ts is the first file I see and Typescript intellisense will not be enabled until I open demo.vue.

@sibbng yes I just found I misunderstood. :)

The problem is that we should avoid volar active on a pure TS project, so we can't just add onLanguage:typescript to activationEvents, otherwise it will be a bigger harassment.

I have a idea to resolve it, still have to get some try.

@sibbng yes I just found I misunderstood. :)

The problem is that we should avoid volar active on a pure TS project, so we can't just add onLanguage:typescript to activationEvents, otherwise it will be a bigger harassment.

I have a idea to resolve it, still have to get some try.

Yes that's also true. Thanks for considering this issue.

Supported in eda4612

Ok, I confirmed: only Vue Language Features (Volar) (volar) needs to be installed, as after disabling builtin TypeScript plugin and not installing TypeScript Vue Plugin (Volar) (vscode-typescript-vue-plugin), I saw the tooltip in the VS Code UI telling me take over mode is enabled.

TypeScript Vue Plugin is a plugin of TypeScript and JavaScript Language Features, so when you disabled TypeScript and JavaScript Language Features, TypeScript Vue Plugin just no effect.

Hi @sodatea, this is actually a bug in volar's internal mapping, and the processing of the TS plugin is more complicated. Please track #435.

Related to #918

Hi @crystalfp, this is intentionally behavior, in case users got some problems they don't have it before, we need to avoid users don't know where are the problem from. (I can't guarantee that take over mode is as stable as TypeScript and JavaScript Language Features)

And we also need to avoid users forgot have been take over mode enabled, and how to disable it.

It is really annoying, I would think if a user specifically sets it to disable the popup, they'll remember that they have 'take over mode' enabled.

@MoishyS not only for users themselves, but also third parties to see, to avoid wasting hours of bug fixes when your colleagues encounter inconsistent behavior. If you really expect this, nice to have an issue.

It is really annoying！We need a configuration to disable it！Or i can pr for it

@rottenpen Please open a feature request for tracking.

Same with #471 (reply in thread), please deem difference behavior is a bug, and nice to have an issue.

Please track #974.

more than that jest & playwright tests not working properly and need to include the types in tsconfig.ts@types prop + ctl+space doesn't work inside objects after newline ex:

import type { Config } from "@jest/types"; // <=== I must include `@jest/types` in `tsconfig.ts` to make it work, whenever NO NEED in TS
const config: Config.InitialOptions = {
 preset:[], // <== here work if the cursor position after comma
  // <== here doesn't work if the cursor position after space or newline
}

Also Vetur provide extra features such as Snippet,Emmet,Component Data ....

Since I'm sure I can't contribute to VS Code plugins better than Volar creators 😄 , I turned back to Vetur.

you should only disable the built in ts extension for the workspace you want to turn on Take Over Mode

If you can provide a example repo I would be able to look on your use case.

@johnsoncodehk the repo i talk about is open-source : https://github.com/Cap-go/website
it came from vitesse boilerplate, and i added supabase deno functions ( https://deno.com/blog/supabase-functions-on-deno-deploy#:~:text=If%20you%20haven't%20heard,and%20a%20user%20management%20system. )

i fixed the issue not by doing .vscode folder everywhere but just adding

  "deno.enablePaths": [
    "./supabase/functions"
  ]

in the root

You could open a feature request.

It seems a new features of TS extension. You could open a feature request.

You can see a clearer steps explanation here: https://vuejs.org/guide/typescript/overview.html#takeover-mode

Not the same issue. This is due to the extension renaming.
Please edit the .vscode/extensions.json file in your project, and change the johnsoncodehk to Vue.

Yes. :)

I totally understand your view. There's no such thing as consensus or agreement on most things. It always gets political at some point.

Frontend development is exhausting. Backend on the other hand is a little more scientific, easier to deal with.

I present you The Tower of Babel with layers!

I guess we can be thankful that the web languages are not written in haXkell or C++ with all their own set of weird and quirky requirements just to build!

I can't comment without a repro code for the first error.

TS2339 and unknownAtRules is expected error, you can inhibit it with @mouseup="($event.target as YourEventType).showPicker()" and add "css.lint.unknownAtRules": "ignore" to project's .vscode/settings.json.

Sorry, it's not possible. Extension cannot disable another extension by itself.

Have a look here: https://nvim-lsp.github.io/configurations/volar/#lsp-overview

You don't need that in WebStorm.

In fact, I see now that Takeover Mode itself has been deprecated:

Sounds like the initial post needs to be updated again. 😁

Confused. I have setup Takeover Mode long time ago and then forgot everything related to it. Should I make anything to accommodate all these turns?

@crystalfp No. Just re-enable the built-in typescript plugin.

What is your IDE?

@CofCat456 Hi, It's the same for me,
the Visual Studio Code version is 1.93.0