Creating custom HTML snippets in VS Code

Question

I'm in the process of moving away from Dreamweaver (I know its terrible but it has it uses) for email development to VS Code. One handy feature Dreamweaver offered was the use of custom snippets. VS Code offers custom snippets too but it works differently to Dreamweaver snippets and requires a little more hard work from what I can see. Below is what is happening in VS Code.

VS Code custom snippet

{
        "Preheader": {
            "prefix": "preheader",
            "body": [
                "<span style="display:none !important; mso-hide: all; color:#FEE4DC; max-height: 0px; overflow: hidden;">text goes here</span>"
            ],
            "description": "preheader for email"
    }
}

Result

<span style=

Expected result

<span style="display:none !important; mso-hide: all; color:#FEE4DC; max-height: 0px; overflow: hidden;">text goes here</span>

It seems I have to do some escaping to get the expected result? This would be a little mundane as I could have massive lines of code in my email development process :(

Am I using the correct feature in VS Code to create customer snippets? or am using the feature incorrectly.

Answer 1

It is just your quotes, try:

"<span style='display:none !important; mso-hide: all; color:#FEE4DC; max-height: 0px; overflow: hidden;'>text goes here</span>"

Note the alternation of double and single quotes. Also it doesn't seem as if you can have it the other way around (single quotes around the outside = no).

Or, if you want double quotes in your html, you can escape the internal quotes like so:

"<span style=\"display:none !important; mso-hide: all; color:#FEE4DC; max-height: 0px; overflow: hidden;\">text goes here</span>"