DEV Community

Cover image for Increase your coding speed 10X with Emmet
David Asaolu
David Asaolu

Posted on • Edited on

9 1

Increase your coding speed 10X with Emmet

Hi there, welcome to this tutorial. Today, I will be discussing how you can improve your coding speed with a popular plugin called Emmet.

Emmet is a plugin for many popular text editors that greatly improve HTML and CSS workflow.

So let's jump right into how to increase your coding speed with Emmet.

Different Emmet Shortcuts that can increase your coding speed

Child >

When you type :

nav>ul>li
Enter fullscreen mode Exit fullscreen mode

Emmet converts it to

<nav>
    <ul>
        <li></li>
    </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

">" is used when you need to nest elements within one another

Sibling +

When you type:

header+main+footer
Enter fullscreen mode Exit fullscreen mode

Emmets converts it to

<header></header>
<main></main>
<footer></footer>
Enter fullscreen mode Exit fullscreen mode

"+" can be used when you need write some elements next to each other

Multiplication

When you type:

ul>li*5
Enter fullscreen mode Exit fullscreen mode

Emmet converts it to

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

"*" is used when you need some elements to occur more than once.

Item numbering: $

When you type

ul>li.item$*5
Enter fullscreen mode Exit fullscreen mode

Emmet converts it to

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

When "$" is used, Emmet automatically numbers the elements. Also "." means class, just like in CSS styling.

Thank you for reading thus far.
Would love to know more about the power of Emmet.
Click Here

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
nuckfuggets profile image
Joren Rothman

Your link is incorrect (https//docs.emmet.io/cheat-sheet/)

Collapse
 
arshadayvid profile image
David Asaolu

Thank you Joren, it has been corrected 😍

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more