如何配置VSCode识别自定义标签包裹的JavaScript代码

PHP文件中使用与<script></script>功能完全等效的自定义标签包裹JavaScript代码时，VSCode默认无法将标签内内容识别为JS，会出现语法着色失效、自动缩进不生效的问题，可通过以下三种方案解决：

方案1：配置内嵌语言映射（全局/工作区生效，一劳永逸） #

• 按下快捷键Ctrl+,（macOS系统为Cmd+,）打开VSCode设置页，点击右上角的「打开设置(JSON)」图标
• 在JSON配置中添加如下规则，将your-custom-script-tag替换为你实际使用的自定义标签名即可：

{
  // 其他已有配置保持不变
  "html.embeddedLanguages": {
    "your-custom-script-tag": "javascript"
  },
  "php.embeddedLanguages": {
    "your-custom-script-tag": "javascript"
  }
}

注意：必须同时配置html.embeddedLanguages和php.embeddedLanguages两个字段，否则PHP文件里的自定义标签可能无法被正确识别。

• 保存配置后重新打开目标PHP文件，标签内的代码就会按JS规则做语法解析，支持高亮、自动缩进和智能提示。

方案2：注释标记法（零配置，单文件即时生效） #

不需要修改任何全局配置，直接在自定义标签内的首尾加特殊注释标记，VSCode会自动识别块内内容为JS：

<your-custom-script-tag>
// <script>
// 该区域内所有代码都会获得JS语法高亮、自动缩进、智能提示支持
const demo = '示例代码';
function testFunc() {
  console.log(demo);
}
// </script>
</your-custom-script-tag>

注释内容不会被前端解析执行，完全不影响自定义标签的原有功能。

方案3：自定义TextMate语法注入（适合复杂规则场景） #

如果你的自定义标签有固定属性、特殊命名规则（比如所有带data-script属性的标签都作为脚本容器），可以编写轻量的VSCode语法扩展，通过TextMate语法注入规则，将匹配到的标签内容作用域标记为source.js，适合团队统一开发规范时使用。

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