Emmet.io

This is a MUST have in your text editor. This amazing little thing outputs HTML for you into your page with a lot less effort. If your looking for ways to speed up your coding and keeping the quality of work this great plugin is what your after. Emmets is inspired by CSS selectors so it is easy to learn, it is customizable so you can add new snippets by adding some JSON files, basically you want this in your life.

Emmet allows you to write small amount of code that will compile when you press tab to usable HTML. For example:

nav>ul>li This snippet of code above will be converted into the below:

<nav>
     <ul>
          <li></li>
      </ul>
</nav> 

.class

This is one of the most used commands I use myself. The out come will be as below:

<div class="class"></div> 

The class could be anything for example you could write .container and this will output

<div class="container"></div>

It isn't just limited to HTML either you can us this in CSS files as well....

There is literally loads of different commands that you can use and they have made a simple cheatsheet for you to look at. If there is something missing that you want, simply create it yourself.