VS Code中HTML属性内JSON的TextMate语法是什么？如何编写自定义语法规则实现该场景下的JSON编辑器支持？

好问题！要实现你想要的效果，我们需要给VS Code的HTML语法添加自定义语法注入规则，让它识别HTML属性中符合条件的JSON内容，并自动启用JSON编辑器的功能（语法高亮、格式化、校验等）。

对应的TextMate语法类型 #

这里用到的是语法注入（Syntax Injection）——简单来说就是在现有HTML语法的基础上，插入一段规则，把特定范围的文本标记为JSON语法作用域，这样VS Code就会用JSON的编辑器能力来处理这段内容，和<script type="application/json">的原理完全一致。

具体的语法规则编写 #

你可以按照以下步骤创建自定义规则：

1. 创建语法注入文件
   在VS Code的用户配置目录下（Windows：C:\Users\<你的用户名>\.vscode；Mac：~/Library/Application Support/Code/User；Linux：~/.config/Code/User），新建一个名为html-json-attribute.tmLanguage.json的文件，填入以下内容：

{
  "scopeName": "source.html.json.attribute",
  "injectionSelector": "text.html - meta.tag, punctuation.definition.tag.begin.html",
  "patterns": [
    {
      "match": "(\\w+\\s*=\\s*)(')(?=\\{|\\[)([\\s\\S]*?)(?<!\\\\)(')",
      "captures": {
        "1": { "name": "entity.other.attribute-name.html" },
        "2": { "name": "string.quoted.single.html" },
        "3": { "name": "source.json" },
        "4": { "name": "string.quoted.single.html" }
      }
    }
  ]
}

规则细节解释：

• scopeName：给这个自定义语法起一个唯一的标识名，避免和现有语法冲突。
• injectionSelector：指定把规则注入到HTML文本中，排除标签定义的开头部分，防止干扰标签本身的语法解析。
• match正则表达式：
  • 先匹配HTML属性名和等号（\\w+\\s*=\\s*，支持属性名和等号之间有空格）
  • 匹配包裹属性值的单引号（'）
  • 用正向预查(?=\\{|\\[)确保属性值以{或[开头，精准锁定JSON格式内容
  • 匹配所有内容直到未被转义的单引号（(?<!\\\\)用来排除转义的单引号，比如O\'Neil里的单引号不会提前结束匹配）
• captures：把属性值的核心内容（第3组）标记为source.json作用域——这就是让VS Code启用JSON编辑器支持的关键。

2. 在VS Code中启用这个自定义语法
   打开VS Code的用户设置JSON（按Ctrl+Shift+P/Cmd+Shift+P，输入Preferences: Open User Settings (JSON)），添加以下配置：

"grammar.grammars": [
  {
    "language": "html",
    "scopeName": "source.html.json.attribute",
    "path": "<你的文件路径>/html-json-attribute.tmLanguage.json"
  }
]

记得把<你的文件路径>替换成你实际保存文件的完整路径，比如Mac上的~/Library/Application Support/Code/User/html-json-attribute.tmLanguage.json。

测试效果 #

创建一个HTML文件，写入测试代码：

<my-chart data='{"hello": "world", "numbers": [1, 2, 3], "escaped": "O\'Neil"}'></my-chart>

现在你会发现属性值里的JSON内容有了标准的JSON语法高亮，而且可以使用JSON的格式化功能（右键选择Format Document，或者按Shift+Alt+F），甚至能获得JSON语法校验提示，完全和<script type="application/json">里的体验一致。

如果后续需要支持双引号包裹的属性值，只需把正则里的单引号（'）替换成双引号（"），同时调整转义逻辑即可。

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