Wie kann ich das VSCode-ID-Attribut anpassen?

Question

Ich bin kürzlich von Atom zu VSCode migriert und obwohl es mir gelungen ist, den Großteil des Editors nach meinen Wünschen anzupassen, fehlen mir immer noch einige der Atom-Funktionen, die mir gefallen haben.

Eine davon ist, dass das „id“-Attribut in Atom früher eine bestimmte Farbe hatte, etwa #99FFFF. Ich habe die Themes durchgesehen, kann aber keines finden, das die Farbe des ID-Attributs von anderen Themes unterscheidet.

Eine weitere Funktion, die mir gefällt, ist, dass beim Erstellen eines neuen HTML-Elements, z.B. Ein Div mit den standardmäßig am häufigsten verwendeten Grundattributen. Ich habe den Dreh raus, das Emmet-Fragment zu verwenden, aber es funktioniert immer noch nicht, wahrscheinlich weil ich noch nicht weiß, wie man es richtig verwendet. Es wäre sehr dankbar, wenn es hierfür einen Spickzettel oder zumindest einige Beispiele gäbe. Angenommen, ich möchte ein Eingabeelement mit den Attributen Typ, Name, ID und Platzhalter erstellen. Wie mache ich das mit dem Emmet-Fragment?

Das ist meine 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

您可以使用 settings.com 中的 tokenColorCustomizations 对象更改 id 一词的颜色或其属性值：

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

请参阅编辑器语法突出显示。