Repository navigation
Double click to show all occurrences in scrollbar is broken #4850
Description
Vue - Official extension or vue-tsc version
2.1.6
VSCode version
1.93.1
Vue version
2.7.16
TypeScript version
5.5.4 / 5.6.2
System Info
System:
OS: Windows 11 10.0.22631
CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
Memory: 28.76 GB / 47.81 GB
Binaries:
Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.10.0 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Edge: Chromium (123.0.2420.97)
Internet Explorer: 11.0.22621.3527package.json dependencies
No response
Steps to reproduce
Double click the name of a function in a .vue file. Previously, all occurrences were highlighted in the scrollbar of VS code.
Now the highlighting in the scrollbar is missing and can only be seen in the document.
When I double click the name of a function in a .ts file, scrollbar highlighting is still working as expected.
What is expected?
Show highlighting for occurrences in scrollbar
What is actually happening?
Highlighting is missing
Link to minimal reproduction
No response
Any additional comments?
No response
Reacted by Daniel Hazelbaker, Jason Hendee, Vanessa Phipps, Raman Paulau, Sector6759, Karol Piczak, Rodrigo and zhch-hong
Activity
romansp commentedon Sep 19, 2024
Noticed something similar as well. Though it's for single click occurrences highlight.
This feature is controlled via
editor.occurrencesHighlightVS Code setting. After additional investigation:"editor.occurrencesHighlight": "single"- works in .ts files, doesn't work in .vue files"editor.occurrencesHighlight": "multiFile"- works in .ts and .vue filesVS Code:
Vue Extension v2.1.6.
TS: 5.5.4, Hybrid mode enabled
Anything else I can provide to help resolve this?
ddenev commentedon Sep 22, 2024
Some additional findings re the "single click occurrence highlight":
editor.occurrencesHighlightoption frommultiFiletosingleand back seems to solve the problem but just temporarily until next time it breaksKazariEX commentedon Sep 28, 2024
It is caused by hybrid mode.
cabal95 commentedon Oct 18, 2024
Adding screenshots for clarity (we are also seeing this issue):
When hybrid mode is enabled:
When hybrid mode is disabled:
romansp commentedon Oct 18, 2024
I personally can't reproduce this anymore and it works well for me again. Since my previous comment VS Code was upgraded to 1.94.2 and TypeScript is now 5.6.3.
cabal95 commentedon Oct 21, 2024
Just re-tested and we are still seeing this issue with the volar-starter repo (and our own repos). VS Code 1.94.2 and TS 5.6.3. Double click highlight works in pure TypeScript files but not .vue files unless we turn off Hybrid mode.
Setting "editor.occurrencesHighlight" to "multiFile" does work - until you restart VS Code and then it stops working and you have to toggle the setting to "single" and back to "multiFile" to make it work again.
romansp commentedon Oct 21, 2024
Sorry! Yes @cabal95 is correct and issue is still reproducible. I had "multiFile" enabled.
richmason commentedon Oct 23, 2024
Same issue for me, when single clicking a symbol. It is not just the scrollbar though, it is that none of the occurrences in the code are highlighted AS WELL as the scrollbar.
VSCode 1.94.2, TypeScript 5.6.3 - Hybrid Mode enabled. Issue was introduced in VSCode 1.93
alexchexes commentedon Oct 26, 2024
Everything worked well exactly one year ago. I took a break for a while, so does anyone know in which version it started? And what exactly do I need to roll back – the Vue extension or VSCode? Can't really work without occurrences highlighting because there's a lot of code to refactor. This is killing me.
richmason commentedon Oct 28, 2024
I find that if I roll back VSCode to 1.92.x, it works again.
alexchexes commentedon Nov 17, 2024
It seems like we can just use the previous version of the Vue extension.
Does anyone know the potential drawbacks of using the
1.8.27version of the extension while working with Vue3.5.12?rodrigocfd commentedon Jan 23, 2025
I just downgraded to 1.8.27, it works pretty good, and it also seems to be faster than current 2.2.0.
So yeah, that's what I'm using until this is fixed.
alexchexes commentedon Jan 24, 2025
At first, I downgraded too, but then I noticed that the "Go to definition" feature doesn't work inside <template>, and some variable references didn’t work either. Eventually, I updated to the latest version (2.2.0 as of now) and, to make occurrences highlighting work, added this setting to my VS Code settings:
Now, 2.2.0 works pretty well. I haven’t noticed problems that I experienced before, yet, although I mainly work with JS, not TS right now.
artu-ole commentedon Mar 10, 2025
@alexchexes I don't see how one can be happy with this unless it works differently on your computer. For me with
"vue.server.hybridMode": "typeScriptPluginOnly"it highlights all same strings, but I expect it to highlight occurrences of the same identifier:It does still break for me after a restart on latest 2.2.8 until
editor.occurrencesHighlightis toggled tosingleFileand back tomultiFileagain.alexchexes commentedon Mar 10, 2025
@artu-ole Hmm, yes, it's definitely different for me:
With
"vue.server.hybridMode": "typeScriptPluginOnly", all references are resolved correctly (I'd say perfectly, both inside<template>and<script>, including<script setup>), and highlighting works as intended.Maybe we have some other parts of the extension configured differently, or there are conflicts with other extensions in your case?Let me know if I can provide you with something from my config if you need to compare it with yours.
(Although"vue.server.hybridMode"is the only setting related to Vue in my VS Codesettings.json.)Sorry, I just noticed that you were talking about
editor.occurrencesHighlight. So yes, I just checked, and indeed, I have"editor.occurrencesHighlight": "singleFile"in my settings.Actually, I didn’t even remember setting it—probably because I rarely try to see highlighting across multiple files to notice that. References resolution still works fine across multiple files in
singleFilemode.So if that's the case and it still doesn’t work with multi-file highlighting, we should probably wait for the merge of #5263 - if that happens, of course.
artu-ole commentedon Mar 11, 2025
@alexchexes Thank you for a prompt and thorough check on your side! Indeed, you are right to point out the difference in our
editor.occurrencesHighlightsetting. I've had it set tomultiFilemerely as a workaround pointed at in this ticket above, don't need multi file highlight either. However, as others have pointed above, that workaround breaks on vs code restart until you toggle tosingleFileand back again(which is annoying, hence I was looking for another fix)The workaround with
"vue.server.hybridMode": "typeScriptPluginOnly"indeed was not working for me due tomultiFile, but works great withsingleFile, after restarts as well, which I'll be using for the timebeing.Indeed, @KazariEX's #5263 seems like it would do the trick, though at a glance(I might be wrong) it does not look like it would support
multiFilehighlight either if anyone actually cares about it.johnsoncodehk commentedon Mar 12, 2025
Vue language server and tsserver both provide highlight information, VSCode will show the highlights returned by both servers at the same time in the past, but since a certain version, VSCode only shows the highlights returned by the Vue language server for .vue files, which is the cause of the problem.
With #5263, Vue language server will also return highlights from tsserver, but due to the limitation of LSP, it doesn't support to return highlights from multiple files, it can't support
editor.occurrencesHighlight: multiFileat the moment.