VS Code HTML Emmet中插入花括号实现LaTex数学标签自定义片段问题

问题原因 #

Emmet语法中{}本身是标记文本节点的特殊语法，你配置中的{属于LaTeX内容的普通字符，直接书写会被Emmet识别为语法标记，同时JSON配置文件本身也有转义规则，两层转义逻辑叠加后，之前的单一转义方案自然无效。

可用配置方案 #

两种可直接生效的配置方式，均支持生成后光标自动定位到align环境中间：

方案1：使用Emmet原始文本语法（更简单，无需转义花括号） #

Emmet 2支持用反引号`包裹内容作为原始文本，内部的特殊字符不会被解析为Emmet语法，仅需要处理JSON本身的反斜杠转义即可。
打开VS Code的settings.json，添加如下配置：

{
  "emmet.snippets": {
    "html": {
      "snippets": {
        "math": "math>`$$\\begin{align}${1}\\end{align}$$`"
      }
    }
  }
}

如果是单独维护的Emmet snippets.json文件，写法如下：

{
  "html": {
    "snippets": {
      "math": "math>`$$\\begin{align}${1}\\end{align}$$`"
    }
  }
}

方案2：双层转义花括号 #

如果需要兼容旧版Emmet不支持反引号语法的场景，需要同时处理Emmet语法转义和JSON转义：

• Emmet层面：文本内容中的{、}需要加反斜杠转义为\{、\}
• JSON层面：字符串中的反斜杠需要额外转义为\\
  最终配置写法：

"math": "math>{$$\\begin\\{align\\}${1}\\end\\{align\\}$$}"

生效验证 #

配置保存后，按下Ctrl+Shift+P（Mac为Cmd+Shift+P）执行「重载窗口」命令，之后在HTML文件中输入math按下Tab键，即可生成目标结构，光标会自动定位到align环境中间。

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