Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 22, 2022 06:49 am GMT

Write HTML faster with Emmet.

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>

Believeme 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

Part two


Original Link: https://dev.to/niza/write-html-faster-with-emmet-2e0f

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To