Autocomplete CSS classes in Sublime Text?

In many of Jeffrey Way's Laracasts videos, I'll see him type something like this:

.container

Then he hits tab (or something) and it automagically turns into this:

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

...and the cursor is inside the <div> tags, ready to start adding code to it.

How is this achieved?!

ronnyandre

10 years ago

Best Answer

Level 2

He uses Emmet, http://emmet.io/

Emmet converts CSS syntax style code to HTML. For instance ul > li*3 > a[href=#] would be converted to

<ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

You can download it using the package control in Sublime Text. If you don't have Package Control downloaded, you can follow the simple instructions here: https://packagecontrol.io/installation

Enjoy! :)

1 like

Please or to participate in this conversation.