{{actor}} deleted this content .
-
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.
You must be logged in to vote
1 reply
{{actor}} deleted this content .
-
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 ?
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
1 reply
-
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.
{{actor}} deleted this content .
-
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.
You must be logged in to vote
2 replies
-
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.
Beta Was this translation helpful? Give feedback.
{{actor}} deleted this content .
-
@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.
{{actor}} deleted this content .
-
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.
You must be logged in to vote
3 replies
{{actor}} deleted this content .
-
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.
Beta Was this translation helpful? Give feedback.
All reactions-
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?
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.
{{actor}} deleted this content .
-
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
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
2 replies
{{actor}} deleted this content .
-
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.
Beta Was this translation helpful? Give feedback.
{{actor}} deleted this content .
{{actor}} deleted this content .
-
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
All reactions1 reply
-
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.
You must be logged in to vote
11 replies
-
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.
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 onLanguage:typescript to activationEvents, otherwise it will be a bigger harassment.
I have a idea to resolve it, still have to get some try.
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
onLanguage:typescripttoactivationEvents, 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.
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 TypeScript Vue Plugin (Volar) (vscode-typescript-vue-plugin) plugin, and only install Vue Language Features (Volar) (volar)?
Or we should install both?
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
2 replies
-
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.
Beta Was this translation helpful? Give feedback.
-
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.
Beta Was this translation helpful? Give feedback.
-
FYI, I just found another difference between Take Over Mode and TypeScript Vue Plugin (Volar):
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);Cmd + Click works in any file.Beta Was this translation helpful? Give feedback.
You must be logged in to vote
1 reply
-
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 yarn/sdks/typescript/lib
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
1 reply
-
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.
You must be logged in to vote
7 replies
-
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.
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.
{{actor}} deleted this content .
-
when i type / + * + *+ enter in .ts file, Function Comments will become
instead of
How to fix it ?
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
3 replies
-
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.
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 must be logged in to vote
1 reply
-
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.
Does someone have the issue too ?
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
3 replies
{{actor}} deleted this content .
-
If you can provide a example repo I would be able to look on your use case.
Beta Was this translation helpful? Give feedback.
{{actor}} deleted this content .
-
i fixed the issue not by doing .vscode folder everywhere but just adding
"deno.enablePaths": [
"./supabase/functions"
]
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 must be logged in to vote
1 reply
-
You could open a feature request.
Beta Was this translation helpful? Give feedback.
-
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 .
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
1 reply
-
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 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.
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
0 replies
-
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 must be logged in to vote
1 reply
-
Did all the steps several times, but this keeps appearing. What can I do?
g
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
1 reply
-
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.
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
1 reply
-
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.
You must be logged in to vote
0 replies
{{actor}} deleted this content .
-
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.
You must be logged in to vote
2 replies
-
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 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!
Beta Was this translation helpful? Give feedback.
-
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..
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
1 reply
{{actor}} deleted this content .
-
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.
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 .vscode/settings.json
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
1 reply
-
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 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
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
1 reply
{{actor}} deleted this content .
-
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 must be logged in to vote
1 reply
-
You don't need that in WebStorm.
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
3 replies
-
In fact, I see now that Takeover Mode itself has been deprecated:
- 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. 😁
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.
-
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. :(
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
2 replies
-
@CofCat456 Hi, It's the same for me,
the Visual Studio Code version is 1.93.0
Beta Was this translation helpful? Give feedback.
{{actor}} deleted this content .
-
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
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
0 replies
-
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!
Beta Was this translation helpful? Give feedback.
You must be logged in to vote
0 replies
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4
