VS Code中如何为XML元素/CDATA内的JS代码实现语法高亮？

一、现成扩展方案 #

• XML with embedded languages：这个扩展专门支持在XML的CDATA块或指定元素内识别多种编程语言，包括JavaScript。只要你的<Module>元素里的CDATA包裹着JS代码，它能自动触发JS语法高亮，不用额外配置。
• Language Injection：这个扩展支持手动或自动给指定代码块注入语言类型。临时使用的话，选中<Module>内的CDATA代码，打开命令面板（Ctrl+Shift+P）执行Inject Language，选择JavaScript就能立刻看到高亮效果。如果要永久生效，还能通过配置文件设置规则，让VS Code自动识别<Module>元素内的代码块并注入JS语法。

二、自定义实现（扩展满足不了需求时用） #

1. 配置语言注入规则 #

直接在VS Code的settings.json里添加自定义规则，示例如下：

"editor.languageInjection": [
  {
    "language": "javascript",
    "pattern": {
      "name": "xml.module.cdata",
      "regex": "<Module[^>]*>\\s*<!\\[CDATA\\[(.*?)\\]\\]>\\s*</Module>",
      "captures": {
        "1": {
          "name": "meta.embedded.block.javascript"
        }
      }
    }
  }
]

这个规则会匹配<Module>元素内的CDATA内容，把捕获到的代码块识别为JavaScript，从而启用语法高亮。注意要根据你的实际XML结构调整正则表达式，保证能精准匹配目标代码块。

2. 自定义语法文件（进阶操作） #

如果需要更精细的控制，可以自己编写TextMate语法文件（.tmLanguage或.json-tmLanguage），关联特定XML元素内的代码块语法：

• 新建语法文件，继承XML的基础语法规则
• 添加匹配<Module>元素及其内部CDATA块的规则
• 将CDATA内的内容关联到JavaScript语法
• 通过VS Code的Preferences: Configure Language Specific Settings加载这个自定义语法

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