Use Take Over Mode instead of TS Plugin #471
Replies: 27 comments 53 replies
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @johnsoncodehk , is the vue language server going to provide intellisense and type check for |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
The title answered your question.
To be honest, this question is very rude.
Where did you see that Volar should be use with VueDX?
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. |
Beta Was this translation helpful? Give feedback.
-
|
@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 |
Beta Was this translation helpful? Give feedback.
-
|
I've done the following steps:
But the message keeps popping up and I have no intellisense in .ts files. |
Beta Was this translation helpful? Give feedback.
-
|
I had this same issue. The solution for me, was to edit you 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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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?
|
Beta Was this translation helpful? Give feedback.
-
|
Please check @TheDutchCoder's reply.
nooooo it's not. "TypeScript Vue Plugin" totally irrelevant with take over mode. |
Beta Was this translation helpful? Give feedback.
-
|
@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 :) |
Beta Was this translation helpful? Give feedback.
-
Recommanded steps to have
|
Beta Was this translation helpful? Give feedback.
-
|
3* |
Beta Was this translation helpful? Give feedback.
-
|
Hii @johnsoncodehk Hii, can we activate volar language features by opening a TS file when using take-over mode ? Is this possible to implement ? |
Beta Was this translation helpful? Give feedback.
-
I totally understand |
Beta Was this translation helpful? Give feedback.
-
|
Hi @johnsoncodehk, I guess @soulsam480 asking for adding "onLanguage:typescript" to |
Beta Was this translation helpful? Give feedback.
-
|
@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 I have a idea to resolve it, still have to get some try. |
Beta Was this translation helpful? Give feedback.
-
Yes that's also true. Thanks for considering this issue. |
Beta Was this translation helpful? Give feedback.
-
|
Supported in eda4612 |
Beta Was this translation helpful? Give feedback.
-
|
Can you please clarify (add it above): Does this mean to enable take over mode, we should not install the Or we should install both? |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I confirmed: only |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
FYI, I just found another difference between Take Over Mode and
|
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
Related to #918 |
Beta Was this translation helpful? Give feedback.
-
|
Is there a way to disable the popup telling "Take Over Mode enabled." It is really annoying. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
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 And we also need to avoid users forgot have been take over mode enabled, and how to disable it. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
It is really annoying！We need a configuration to disable it！Or i can pr for it |
Beta Was this translation helpful? Give feedback.
-
|
@rottenpen Please open a feature request for tracking. |
Beta Was this translation helpful? Give feedback.
-
|
when i type /**
*/
function x(){
}instead of /**
*
*/
function x(){
}How to fix it ? |
Beta Was this translation helpful? Give feedback.
-
|
Same with #471 (reply in thread), please deem difference behavior is a bug, and nice to have an issue. |
Beta Was this translation helpful? Give feedback.
-
|
Please track #974. |
Beta Was this translation helpful? Give feedback.
-
|
more than that 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 Since I'm sure I can't contribute to VS Code plugins better than |
Beta Was this translation helpful? Give feedback.
-
|
If I switch between vue project and non-vue project, do I need turn on/off Take Over Mode over and over again? |
Beta Was this translation helpful? Give feedback.
-
|
you should only disable the built in ts extension for the workspace you want to turn on Take Over Mode |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
If you can provide a example repo I would be able to look on your use case. |
Beta Was this translation helpful? Give feedback.
-
|
@johnsoncodehk the repo i talk about is open-source : https://github.com/Cap-go/website |
Beta Was this translation helpful? Give feedback.
-
|
i fixed the issue not by doing in the root |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
You could open a feature request. |
Beta Was this translation helpful? Give feedback.
-
|
can if not use take over mode, the reference count in ts/js ignore the references in .vue file . |
Beta Was this translation helpful? Give feedback.
-
|
It seems a new features of TS extension. You could open a feature request. |
Beta Was this translation helpful? Give feedback.
-
|
Take Over Mode is not compatible with SonarLint VSCode plugin which has a dependency on the built-in When disabling
The TypeScript Vue Plugin (Volar) is a better option for those who are using SonarLint. |
Beta Was this translation helpful? Give feedback.
-
|
Hello there, can any body do a simple video doing the steps of these config please? I'd appreciate it |
Beta Was this translation helpful? Give feedback.
-
|
You can see a clearer steps explanation here: https://vuejs.org/guide/typescript/overview.html#takeover-mode |
Beta Was this translation helpful? Give feedback.
-
|
Did all the steps several times, but this keeps appearing. What can I do? |
Beta Was this translation helpful? Give feedback.
-
|
Not the same issue. This is due to the extension renaming. |
Beta Was this translation helpful? Give feedback.
-
|
@johnsoncodehk is this something that is recommended by Volar? |
Beta Was this translation helpful? Give feedback.
-
|
Yes. :) |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
I present you 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! |
Beta Was this translation helpful? Give feedback.
-
|
Hey there! I am using VSCode with And intellisense is complaining about TS errors that my colleagues with jetbrains don't have. Some examples:
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.. |
Beta Was this translation helpful? Give feedback.
-
|
I can't comment without a repro code for the first error. TS2339 and unknownAtRules is expected error, you can inhibit it with |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, it's not possible. Extension cannot disable another extension by itself. |
Beta Was this translation helpful? Give feedback.
-
|
Can someone please explain what I have to do if I'm using Neovim and not VSCode? I'm using |
Beta Was this translation helpful? Give feedback.
-
|
Have a look here: https://nvim-lsp.github.io/configurations/volar/#lsp-overview |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
You don't need that in WebStorm. |
Beta Was this translation helpful? Give feedback.
-
|
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.) |
Beta Was this translation helpful? Give feedback.
-
|
In fact, I see now that Takeover Mode itself has been deprecated: Line 116 in 62410bd Sounds like the initial post needs to be updated again. 😁 |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
@crystalfp No. Just re-enable the built-in typescript plugin. |
Beta Was this translation helpful? Give feedback.
and others
-
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.
How to enable Take Over Mode?
2.1. Run
Extensions: Show Built-in Extensionscommand2.2. Find
TypeScript and JavaScript Language Features, right click and selectDisable (Workspace)and then open any vue file to trigger Volar activation(no longer need in 0.28.4).How to disable Take Over Mode?
Extensions: Show Built-in ExtensionscommandTypeScript and JavaScript Language Features, right click and selectEnable (Workspace)What are the limitations of Take Over Mode?
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)Beta Was this translation helpful? Give feedback.
All reactions