Snippet in VSCode for HTML

Good day.

I'm trying to do a snippet for a project I'm doing in HTML. However, when declaring its structure and calling the snippet, it does not present itself well.

This is how I declared it:

{
    "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"
     }
}

And every time I call it, the result is the following:

<section data-type=
>
2
sect3

I don't really know what the error is. It should be noted that my project is using The Magic Book Project tool. I would appreciate it if anyone could help me.

Also, I have tried changing the double quotes in <section> </section>, with single quotes, but the result is the following:

sect2     
2     
sect3

I am relatively new to programming, and therefore, my programming vocabulary is not very good, plus English is not my first language. If there is any problem, I'm sorry. I will try to express myself as best as possible.

Solution

This is what your snippet should be:

"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"
    }

Note. You are not setting the "body" property correctly.
Specifically, you have not correctly escaped the multiple " with \"
You can not just copy and paste code into the "body" you have to first format it correctly. As either a single string or a collection of strings.

From the VSCode documentation:

body is one or more lines of content, which will be joined as multiple lines upon insertion. Newlines and embedded tabs will be formatted according to the context in which the snippet is inserted.

See VSCode snippet documentation for reference: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets