Comment personnaliser l'attribut d'identifiant VSCode ?

Question

J'ai récemment migré d'Atom vers VSCode, et même si j'ai réussi à personnaliser la plupart des éditeurs à mon goût, il me manque encore certaines des fonctionnalités d'Atom que j'ai appréciées.

L'un d'eux est que l'attribut "id" dans Atom était une couleur spécifique, quelque chose comme #99FFFF. J'ai parcouru des thèmes mais je n'en trouve pas un qui rende la couleur de l'attribut id différente de celle des autres thèmes.

Une autre fonctionnalité que j'aime est que lors de la création d'un nouvel élément HTML, par ex. Un div avec les attributs de base les plus couramment utilisés par défaut. J'ai pris l'habitude d'utiliser le fragment emmet, mais cela ne fonctionne toujours pas, probablement parce que je ne sais pas encore comment l'utiliser correctement. Il serait grandement apprécié s'il y avait une aide-mémoire pour cela, ou au moins quelques exemples. Supposons que je veuille créer un élément d'entrée avec les attributs type, name, id et placeholder, comment puis-je procéder en utilisant le fragment emmet ?

Voici mes paramètres.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

Vous pouvez utiliser le mot settings.com 中的 tokenColorCustomizations 对象更改 id pour la couleur ou sa valeur d'attribut :

"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"
        }
      }
    ]
  }

Voir Mise en évidence de la syntaxe de l'éditeur.