Become a Html Ninja with Emmet for Vim

Powerful Html (and React's .jsx) writing and editing!

You’ve probably read many experienced vimmers preaching about keeping vim clean and learning native features instead of installing plugins and, this is the right mindset, it makes sense to avoid installing plugins that offers nothing more than vim built in features on a fancy way but,… that doesn't mean that you shouldn't install any plugin at all!

There are great plugins available that offers big advantages to your productivity and that's the case of Emmet.

Emmet is a plugin available for most of the text editors and IDEs, it brings some tools that you're gonna love and never leave.

We'll explore a few features breaking down an example and, in the end of this text, you'll be throwing Html chunks like magic and you'll be excited to learn more!

Wooow! 🧙‍♀️

Install and setup

On this example we're gonna use Vim-Plug to install, but you can use your plugin manager of choice.

Install:

  • Open your .vimrc file and add the following line inbetween the Vim-Plug calls: Plug 'mattn/emmet-vim'
  • Source your .vimrc file with the command :source ~/.vimrc
  • Install Emmet-vim with the command :PlugInstall

Setup:

(This part is a personal configuration that I found very useful for me, and I believe it could be to you as well.)

The main command to execute Emmet-vim's magic is the combination <c-y>, , that means you must type CTRL+ y followed by , (comma). In my opinion, it's quite too much for such a useful feature that you want always on hands.

If you check Emmet-vim docs it encourages you to redefine the trigger key (that is the <c-y> part), and I found it very useful to trigger it to , (comma, wich is also my <Leader> key).

You can do it by adding this line to you .vimrc file:

let g:user_emmet_leader_key=','

We're replacing the <c-y> trigger for a simple , (comma)

So, at the end, my command to trigger the Emmet's magic is: ,, (comma comma) , simple and close to the fingers!


Let's try it!

As you could see from the first gif, Emmet allows you to compose shortcut word that will become html chunks.

We're gonna get the same example and build it step by step to understand what is happening and the syntax.

Emmet vim offers commands to be used on INSERT mode and on NORMAL mode as well, but for this example we're gonna focus only on INSERT mode

Html Boilerplate

The first basic snippet is the Html default boilerplate:

  • type i to enter INSERT mode
  • type html:5
  • and type ,, (comma comma)

Create Html Tags by Name

On our first gif , after throwing the html boilerplate, we typed a weird command that brought a <div> with many thing inside of it.

Let's focus only on the <div> tag! Emmet offers html tag creation for every name you try so, let's try:

  • type div
  • and type ,, (comma comma)

…and also try something else:

  • type myname
  • and type ,, (comma comma)
Yes, you can use it with your custom React.js component names!

Child Operator

Next step to our command is to add the child operator >, it is used to append an html element inside the element declared before it.

Let's add a <div> with a <p> inside, that contains a link <a href="">

  • type div>p>a
  • and type ,, (comma comma)

Attribute Operators

You can define html attributes to the elements using the same convention used by CSS.

Let's try with the previous example, adding a .container class to the <div>, a #foo id to the <p> tag.

  • type div.container>p#foo>a
  • and type ,, (comma comma)

Item Numbering and Multiplication Operator

The last unexplored syntaxes from our weird command on the first gif, we're gonna explore together, that is the item numbering $ and the multiplication operator *.

You probably already got the multiplication operator, it's pretty straight forward, you just use it with the number after the element that you want to multiply and it'll be added as much as you defined.

Let's say you want a <div> with 5 <p> inside of it, just go with div>p*5 :

So, With multiplication * operator you can repeat elements, but with $ you can number them. Place $ operator inside element’s name, attribute’s name or attribute’s value to output current number of repeated element.

Let's give the previous 5 <p>'s, some #foo id's followed by it's order number to differentiate from each other:

  • type div>p#foo$*5
  • and type ,, (comma comma)

Congratulations! You got it!

That command from the first gif doesn't look to weird anymore! Try it yourself and mix it a little bit to see what happens!

div>p#foo$*5>a

And the good news is, this is just the beginning of what Emmet can offer. You can improve so much of your Html and React's .jsx writing skills with Emmet's features.

Here are some links where you can find more interesting information:

… and as always:


Footnotes:

  • If you have any doubts or tips I’d appreciate to know and discuss it on the comments section.
  • Do you have any other vim tips and want to publish it here? Send me and email at ‘vimdrops AT pm DOT me’ with your medium username and I’ll invite you as a writer!
  • As English is not my first language, I apologize for errors. Corrections are welcome at ‘vimdrops AT pm DOT me’.