如何自定义 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"
        }
      }
    ]
  }

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