VS Code主题开发：如何仅修改特定HTML元素上属性的语义样式？

问题场景 #

我正在开发VS Code的深色主题「PrismaPixel Studios - Dark Theme」，目前在配置语义标记的颜色样式，目标是给废弃的HTML标签和属性添加删除线+红色前景样式。当前已通过color-theme.json实现了基础废弃样式：

{
  "name": "PrismaPixel Studios - Dark Theme",
  "type": "dark",
  "colors": {},
  "tokenColors": [
    {
      "name": "deprecated",
      "scope": [
        "invalid.deprecated.entity.other.attribute-name.html",
        "invalid.deprecated.html",
        "invalid.illegal.no-longer-supported.html"
      ],
      "settings": {
        "foreground": "#ff9c8f",
        "fontStyle": "strikethrough"
      }
    }
  ]
}

但遇到了精准匹配的问题：charset属性仅在<script>、<link>、<a>标签上被废弃，在<meta>标签上仍属合法属性。如果直接把meta.attribute.charset.html加入废弃作用域列表，会错误地将<head>中<meta>标签上的charset也标记为废弃。

解决方案 #

VS Code基于TextMate语法作用域，支持嵌套层级匹配——通过「元素标签作用域 + 属性作用域」的组合，可以精准定位特定元素上的目标属性，避免误匹配其他元素。

修改后的配置示例 #

你可以直接扩展原有废弃规则的scope，添加嵌套作用域规则：

{
  "name": "PrismaPixel Studios - Dark Theme",
  "type": "dark",
  "colors": {},
  "tokenColors": [
    {
      "name": "deprecated",
      "scope": [
        "invalid.deprecated.entity.other.attribute-name.html",
        "invalid.deprecated.html",
        "invalid.illegal.no-longer-supported.html",
        // 精准匹配特定元素上的charset属性
        "meta.tag.script.html meta.attribute.charset.html",
        "meta.tag.link.html meta.attribute.charset.html",
        "meta.tag.a.html meta.attribute.charset.html"
      ],
      "settings": {
        "foreground": "#ff9c8f",
        "fontStyle": "strikethrough"
      }
    }
  ]
}

规则说明 #

• meta.tag.script.html 是<script>标签对应的作用域，紧跟meta.attribute.charset.html后，表示仅匹配该标签内部的charset属性
• 同理，meta.tag.link.html和meta.tag.a.html分别对应<link>和<a>标签，确保只有这三个标签上的charset会被标记为废弃
• 原有通用废弃规则保留，不影响其他废弃元素/属性的样式

可选：拆分规则便于维护 #

如果需要更清晰的代码结构，也可以把特定属性的规则单独拆成一个条目：

{
  "name": "PrismaPixel Studios - Dark Theme",
  "type": "dark",
  "colors": {},
  "tokenColors": [
    // 通用废弃样式
    {
      "name": "deprecated",
      "scope": [
        "invalid.deprecated.entity.other.attribute-name.html",
        "invalid.deprecated.html",
        "invalid.illegal.no-longer-supported.html"
      ],
      "settings": {
        "foreground": "#ff9c8f",
        "fontStyle": "strikethrough"
      }
    },
    // 特定元素上的废弃属性
    {
      "name": "deprecated.attribute-on-specific-elements",
      "scope": [
        "meta.tag.script.html meta.attribute.charset.html",
        "meta.tag.link.html meta.attribute.charset.html",
        "meta.tag.a.html meta.attribute.charset.html"
      ],
      "settings": {
        "foreground": "#ff9c8f",
        "fontStyle": "strikethrough"
      }
    }
  ]
}

内容的提问来源于stack exchange，提问作者PrismaPixel Studios