如何为VSCode/Textmate HTML语法添加仅开放标签作用域？

嘿，这个需求我之前也琢磨过，默认的HTML标签作用域确实把开闭标签绑在一起，折腾起来挺闹心的。给你分享两个靠谱的方案，不管是HTML还是JSX都能搞定：

一、HTML开放标签的单独作用域设置 #

核心思路是拆分原有标签匹配规则，给开放标签（包括自闭合标签）和闭合标签分配不同的作用域，这样主题就能精准定位开放标签了。

方案1：拆分基础标签匹配规则 #

找到你的html.tmLanguage.json文件，先备份一份防止改错。然后找到原来匹配所有标签的规则（通常是entity.name.tag.html对应的规则），把它替换成以下两个规则：

// 匹配开放标签（含自闭合）
{
  "name": "entity.name.tag.start.html",
  "match": "<([a-zA-Z0-9:-]+)(?=\\s|>|\\/>)"
},
// 匹配闭合标签
{
  "name": "entity.name.tag.end.html",
  "match": "<\\/([a-zA-Z0-9:-]+)(?=>)"
}

这样就生成了entity.name.tag.start.html这个仅对应开放标签的作用域，你在主题里直接用这个选择器设置样式就行，比如：

{
  "scope": "entity.name.tag.start.html",
  "settings": {
    "fontStyle": "italic"
  }
}

方案2：更细致的标签结构匹配（含属性） #

如果需要连标签的属性部分也精准控制，可以用捕获组的方式定义规则，替换原有标签相关规则：

// 匹配完整开放标签（包括属性和闭合符号）
{
  "match": "(<)([a-zA-Z0-9:-]+)(?=\\s|>|\\/>)(.*?)(\\/>|>)",
  "captures": {
    "1": { "name": "punctuation.definition.tag.begin.html" },
    "2": { "name": "entity.name.tag.start.html" },
    "3": { "name": "meta.tag.attributes.html" },
    "4": { "name": "punctuation.definition.tag.end.html" }
  }
},
// 匹配完整闭合标签
{
  "match": "(<\\/)([a-zA-Z0-9:-]+)(>)",
  "captures": {
    "1": { "name": "punctuation.definition.tag.begin.html" },
    "2": { "name": "entity.name.tag.end.html" },
    "3": { "name": "punctuation.definition.tag.end.html" }
  }
}

这个方案能更细致地划分标签的各个部分，适合需要更复杂样式的场景。

二、JSX开放标签的处理 #

JSX的思路和HTML完全一致，找到对应的jsx.tmLanguage.json（或者和JavaScript语法合并的文件，比如javascript.tmLanguage.json里的JSX部分），同样拆分标签匹配规则：

// JSX开放标签（含自闭合）
{
  "name": "entity.name.tag.start.jsx",
  "match": "<([a-zA-Z0-9_.-]+)(?=\\s|>|\\/>)"
},
// JSX闭合标签
{
  "name": "entity.name.tag.end.jsx",
  "match": "<\\/([a-zA-Z0-9_.-]+)(?=>)"
}

之后在主题里用entity.name.tag.start.jsx设置样式即可。

注意事项 #

1. 修改完tmLanguage文件后，一定要重启编辑器才能让改动生效；
2. 确保新添加的规则放在原有标签规则的前面，这样优先级更高，能覆盖原有匹配；
3. 操作前记得备份原文件，万一改错了可以快速恢复。

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