Coding faster with Emmet

Hi everybody,

today i searched in the forum and i found not a really good thread about Emmet and the advantages of this Plugin. So i want to tell you something about it because i use it sometimes and find it helpful (especially for lazy bones like me :slight_smile: ).

What is Emmet?
Emmet is a Plugin which you can download for your editor. Many editors like Sublime, Atom, NetBeans, Eclipse and much more supporting Emmet.
I use Visual Studio Code where it is already integrated.

What can i do with Emmet?
As a Freelancer (time is money) or advanced developer you may hate it to write down many basic code lines before the real work begin.
Of course you can use a template or something else but it is more flexible and faster to use a few words for many lines of code.

For example:

 <div class="blocks">
     <h2>sub title</h2>
`    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti commodi ab iure unde, 
         nam quod sapiente vitae dolor mollitia placeat vero nemo eligendi tempora iste reiciendis 
         aperiam cum quaerat delectus!</p>
 </div>
 <div class="blocks">
     <h2>sub title</h2>
     <p>Quia iusto necessitatibus nobis a, ipsum, voluptas ducimus velit excepturi reiciendis culpa 
         ut sequi adipisci pariatur consequatur! Sapiente, libero reprehenderit omnis sed eius, ut 
         distinctio. Obcaecati distinctio cum ipsa autem?</p>
 </div>

Many lines wthout Emmet and only one line with it:

.blocks*2>h2{sub title}+p>lorem

Of course you can add more to this command like img or ul and il.
Do you know the shortest command? It is:

!

You can try it for yourself because jsfiddle.net , codepen.io and other plattforms supporting Emmet too.
Go to the jsfiddle website and type ! in the HTML part and press TAB. In most editors or online plattforms it works like this command + TAB

I hope you find this thread useful. If you want to know more about it and where you can get it look at the links below.

Ressources:
Emmet Website http://emmet.io/
Free Emmet course Udemy

Till next time.
Regards
Phajava

8 Likes

Yes its right :slight_smile:
Happy you enjoy it.

Know i must found out how i can better post code lol

Emmet is fantastic. I always make sure to use an editor that can support it.

Hi :slight_smile:

You can use Markdown:

Cheers and happy coding

I thought i use this thread for an addition information or better say a helpful link.

An overview of the Emmet commands

Emmet looks so cool, but learning more syntax for html makes me lazy. Plus Sublime has CSS autocomplete, and usually that’s more than enough for me.

@imtoobose
This is not learning more learning. It is really intuitive. I coded today and used some commands i never heard because i thought “this could work” and it does work. Because the syntax is a HTML and CSS syntax
header is a header tag (open and closed), h1 is a h1 tag an dso on. Nothing really new for you.

Autocomplete is not the same like Emmet!
Emmet give you the opportunity to short your whole code. You can’t write 4 or 6 lines in a one line command with autocomplete, it is completely diffferent.

Only with a

!

you get this lines of code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

No autocomplete can do this .)

1 Like

I’m looking at the link you sent, and it does look pretty intuitive/cool. I’ll try getting it on Sublime and coding up some front end stuff soon then. The only issue if that it doesn’t compile to Jade/Pug, and I really like using it. To be fair, Pug has for loops and javascript so it’s not that useful there anyway.

Still a very cool resource, thanks for sharing :smile: