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

So I found a nice solution to my problem in a situation where long lines of code would need to translate into a VS Code Snippet. This solution is snippet generator app. Whats great is that it also has options for Sublime and Atom too.