jsonvue.jsvisual-studio-code

Changing Vue Component Tag Color in VSCode: Issues with Token Scoping

Previously, I could inspect a token and then add textMateRules to settings.json in VsCode, but now it doesn't work for some reason, maybe because of some recent vue or vscode updates.

If I inspect the token of the AppHeader component, it says the textmate scope is entity.name.tag.html and foreground is source.vue entity.name.tag.html, but changing the foreground will change all of the tags colors, instead of just vue components:

"editor.tokenColorCustomizations": {
"textMateRules": [
    {
        "scope": ["entity.name.tag.html"],
        "settings": {
            "foreground": "#000"
        }
    },
  ]
}

For example, changing the foreground for "scope": ["entity.name.tag"] will change the color of <template>. But I can't find the right "scope" specifically for vue components.

Looking for a possible solution.

Solution
    1. I inspected using Ctrl+shift+P >Developer: Inspect Editor Tokens and Scopes and examined the components‘ scopes:

    Here are the tags:

    sample1

    Here are the kebab-cased tokens:

    sample 2

    1. Set textMateRules to recognize all vue-components like this:
    "editor.tokenColorCustomizations": {
    "textMateRules": [
          {
            "scope": [
              "meta.tag.other.unrecognized.html.derivative entity.name.tag.html",
              "meta.tag.custom.start.html entity.name.tag.html",
              "meta.tag.custom.end.html entity.name.tag.html"
            ],
            "settings": {
              "foreground": "#67d692",
              "fontStyle": "italic"
            }
          },
    ]}
    1. Works pretty well for me.

    Example of the finished work:

    sample