如何在VSCode中为.vue文件内x-前缀标签设置绿色高亮？

这个需求完全可行，你之前的配置不生效是因为scope指定错误——Vue文件里自定义标签的TextMate scope并非entity.name.tag.x-*，而是统一的entity.name.tag.vue，标签名属于token的文本内容，需要通过match规则来匹配前缀。

正确配置方案 #

将以下代码添加到你的VSCode设置JSON中：

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "language": "vue",
      "scope": "entity.name.tag.vue",
      "match": "<x-[\\w-]+",
      "settings": {
        "foreground": "#00ff00"
      }
    },
    {
      "language": "vue",
      "scope": "entity.name.tag.vue",
      "match": "</x-[\\w-]+",
      "settings": {
        "foreground": "#00ff00"
      }
    }
  ]
}

配置说明 #

• language: "vue"：限定规则仅对.vue文件生效
• scope: "entity.name.tag.vue"：定位Vue文件中的标签token
• match：用正则匹配以x-开头的开标签（<x-xxx）和闭标签（</x-xxx）
• foreground: "#00ff00"：设置标签文本为绿色

生效步骤 #

1. 按Ctrl+,打开设置面板，点击右上角的"打开设置(JSON)"按钮
2. 将上述配置粘贴到JSON文件中并保存
3. 按Ctrl+Shift+P执行"Reload Window"命令，配置即可生效

内容的提问来源于stack exchange，提问作者Danial Qsk