In this function, syntax highlighting for constants only works correctly at a specific scroll level.

[mybearworld]

The following code:

<script setup lang="ts">












const loadingMore = ref(false);
const loadMore = async () => {
  if (loadingMore.value) {
    return;
  }
  loadingMore.value = true;
  const page =
    newPostsAmount.value < 1
      ? 1
      : Math.floor(newPostsAmount.value / POSTS_PER_REQUESTS) + 1;
  const postsToRemove =
    newPostsAmount.value <= -25
      ? 0
      : newPostsAmount.value < 0
        ? POSTS_PER_REQUESTS + (newPostsAmount.value % POSTS_PER_REQUESTS)
        : newPostsAmount.value % POSTS_PER_REQUESTS;
  const response = await getResponseFromAPIRequest(
    requestURL + `&page=${page}`,
    {
      auth: true,
      schema: postsSchema,
    },
  );
  if ("status" in response) {
    await dialogStore.alert(t("loadMoreFail", { status: response.status }));
    return;
  }
  const newPosts = response.autoget.slice(postsToRemove);
  posts.value.push(...newPosts);
  newPostsAmount.value += newPosts.length;
  loadingMore.value = false;
  stopShowingLoadMore.value = response.pages === page;
};
</script>

<template>{{}}</template>

Looks like this when not scrolled:

But like this when scrolled:

More new lines require more scrolling to get the constants to appear correctly.

I've tried removing several statements, and they all caused this not to happen, and to always highlight the constants properly (assuming the mustaches are present, #3934).

[johnsoncodehk]

Thanks for such a good reproductions!

[raphael-yapla]

This bug is still happening for me on v2.0.19 on big files, when the const gets out of view the syntax highlighting disappears.

Here's the modified code to reproduce it:

<script setup lang="ts">
  const loadingMore = ref(false);























































  loadingMore.value = false
</script>

<template>{{}}</template>

When not fully scrolled:

When fully scrolled: