Vetur: Special color for vue specific html attributes, such as `v-model` and `@click`

[nick1190]

• [+] I have searched through existing issues
• [ +] I have read through docs
• [ +] I have read FAQ

Info

• Platform: Windows 7
• Vetur version:0.12.6
• VS Code version:1.26.1

Problem

How do I set v-if @click v-model :class ... highlight to other color like pic

[octref]

This is how it looks for me in the default theme.

Is this a html file or vue file?

[nick1190]

it is html default template

it is default vue template

I want to change v-for v-if v-model different color in html

"type " "class" "id " if color same with v-if

it 's hard to watch what status are htmls ,what status are vues
so I wanna to change color for vue status

[octref]

OK, thanks for clarification.

[nick1190]

so can I change highlight color by vetur?

[octref]

You can't, as of now. This requires changes in both Vue grammar and the theme you are using.

[nick1190]

thank you very much for your patience answer

[failpunk]

It would be pretty cool if you could set a custom color for vue-specific attributes in HTML.

[usernamehw]

Isn't this already achievable?

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "meta.directive.vue entity.other.attribute-name.html",
            "settings": {
                "foreground": "#e90"
            }
        }
    ],
}

Could be done for each theme separately also.

"editor.tokenColorCustomizations": {
    "[Default Dark+]": {
        "textMateRules": [
            {
                "scope": "meta.directive.vue entity.other.attribute-name.html",
                "settings": {
                    "foreground": "#e90"
                }
            }
        ],
    },
},