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文件。设置/添加编辑器标记颜色自定义的新规则。

添加以下代码片段将settings.json更改 JSX 中主题Dark (Visual Studio)的结束标签（名称）的颜色。

长话短说

将以下代码片段粘贴到编辑器设置 JSON，以启用特定主题的颜色 > 规则。

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

设置附加范围：

此外，您可以检查特定的标记（例如标签），以便查看您想要设置样式的范围的名称。

在Command Palette Ctrl++中打开查看要修改的部分的TextMate范围名称（开始标记、结束标记等）Shift。PDeveloper: Inspect Editor Tokens and Scopes

对于更高级的匹配并超越 jsx，您可能需要参考TextMate 语法