CODEWITHSUNDEEP
htmlvisual-studio-codedreamweavercode-snippets
Samuel
Samuel

Reputation: 6136

Creating custom HTML snippets in VS Code

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.

Upvotes: 4

Views: 6455

Answers (3)

RBT
RBT

Reputation: 25917

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

Upvotes: 0

Samuel
Samuel

Reputation: 6136

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.

Upvotes: 8

Mark
Mark

Reputation: 181429

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

Upvotes: 5

Related Questions