Use Take Over Mode instead of TS Plugin

[johnsoncodehk]

Note

Some content of this post is outdated, please check official document instead of this post.

👉 https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode

Original content

What is Take Over Mode?

In the past, we have explored a variety of language support modes for TS and Vue, namely:

Vetur Mode: Vue + TS language support provided by different extensions.
VueDX Mode: Realized by TS Plugin, Vue + TS language support also provided by VSCode built-in TypeScript extension.
Volar Mode: Similar to Vetur, but use TS Plugin to patching TS language support additional.

What's problems with Volar Mode?

• For each TS project, VSCode built-in TypeScript extension and Volar create 2 language service instances, and TS Plugin proxy program has also additional language service instances for built-in TS extension, finally we have 6 language service instances for each TS project. In theory, there is 200% ~ 300% the memory usage and CPU usage.
• Since VSCode does not support the TS Plugin enable setting, you must re-enable TS Plugin every time Volar is updated.

How Take Over Mode resolve Volar Mode problem?

• Take Over Mode don't use VSCode built-in TypeScript extension, only use Vue language server to provided Vue + TS language support. So we only have 2 language service instances.
• There is no hacking in this approach, we no longer need to reload vscode for TS plugin after each updated extension.

How to enable Take Over Mode?

1. Update Volar to 0.27.17.
2. Disable built-in TypeScript extension:
   2.1. Run Extensions: Show Built-in Extensions command
   2.2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
3. Reload VSCode, and then open any vue file to trigger Volar activation (no longer need in 0.28.4).

How to disable Take Over Mode?

1. Run Extensions: Show Built-in Extensions command
2. Find TypeScript and JavaScript Language Features, right click and select Enable (Workspace)
3. Reload VSCode

What are the limitations of Take Over Mode?

• Vue language server tries to provide all the built-in TS extension features, but there will always be some features drop behind, missing, or bugs.
  For example, Vue language server does not support tsconfig.json properties intellisense (supported 0.30.3), and the experimental feature Inlay hints (supported 0.34.8).
• Volar has known performance issues with monorepo support. If your TS project is monorepo, language support in *.ts may be slower than before. (Fully support for monorepo #348)
• VSCode user TypeSciprt settings not working, because Volar can't get TS extension settings when TS extension disabled. But worksapce TypeSciprt settings still working.

[ghost]

Evan recently said during the Nuxt Nation Q&A that the reason takeover mode and vue-tsc exists because the TypeScript plugin API is not flexible enough.

In what ways are TS plugins insufficient? Is this about difficulty parsing files that don't have the .ts/.js extension - so .vue files (obviously)? Rahul mentions it here https://twitter.com/3nuc1/status/1306642521938890754

Are there any issues in the TypeScript repo one could follow regarding this?

[johnsoncodehk]

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.

[soulsam480]

Hi @johnsoncodehk , is the vue language server going to provide intellisense and type check for .ts files ? also is it going to activate when working on a .ts file and provide all the language features of ts ?

[johnsoncodehk]

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.

[husayt]

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

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?

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?

In short, what is the recommended setup for Volar?

@johnsoncodehk and Rahul have done amazing work on this project and Vuedx and I feel I am wasting that effort because I am not configuring Volar and Vuedx properly. some setup recommendations for Vue3 (With Vite) would be very appreciated

Thanks

[johnsoncodehk]

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.

[husayt]

@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

[bitflak]

I've done the following steps:

• installed Vue Language Feature (Volar) and Typescript Vue Plugin (Volar)
• Enabled take over mode in the settings
• Disabled TypeScript and JavaScript Language Features (Workspace)

But the message keeps popping up and I have no intellisense in .ts files.

[TheDutchCoder]

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.

[TheDutchCoder]

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?

[johnsoncodehk]

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.

[husayt]

One more thing @johnsoncodehk the popup is contradicting and confusing:

as i understand from this page, installing typescript vue plugin is part of enabling the take over mode. But the message in pop up says use either plugin or take over mode and what I read there is "use take over mode instead of typescript vue plugin".

Is this what it meant to say?

use takeover mode with typescript vue plugin(volar) or VScode builtin Typescript extension

[johnsoncodehk]

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.

[Joakal]

@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 :)

[stafyniaksacha]

Recommanded steps to have Vue Language Features (Volar) installed with typescript support:

1. Go to the extensions tab
   
2. Search, install Vue Language Features (volar) and enable it only inside active vue 3 workspaces
   (do not install TypeScript Vue Plugin (Volar), next steps will replace it)
   
   
3. Still in extensions tab, search for @builtin typescript and disable TypeScript and JavaScript Language Features only inside active vue 3 workspaces
   
   
4. Reload your VS Code project
5. You will see Take Over Mode enabled message, meaning that all typescript features are provided by Vue Language Features (Volar)
   

Q/A

• Q: Why we need to disable TypeScript and JavaScript Language Features ?
  A: To better support typescript in *.vue files, we need to have fine access to the typescript service. Currently, due to how vscode plugin api is made, we can not enhance or disable this built-in feature within the plugin. (see more details here)
• Q: Why do we need to do these steps only in vue 3 workspaces and not just install it globally?
  A: Vue Language Features (Volar) provide same features as TypeScript and JavaScript Language Features but with enhanced features for vue 3.
  If you work on vue 2 or nuxt 2 projects, Vue Language Features (Volar) plugin should not be enabled.
• Q: What about Vetur and VueDX extensions?
  A: They both should be disabled in active vue 3 workspaces

[reslear]

3*

[mamduhhamad911-spec]

[soulsam480]

Hii @johnsoncodehk Hii, can we activate volar language features by opening a TS file when using take-over mode ? Is this possible to implement ?

[soulsam480]

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

[sibbng]

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.

[johnsoncodehk]

@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.

[soulsam480]

@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.

[johnsoncodehk]

Supported in eda4612

[trusktr]

Can you please clarify (add it above):

Does this mean to enable take over mode, we should not install the TypeScript Vue Plugin (Volar) (vscode-typescript-vue-plugin) plugin, and only install Vue Language Features (Volar) (volar)?

Or we should install both?

[trusktr]

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.

[johnsoncodehk]

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.

[haoqunjiang]

FYI, I just found another difference between Take Over Mode and TypeScript Vue Plugin (Volar):

• With TypeScript Vue Plugin (Volar), you can only Cmd + Click to Go to defintion to an aliased .vue path (e.g. @/components/HelloWorld.vue) from another .vue file (e.g. src/App.vue), but not from a .ts file (e.g. src/main.ts);
• With Take Over Mode, Cmd + Click works in any file.

[johnsoncodehk]

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.

[orimay]

It seems Volar Take Over mode can't be used with Yarn 3 PnP, as it takes over the workspace typescript, and .yarn packages stop being recognized, as Volar doesn't use yarn/sdks/typescript/lib

[johnsoncodehk]

Related to #918

[crystalfp]

Is there a way to disable the popup telling "Take Over Mode enabled." It is really annoying. Thanks!

[johnsoncodehk]

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.

[MoishyS]

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.

[johnsoncodehk]

@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.

[rottenpen]

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

[johnsoncodehk]

@rottenpen Please open a feature request for tracking.

[lisonge]

when i type / + * + *+ enter in .ts file, Function Comments will become

/**

 */
function x(){

}

instead of

/**
 * 
 */
function x(){

}

How to fix it ?

[johnsoncodehk]

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

[johnsoncodehk]

Please track #974.

[annymosse]

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.

[yangmingshan]

If I switch between vue project and non-vue project, do I need turn on/off Take Over Mode over and over again?

[MoishyS]

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

[riderx]

i was using takes over mode since long time and love it so far but inside one of my project i have cloud function in Deno and vs code Deno need, typescript been enable so i can't anymore.
Does someone have the issue too ?

[johnsoncodehk]

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

[riderx]

@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. )

[riderx]

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

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

in the root

[tomoat]

Can let the plug-in prompt disappear automatically in a few seconds? Every open vscode hint, but will not disappear automatically, I feel very annoying，As a developer I know how to do it directly, do not need to be kept

[johnsoncodehk]

You could open a feature request.

[houfeng0923]

can take over mode make typescript/javascript codelens setting work?

  "javascript.referencesCodeLens.enabled": true,
  "typescript.referencesCodeLens.enabled": true,

if not use take over mode, the reference count in ts/js ignore the references in .vue file .
but in take over mode, this feature is not work .

[johnsoncodehk]

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

[gwpantazes]

Take Over Mode is not compatible with SonarLint VSCode plugin which has a dependency on the built-in TypeScript and JavaScript Language Features.

When disabling TypeScript and JavaScript Language Features and with SonarLint enabled, this warning prompt shows:

Cannot disable 'TypeScript and JavaScript Language Features' extension alone. 'SonarLint' extension depends on this. Do you want to disable all these extensions?

The TypeScript Vue Plugin (Volar) is a better option for those who are using SonarLint.

[Itsjuanit]

Hello there, can any body do a simple video doing the steps of these config please? I'd appreciate it

[johnsoncodehk]

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

[Jeremy1973VDH]

Did all the steps several times, but this keeps appearing. What can I do?

g

[haoqunjiang]

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.

[jagoncalves14]

@johnsoncodehk is this something that is recommended by Volar?

[johnsoncodehk]

Yes. :)

[Marc-Pierre-Barbier]

If you have manual set ts files to Typescript, VS Code might default to plain text. In that case, click on “plain text” in the bottom right corner and select detect automatically.

[WestFarmer]

front-end world is crazy, too many inventors, learning something, when you feel enough, it's old and replaced.

I miss the era that dealing with html + css + js only.

[manojbaishya]

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.

[Sn3akyP3t3]

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!

[JavierMonleonLopezMW]

Hey there!

I am using VSCode with
Vue.volar v1.0.9
Vue.vscode-typescript-vue-plugin v1.0.9

And intellisense is complaining about TS errors that my colleagues with jetbrains don't have.

Some examples:
Default export of the module has or is using private name 'Props'.ts(4082)
https://github.com/johnsoncodehk/volar/issues/1232

Property 'showPicker' does not exist on type 'EventTarget'.ts(2339)
@mouseup="$event.target.showPicker()"

Unknown at rule @applycss(unknownAtRules)
<style scoped> .input { @apply p-2 w-full bg-gray-100 rounded-lg; } </style>

We have the same tsconfig files, with the same TS version. I also tried different volar versions, enabling take over mode, etc etc...

It's sad because I really like vscode but finally I'll have to switch to jetbrains..

[johnsoncodehk]

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.

[riderx]

Do someone know if we can setup takeover mode project wise?

Right now we have to make each people in the team do the takeover, i would like to have it set in .vscode/settings.json

[so1ve]

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

[9mm]

Can someone please explain what I have to do if I'm using Neovim and not VSCode?

I'm using volar in neovim LSP with no config, as well as the vue-tsc library on my new Nuxt 3 project. I'm not sure what else I have to do as everything I read is for vscode

[gegoune]

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

[fdemb]

does anyone know how to enable Takeover mode with JetBrains IDEs, e.g. WebStorm/PhpStorm? There's an option to use Volar (@vue/language-service), but I can't find Takeover mode toggle anywhere. Maybe it's running by default? I thought it isn't because it's way slower than VSCode on Takeover mode.

[so1ve]

You don't need that in WebStorm.

[ferdnyc]

The (updated) initial post here reports that the original content is outdated, and points to https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode as the latest documentation.

However, the linked section was removed three weeks ago, as part of vuejs/docs#2726 in response to the TypeScript Vue Plugin being deprecated here.

Does that mean these instructions are no longer needed at all? Should this be closed? (It's still linked to from various places, for example Fedora's website repo.)

[ferdnyc]

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

language-tools/CHANGELOG.md

Line 116 in 62410bd

- Takeover Mode has been deprecated. The extension now has the same performance as Takeover Mode by default.

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

[crystalfp]

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?

[so1ve]

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

[richard-ellison]

If someone, anyone please, could link to what config is suposed to be used now that would be a life saver. I have Vue components and ts files for pinia that cannot see each other in go to definition and go to referance. :(

[ilyaliao]

What is your IDE?

[tlgbltcn]

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

[qhanson55]

Is anyone having issues with the setting, Editor: Occurrences Highlight, not working in .vue files? "Take Over Mode" is not an option any more but having the "Vue - Official" extension doesn't seem to allow that setting on its own. Note, that this setting works in my .ts files just not for .vue files.

Edit: Appears to be workaround/fix here #4850 and #5263

[juliocastrodev]

Hi there, I was creating a TS plugin following https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin . It's meant to add some more autocomplete options in an internal tool we have.

It's working totally fine in VsCode but in IntelliJ is not working at all. Only way I made it work is by going to Language & Frameworks > Typescript > Vue and disable or use classic Typescript Service. So it seems Vue Language Server in take over mode is not really picking up my plugin. Is this expected behavior? Is there a way to fix it?

If there's no way around it, is there a way to create a plugin for Vue Language Server? I was not able to find any documentation or tutorial about it.

Thanks in advance for the help!