如何在 Visual Studio Code 中自定义 HTML 标记的颜色？答案

【问题标题】：How do I customise the color of HTML tags in Visual Studio Code?如何在 Visual Studio Code 中自定义 HTML 标记的颜色？
【发布时间】：2018-05-09 00:44:41
【问题描述】：

我正在使用我喜欢的深渊主题，但某些颜色太暗了。我使用（例如）自定义了一些标记颜色：

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "keywords": "#7ea4df",

但我不知道如何在编辑器中更改 HTML 标记的颜色。有人可以帮忙吗？

【问题讨论】：

标签： visual-studio-code vscode-settings

【解决方案1】：

您可以进入主题的 .json 文件并对其进行修改以满足您的需求，例如 mentioned in this post。我的位置在C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-abyss\themes

编辑：正如@www-0av-Com 在 cmets 中指出的那样，文件的路径现在是 C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\theme-abyss\themes，其中 <username> 是您的 Windows 用户。

您可以使用Ctrl + Shift + P 打开命令面板，然后打开Developer: Inspect Editor Tokens and Scopes 查看您有兴趣修改的元素的TextMate 范围。对于 abyss 主题中的 HTML 标记，它是 entity.name.tag。您可以在下面的第二张图片中看到 Scope Inspector 的外观。

然后进入 abyss-color-theme.json 文件并搜索该字符串并根据需要修改标签的颜色。我把我的改成丑陋的橙色，如下所示：

【讨论】：

谢谢！根据您的信息，请参阅下面我的替代方法，以防您不想编辑主题本身。
路径现在是 "C:\Users\user\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\theme-abyss\themes" 假设 \user\ 是您 PC 的用户姓名。另外，我相信@"see sharper" 的答案要好得多。
@www-0av-Com 感谢您的提醒！我已经用文件的新路径编辑了我的答案。
我的荣幸。我可以补充一点，虽然“看得更清楚”的答案更好，但你的答案增加了一些有价值的，甚至是基本的见解。例如，除非他们找到并查看了该文件，否则谁会猜到属性 colouration 会是“entity.other.attribute-name”？ VSCode 需要在它自己的配置文件上自动完成！ 请对评论表示感谢。这有助于我的个人资料。干杯
这会改变标签名称的颜色。但是我们如何只为标签更改 '' 的颜色呢？

【解决方案2】：

接受的答案很好，但我想我会添加这个，因为它消除了编辑主题 JSON 本身的需要。我编辑了我的设置如下：

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "keywords": "#7ea4df",
        "types": "#1fa8d8",
        "comments": "#727272",
        "strings": "#29a792",
        "textMateRules": [
            {
                "scope": "entity.name.tag",
                "settings": {
                    "foreground": "#7ea4df"
                }
            }
        ]
    }
},

【讨论】：

好答案。我想知道是否有办法在用户设置中编辑它，但是 VSCode 文档省略了 "textMateRules" 键，所以我在寻找正确的修改方法时迷失了方向。
...如果您愿意，可以将您的用户设置保存为新主题：“使用开发人员生成主题文件：从命令面板的当前设置命令生成颜色主题” - 从此页面：code.visualstudio.com/api/extension-guides/…
我对创建 VSCode 扩展相当陌生。我正在创建一个语法突出显示扩展，想知道我将在哪个文件和文件夹中添加提到的代码？我只想为自定义扩展而不是整个主题更改语法突出显示中的一些颜色。

【解决方案3】：

我知道这可能为时已晚，但对于不想手动进行此操作的任何人，都可以使用 Rainbow Tags extension。

我用了几个星期，非常满意。

【讨论】：

如果它有用，永远不要太晚，我的朋友。

【解决方案4】：

mac用户可以按照以下步骤操作

打开查找器
按 cmd+shift+h 打开用户文件夹
转到用户/您的用户名
按 cmd+shift+。打开隐藏文件
转到 .vscode/extensions/sdras.night-owl /themes/Night owl-color-theme.json（在我的例子中是夜猫子主题。）
在 vscode 中拖拽打开文件
打开你要自定义的html文件
选择div元素，按cmd+shift+p
选择开发者：inspector editor token and scopes
选择textmatescope eg：entity.name.tag.js

现在在 vscode 中打开 settings.json 文件

添加以下代码

"editor.tokenColorCustomizations": {

    "[Night Owl (No Italics)]": {

        "textMateRules": [
        {

            "scope": "entity.name.tag.js",

            "settings": {
                "foreground": "#7fdbca"
            }
        },
        {
            "scope": "entity.other.attribute-name",
            "settings": {
                "foreground": "#82AAFF",
                "fontStyle": "bold"
            }
        }
        ]
    }
}

将前景更改为您想要使用的任何内容。你就完成了。

【讨论】：