Double click to show all occurrences in scrollbar is broken

[johuhype]

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

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

[romansp]

Noticed something similar as well. Though it's for single click occurrences highlight.

This feature is controlled via editor.occurrencesHighlight VS 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 files

VS Code:

Version: 1.93.1
Commit: 38c31bc77e0dd6ae88a4e9cc93428cc27a56ba40
Date: 2024-09-11T17:20:05.685Z
Electron: 30.4.0
ElectronBuildId: 10073054
Chromium: 124.0.6367.243
Node.js: 20.15.1
V8: 12.4.254.20-electron.0
OS: Darwin arm64 23.6.0

Vue Extension v2.1.6. TS: 5.5.4, Hybrid mode enabled

Anything else I can provide to help resolve this?

[ddenev]

Some additional findings re the "single click occurrence highlight":

• this stops working intermittently - I cannot find a pattern when it stops working. sometimes it's when I open a .vue file, sometimes its when I open vscode
• toggling the editor.occurrencesHighlight option from multiFile to single and back seems to solve the problem but just temporarily until next time it breaks

[KazariEX]

It is caused by hybrid mode.

[cabal95]

Adding screenshots for clarity (we are also seeing this issue):

When hybrid mode is enabled:

When hybrid mode is disabled:

[romansp]

Noticed something similar as well. Though it's for single click occurrences highlight.

This feature is controlled via editor.occurrencesHighlight VS 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 files

VS Code:

Version: 1.93.1
Commit: 38c31bc77e0dd6ae88a4e9cc93428cc27a56ba40
Date: 2024-09-11T17:20:05.685Z
Electron: 30.4.0
ElectronBuildId: 10073054
Chromium: 124.0.6367.243
Node.js: 20.15.1
V8: 12.4.254.20-electron.0
OS: Darwin arm64 23.6.0

Vue Extension v2.1.6. TS: 5.5.4, Hybrid mode enabled

Anything else I can provide to help resolve this?

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]

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.

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]

Sorry! Yes @cabal95 is correct and issue is still reproducible. I had "multiFile" enabled.

[richmason]

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]

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]

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.

I find that if I roll back VSCode to 1.92.x, it works again.

[alexchexes]

I find that if I roll back VSCode to 1.92.x, it works again.

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.27 version of the extension while working with Vue 3.5.12?

[rodrigocfd]

Does anyone know the potential drawbacks of using the 1.8.27 version of the extension while working with Vue 3.5.12?

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]

I just downgraded to 1.8.27

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:

"vue.server.hybridMode": "typeScriptPluginOnly"

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]

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

with hybrid mode	with typeScriptPluginOnly

It does still break for me after a restart on latest 2.2.8 until editor.occurrencesHighlight is toggled to singleFile and back to multiFile again.

[alexchexes]

@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 Code settings.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 singleFile mode.

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]

@alexchexes Thank you for a prompt and thorough check on your side! Indeed, you are right to point out the difference in our editor.occurrencesHighlight setting. I've had it set to multiFile merely 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 to singleFile and 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 to multiFile, but works great with singleFile, after restarts as well, which I'll be using for the timebeing.

Indeed, @KazariEX's https://github.com/vuejs/language-tools/pull/5263/ seems like it would do the trick, though at a glance(I might be wrong) it does not look like it would support multiFile highlight either if anyone actually cares about it.

[johnsoncodehk]

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: multiFile at the moment.