VScode：如何更改HTML打开和关闭标记的颜色

Question

如何更改VScode中HTML打开/关闭标签的颜色以匹配下面的图像？我尝试使用Highlight Matching Tag扩展名和以下设置，但这仅在选择（onFocus）标签时​​有效。我希望打开标签的实际字体颜色不同于所有关闭标签的字体颜色。谢谢！

  "highlight-matching-tag.styles": {
    "opening": {
      "name": {
        "custom": {
          "color": "#007fff",
        }
      }
    },
    "closing": {
      "name": {
        "custom": {
          "color": "#F02931"
        }
      }
    }
  },

Answer 1

您可以通过自定义当前使用的VS Code主题来做到这一点（请参阅最后一张图片上的最终结果。）>

主题定制

在VSCode中，通过按Ctrl +Shift+ P打开命令面板，然后键入/选择Preferences: Open Settings (JSON)。这将打开编辑器设置.json文件。在这里，您需要为编辑器标记颜色自定义设置/添加新规则。

下面将更改JSX中结束标记（名称）的颜色。

settings.json

"editor.tokenColorCustomizations": {
  "[Visual Studio Dark]": { // Name of the theme that we want to customize, same as the value from "workbench.colorTheme"
  "textMateRules": [ // TextMate grammars tokenization settings
    {
      "name": "Opening JSX tags",
      "scope": [
        "entity.name.tag.open.jsx", // HTML opening tags (in JSX)
        "support.class.component.open.jsx", // JSX Component opening tags
      ],
      "settings": {
        "foreground": "#007fff",
      }
    },
    {
      "name": "Closing JSX tags",
      "scope": [
        "entity.name.tag.close.jsx", //  HTML closing tags (in JSX)
        "support.class.component.close.jsx", // JSX Component closing tags
      ],
      "settings": {
        "foreground": "#F02931",
      }
    },
  ]
 }
}
为了获得更高级的匹配并超越jsx，您可能需要引用TextMate grammars。

设置其他场景：

另外，您可以检查特定的标记（例如，标记），以查看要设置样式的作用域的名称。

在命令面板Ctrl +Shift+ P中打开Developer: Inspect Editor Tokens and Scopes，以查看要修改的零件（开始标记，结束标记等）的TextMate范围名称。

有关更高级的自定义（范围名称），请参考：https://macromates.com/manual/en/language_grammars