Using Emmet in your IDE

Emmet is awesome! It’s a little tool (once called Zen Coding) that gives you loads of keyboard shortcuts for generating HTML and CSS markup! Give it a try! Install an Emmet plugin into your IDE. Then, in a view file, try typing this:

table#applications.table-striped.table-hover.table>thead>tr>td*3^^tbody>tr>td*

In PHPStorm, hit TAB after typing that. In Eclipse/Aptana, you press CTRL-E. Suddenly, it changes to:

<table id="applications" class="table-striped table-hover table">
    <thead>
        <tr>
            <td></td>
            <td></td>
            <td></td>
         </tr>
    </thead>
    <tbody>
         <tr>
             <td></td>
             <td></td>
             <td></td>
         </tr>
    </tbody>
</table>

As you can imagine, this saves a LOT of time! Check out the Emmet Cheatsheet here:
http://docs.emmet.io/cheat-sheet/

You can download the plugin for your IDE here:
http://emmet.io/download/
Have fun!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s