如何自訂 VSCode id 屬性？

Question

我最近從 Atom 遷移到 VSCode，雖然我設法根據自己的喜好自訂大部分編輯器，但我仍然缺少一些我喜歡的 Atom 功能。

其中之一是 Atom 中的「id」屬性曾經是一種特定的顏色，類似於 #99FFFF。我瀏覽了主題，但無法找到一個使 id 屬性顏色與其他主題不同的主題。

我喜歡的另一個功能是，當創建一個新的 HTML 元素時，例如。一個div，它預設帶有最常用的基本屬性。我掌握了使用 emmet 片段的竅門，但它仍然無法正常工作，可能是因為我還不知道如何正確使用它。如果有這方面的備忘單，或至少有一些例子，我們將不勝感激。假設我想建立一個具有類型、名稱、id 和占位符屬性的輸入元素，我將如何使用 emmet 片段來做到這一點？

這是我的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"
        }
      }
    ]
  }

請參閱編輯器語法反白顯示。