vue: Improve syntax highlighting

[d1y]

trafficstars

#8989

Before:

After:

Release Notes:

• Improve vue highlighting

[d1y]

@maxdeviant Do you have time to take a look at this PR?

[icarusgk]

Thank you so much for this PR, this is very much needed for the Vue community using Zed 💚

I was wondering if there is a possible way to make the color in an attribute binding a different color than the attribute name, as done in VSCode:

[d1y]

make the color in an attribute binding a different color than the attribute name

https://github.com/zed-industries/zed/blob/3eb0418bda8b7c7e375f0a00ae65da99b5a8c054/extensions/vue/languages/vue/highlights.scm#L10-L11

The directive name now only matches v-*, after changing it to * < ===> ((directive_name) @keyword) > Should we make such changes?

syntax AS TO keyword

Before:

After:

[icarusgk]

Wow, it even makes the v-on shorthand '@' a different color as well.

[icarusgk]

Hello again @d1y, I'm having trouble building the extension manually on my machine (docker, tree-sitter, wasm, etc...) Could you please provide me the extension.wasm file so I can test the extension locally?

[d1y]

Hello again @d1y, I'm having trouble building the extension manually on my machine (docker, tree-sitter, wasm, etc...) Could you please provide me the extension.wasm file so I can test the extension locally?

If you just want to test my PR, I know a simpler method

1. install vue by extension store

2. download PR .scm file

cd ~/Library/Application\ Support/Zed/extensions/installed/vue/languages/vue
wget -O highlights.scm https://github.com/d1y/zed1/raw/vue1/extensions/vue/languages/vue/highlights.scm
wget -O injections.scm https://github.com/d1y/zed1/raw/vue1/extensions/vue/languages/vue/injections.scm

[icarusgk]

It worked perfectly this way, thank you! Sorry for the spam 😅 not very experienced in Rust or tree-sitter.

[christ-offer]

This is very nice! Just tried out the highlights/injections files and I am eagerly awaiting this to be merged :D

[icarusgk]

Been testing this for the last couple of days, and the syntax highlighting works great! 🚀

[maxbrunsfeld]

Thanks @d1y - and thanks @christ-offer and @icarusgk for the feedback. Since we don't use Vue internally, it's helpful to have others test.