VSCode中HTML代码片段失效求助（基于Magic Book Project）

问题场景 #

为HTML项目创建VS Code代码片段时，调用后无法生成预期的HTML结构，出现异常输出。

错误的代码片段定义 #

{
    "Ejercicio": {
        "prefix": "ejer",
        "body": [
            "<section data-type="sect2">

                <h2>Ejercicio</h2>
      
                <p></p>
      
                <section data-type="sect3">
      
                    <h3>Solución</h3>
                      
                    <figure>      
                        <figcaption></figcaption>
                        <img src="" alt=""/>
                    </figure>
      
                    <p></p>
      
                </section>
      
            </section>"
        ],
        "description": "Ejercicio"
     }
}

异常输出情况 #

1. 使用双引号时的输出：

<section data-type=
>
2
sect3

2. 将双引号改为单引号后的输出：

sect2     
2     
sect3

问题原因与解决方法 #

核心问题：JSON字符串未正确转义 #

VS Code代码片段的配置文件是JSON格式，字符串中的双引号必须用反斜杠\转义，否则会破坏JSON结构，导致解析器错误解读内容。此外，直接在单个字符串中保留换行和缩进也容易引发解析问题。

修正后的代码片段 #

推荐将HTML结构拆分为数组的多个元素定义每行内容，既不需要处理换行转义，也能保证格式清晰：

{
    "Ejercicio": {
        "prefix": "ejer",
        "body": [
            "<section data-type=\"sect2\">",
            "    <h2>Ejercicio</h2>",
            "    <p></p>",
            "    <section data-type=\"sect3\">",
            "        <h3>Solución</h3>",
            "        <figure>",
            "            <figcaption></figcaption>",
            "            <img src=\"\" alt=\"\"/>",
            "        </figure>",
            "        <p></p>",
            "    </section>",
            "</section>"
        ],
        "description": "Ejercicio"
     }
}

说明 #

• 所有HTML属性中的双引号都用\"进行转义，符合JSON语法要求。
• 每行HTML作为数组的一个元素，VS Code会自动按顺序拼接并保留缩进格式，生成预期结构。
• 这种方式也便于后续修改代码片段结构，维护性更强。

内容的提问来源于stack exchange，提问作者Carlos Julio Islas Bustamante