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.

• Studocwho: It's nothing more than a quotation issue. Change the double quotes in the style attribute to single quotes. Voila! Problem solved.
• Mark: Umm, that is what the pre-exiting answer says....

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.

Answer 2

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

• Samuel: Perhaps my question doesn't reflect the true problem but I will try my best to explain again. Email development relies heavily on tables that span multiple lines see example - codepen.io/reallygoodemails/pen/zjajvX. How can VS code accommodate for these type of situations where snippets are 100 lines long?
• Mark: Okay, I solved your Result/Expected Result question. And you want to know if snippets are the right way to handle "massive lines of code"? I would say no. Look at a task runner and html partials where blocks of html code are injected into a target html file.
• Samuel: You answered my question to a certain degree I guess. But you didn't explain a situation of how things work with multiline code that could span to 100 lines.

Answer 3

I believe Emmet feature in Visual Studio Code can be very helpful and it is very powerful too in generating HTML code snippet with bare minimum typing.

Let's say, I'm creating Tic-Tac-Toe game where I need to create a table of size 3*3 in my HTML file. I'm editing the HTML file in Visual Studio Code. Here is what I write in the editor:

table>tr*3>td*3

Now press tab. Here is what you get in a flicker of second:

<table>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
</table>

Even while typing the emmet, you also get to see the preview of how the HTML would look like as shown in the snapshot below:

enter image description here

• Millhorn: Emmet does not provide custom code snippets. Please read the OP.