Skip to content

Loss of Syntax Highlighting for an Element When Subsequent Elements in Template Are Folded #4926

Closed
@Wonder2018

Description

@Wonder2018

Vue - Official extension or vue-tsc version

v2.1.6

VSCode version

1.94.2 (windows system setup)

Vue version

3.5.12

TypeScript version

5.6.3

System Info

System: OS: Windows 11 10.0.22631 CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12490F Memory: 9.02 GB / 15.82 GB Binaries: Node: 18.16.0 - D:\Develop\nvm\v18.16.0\node.EXE npm: 9.5.1 - D:\Develop\nvm\v18.16.0\npm.CMD pnpm: 8.7.1 - D:\Develop\nvm\v18.16.0\pnpm.CMD Browsers: Edge: Chromium (127.0.2651.74) Internet Explorer: 11.0.22621.3527

package.json dependencies

"dependencies": { "vue": "^3.5.12" }, "devDependencies": { "@tsconfig/node20": "^20.1.4", "@types/node": "^20.16.11", "@vitejs/plugin-vue": "^5.1.4", "@vue/tsconfig": "^0.5.1", "npm-run-all2": "^6.2.3", "typescript": "~5.5.4", "vite": "^5.4.8", "vue-tsc": "^2.1.6" }

Steps to reproduce

  1. Create a simple Vue project using npm create vue@latest.
  2. Create a child component named CompA.
  3. Create another child component named CompB.
  4. Import both components into App.vue.
  5. Use CompA in App.vue with a v-for directive.
  6. Use CompB after CompA and ensure it can be folded.
  7. Create a div element after CompB with an arbitrary class name.
  8. Fold CompB to observe the issue.

Here is a sample repository volar-issue-highlighting-loss that has already been created for this issue.

Below is the content of the component app.vue.

<template> <comp-a v-for="(cell, ind) in new Array()" :key="ind"></comp-a> <comp-a></comp-a> <comp-a></comp-a> <comp-b></comp-b> <comp-b></comp-b> <comp-b></comp-b> <comp-b> <div>ccc</div> </comp-b> <div class="xxx">ddd</div> </template> <script setup lang="ts"> import CompA from "./CompA.vue"; import CompB from "./CompB.vue"; </script> 

What is expected?

When the "comp-b" component is folded, the "comp-a" component is highlighted in green.

This screenshot shows the effect when using volar@v1.8.27.

image

What is actually happening?

When the "comp-b" component is folded, the "comp-a" component loses its highlight display.

This screenshot shows the effect when using volar@v2.1.6.

image

Link to minimal reproduction

https://github.com/Wonder2018/volar-issue-highlighting-loss

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    good reproduction ✨This issue provides a good reproduction, we will be able to investigate it firstupstream: volar

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions