Write HTML faster with Emmet.

#webdev #vscode #productivity #codenewbie

Emmet is a fantastic plugin for code editors that web developers can use to speed up their coding. By pressing a single key, Emmet allows you to quickly translate expressions that resemble CSS into real HTML markup.

VSCode comes out of the box with the emmet plugin, so if you open up VSCode and type the following:

section>(div.card>img[src="img$.jpg"].+h4{product $}+p{Description $})*3

...then press the tab key it becomes :

    <section>
        <div class="card">
            <img src="img1.jpg" alt="" class="">
            <h4>product 1</h4>
            <p>Description 1</p>
        </div>
        <div class="card">
            <img src="img2.jpg" alt="" class="">
            <h4>product 2</h4>
            <p>Description 2</p>
        </div>
        <div class="card">
            <img src="img3.jpg" alt="" class="">
            <h4>product 3</h4>
            <p>Description 3</p>
        </div>
    </section>

Believe me when I say that you practically already know how to use Emmet because shortcuts resemble CSS Selectors.

Example:
id is "#" class is "." custom attributes is "[ ]", element nesting is ">" and so on.

Personally, I don't often use emmet for CSS because most code editors provide excellent CSS code suggestions; however, emmet has been very helpful for my HTML.

You can learn emmet in a few hours by going over the cheat sheet.

Here is a link to the emmet cheat sheet
Emmet Cheat sheet

Watch me run through the cheat sheet