const syntax highlighting fails if the const is scrolled too far out of view

[cdrez]

Vue - Official extension or vue-tsc version

2.0.21

VSCode version

1.90.0

Vue version

3.4.27

TypeScript version

5.4.5

System Info

No response

Steps to reproduce

Installed Extensions: Vue - Official

Create a new vue file with a const. The const is properly highlighted if the scroll port is within a certain distance to the const declaration. However, if the scroll port is too far away from the declaration, the variable's syntax highlighting is no longer the same.

This depends on your zoom level as well, but if you get it in the sweet spot, you can watch the syntax highlighting flip on and off for that variable as you scroll up and down.

I also noticed that if I add a comment above the foo.value = "bar2" line, the syntax highlighting returns to the variable.

I also tested the behavior on Vue - Official v1.8.27 and it worked as expected there. It was broken on every version of v2 that I tried.

Probably related to #3934 and #3935.

<script setup lang="ts">
import { ref } from 'vue';

const foo = ref();









foo.value = "bar";





















































































foo.value = "bar2"
</script>

Link to minimal reproduction

No response

Any additional comments?

No response

[vusal5555]

That is exactly the issue I have been facing for a week now. It also fails to highlight the components imported in other components and HTML elements within the named slots as well.

[cdrez]

My guess about it being based on how far you scroll passed the variable definition was wrong. I get the same issue on variables defined in the middle of the file, can scroll up and down and watch the highlighting disable and re-enable repeatedly. So I'm not sure what the cause is since scroll position and text (a comment) above the line seem to both affect it.

[MetRonnie]

For me it loses the semantic highlighting (falls back to the textmate grammar highlighting) at line 116 with this:

Snippet

<script setup lang="ts">
import { ref } from 'vue'

const foo = ref()

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

foo.value = 'bar'

</script>

However if I paste more of the same below, the highlighting is lost further down, always about 5 statements up from the bottom

[Noah-Ywh]

I found that the issue occurs when “Hybrid Mode” is enabled.