VScode：如何更改HTML开始和结束标记的颜色 [英] VScode: how-to change the color of HTML open and closing tag

问题描述

如何在VScode中更改HTML开始/结束标记的颜色以匹配下图？我已经尝试使用Highlight Matching Tag扩展名和以下设置，但这只在选择(OnFocus)标记时有效。我希望开始标记的实际字体颜色与所有结束标记不同。谢谢！

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

推荐答案

您可以通过自定义当前使用的VS代码主题(请参见最后一个图像上的最终结果)来完成此操作。

自定义主题

在VSCode中，按Ctrl+Shift+P打开命令调色板，然后键入/选择Preferences: Open Settings (JSON)。 这将打开编辑器设置.json文件。 设置/添加编辑器令牌颜色自定义的新规则。

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

TL；DR

将以下代码段粘贴到编辑器设置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",
      }
    },
  ]
 }
}

设置其他作用域：

此外，您还可以检查特定的标记(例如标记)，以查看要设置样式的作用域的名称。

在命令调色板Ctrl+Shift+P中，打开Developer: Inspect Editor Tokens and Scopes以查看部件(开始标记、结束标记等)的TextMate作用域名称您要修改的。

要获得更高级的匹配并超越JSX，您可能需要参考TextMate grammars

这篇关于VScode：如何更改HTML开始和结束标记的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！