Tokenize vue specific attributes under `meta.directive.vue` when having no attribute value

[usernamehw]

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

Info

• Platform: Win 10
• Vetur version: 0.14.3
• VS Code version: 1.29.1

Problem

Having different color for vue-specific attributes:

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

Some of them are not colorized because of the missing = after the attribute.

<template>
    <div>
        <div @click.prevent></div>
        <div @click.stop></div>
        <div v-on:click.stop></div>
        <div v-on:click.prevent></div>

        <form v-on:submit.prevent></form>
        <!-- ... -->
    </div>
</template>

It would be nice if colorization made = optional and worked for every case.

[usernamehw]

@octref, you've missed an issue.

[octref]

Oops, I was traveling while you opened the issue. Somehow it slipped my inbox. Thanks for the reminder.

Similar to #883.

[usernamehw]

That issue is asking for a way to colorize vue-specific attributes. It is already possible at least for half a year.

[octref]

Sorry, I had been busy and traveling. Let me get back to this...

[roydukkey]

I also would like to see this improvement and be able to target each of the pieces separately.

        <div @click.prevent></div>
        <div @click.stop></div>
        <div v-on:click.stop></div>
        <div v-on:click.prevent></div>

        <form v-on:submit.prevent></form>

For example, each of these would be targeted by different scopes. Something like this.

1. @, : scoped as some sort of symbol, operator, or ...
2. v-on scoped as attribute.directive
3. click scoped as attribute.name
4. stop scoped as attribute.other