leafOfTree/vim-vue-plugin

Could you link all vuejs attributes to htmlArg?

roket1428 opened this issue · 8 comments

Could you link all vuejs attributes to htmlArg?

Hi, I am not quite sure. Would you prefer htmlArg syntax highlight for vuejs attributes?

Here is a demonstration which might help:

FeH9wjZufL

I forgot that I changed some highlighting in my vimrc, which caused some unexpected syntax display. Now default VueKey is linked to the origin htmlArg, which is Type syntax group.

The highlighting also can be changed by something like:

highlight link VueKey htmlArg
highlight link VueValue htmlString

It would be better (ofc in my opinion) if they were same as html's attribute's colors.
Although, I think you can add an option for that.

I don't that "htmlTagN" exists (I checked it exists). I think the syntax group you are looking for is "htmlTagName" because it's color should be same as html tags, isn' it?
Here is the issue I have:

It would be better (ofc in my opinion) if they were same as html's attribute's colors.
Although, I think you can add an option for that.

It's a good reason to have a unified syntax highlighting for both vue and html attributes. This seems to be a more general case.
However, I personally prefer to highlight vue attribute differently because its value is more of an expression than a string.

So let be it be an option to fit both requirements:

let g:vim_vue_plugin_highlight_vue_attr = 0 " default
let g:vim_vue_plugin_highlight_vue_attr = 1

I don't that "htmlTagN" exists (I checked it exists). I think the syntax group you are looking for is
"htmlTagName" because it's color should be same as html tags, isn' it?

Yes. What I missed were the PascalCase component names. Now it should be highlighted like "htmlTagName".

Thanks to your quick replies and commits.
I got what I need from this report. So, I'm closing it but there is one think you should consider: why VueCmponentName syntax group is not using htmlTagName syntax group? I mean it has to be same as normal html tag.

Here it is the image:

Thank you for your reminding and patience.
In my test color scheme, htmlTagName is the same as Statement, which seems not true in yours. Now they should be the same after the changes.

- highlight default link VueComponentName Statement
+ highlight default link VueComponentName htmlTagName

Thank you for your reminding and patience.
In my test color scheme, htmlTagName is the same as Statement, which seems not true in yours. Now they should be the same after the changes.

- highlight default link VueComponentName Statement
+ highlight default link VueComponentName htmlTagName

Thank you so much.
BTW, if you're using IRC please let me know. I like that plugin a lot and I want to contact with you directly.