Coding faster with Emmet

1

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
3

Yes its right :slight_smile:
Happy you enjoy it.

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

4

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

5

Hi :slight_smile:

You can use Markdown:

Cheers and happy coding

6

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

An overview of the Emmet commands

7

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.

8

@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
9

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: