How to customize VSCode id attribute?

Question

I recently migrated from Atom to VSCode, and while I managed to customize most of the editor to my liking, I'm still missing some Atom features that I liked.

One of them is that the "id" attribute in Atom used to be a specific color, something like #99FFFF. I've looked through themes but can't find one that makes the id attribute color different than other themes.

Another feature I like is that when creating a new HTML element, e.g. A div with the most commonly used basic attributes by default. I got the hang of using the emmet fragment, but it still doesn't work, probably because I don't know how to use it properly yet. It would be greatly appreciated if there was a cheat sheet for this, or at least some examples. Suppose I want to create an input element with type, name, id and placeholder attributes, how would I do this using the emmet fragment?

This is my settings.json

"editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
    "editor.fontLigatures": true,
    "editor.letterSpacing": 0.4,
    "editor.smoothScrolling": true,
    "workbench.iconTheme": "material-icon-theme",

    "workbench.colorCustomizations": {
        "editor.background": "#232323",
        "sideBar.background": "#272727",
        "sideBar.foreground": "#C9C9C9",
        "editor.foreground": "#C9C9C9",
        "statusBar.background": "#272727",
        "activityBar.background": "#232323",
        "titleBar.activeBackground": "#232323",

    },
    "window.zoomLevel": 1,
    "emmet.triggerExpansionOnTab": true,
    "emmet.showSuggestionsAsSnippets": true,
    "editor.snippetSuggestions": "top"

Answer 1

You can change the color of the id word or its attribute value using the tokenColorCustomizations object in settings.com:

"editor.tokenColorCustomizations": {
    "textMateRules": [
       {
        "scope":    [
          "meta.attribute.id.html entity.other.attribute-name"  // the word id
        ],
        "settings": {
          "foreground": "#ff0000",
          // "fontStyle": "bold"
        }
       },
      {
        "scope": [
          "meta.attribute.id.html string.quoted.double.html"  // the id's vaue
        ],
        "settings": {
          "foreground": "#ff0000",
          // "fontStyle": "bold"
        }
      }
    ]
  }

See Editor syntax highlighting.