The latest version has a bug in template interpolation highlighting

[syaigc]

Vue - Official extension or vue-tsc version

Vue - Official extension

VSCode version

1.104.1

Vue version

3.5.16

TypeScript version

none

System Info

package.json dependencies

Steps to reproduce

Writing JSX code in the script tag。

What is expected?

The recognition of template interpolation should exclude script tags, or be implemented in a better way; it shouldn't be like this now.

What is actually happening?

Writing JSX code in the script tag, the {{}} is actually a literal object, yet it is still recognized by the plugin as template interpolation highlighting. Shouldn’t the plugin avoid recognizing content in the script tag as template interpolation? Is it possible that Vue’s template interpolation would be placed inside the script tag?

Link to minimal reproduction

No response

Any additional comments?

Please fix this bug as soon as possible.

[KazariEX]

We used to calculate interpolation ranges precisely by sending requests to the language server and accessing the AST. Now, in order to reduce coupling, we simply use regex matching on the client side. One possible solution is to first extract the content inside the <template> block and then match interpolation ranges within it.

Contributions are welcome.

[Q16solver]

I'm not sure if this is related, but seems like there's also some highlighting issues with strings as well, having .in seems to cause it to think it's a function when syntax highlighting, not sure if this is vue-tsc related

[KazariEX]

@Q16solver This could be caused by extensions like arktype (which has special syntax injection for strings).

[Q16solver]

damn, nice, idk how you figured that out maybe someone else had the same thing, but that is the issue, thanks for the solution