All the Emmet shortcuts you forgot!

Emmet shortcuts

Emmet is a plugin for SublimeText3 that can be used to increase productivity for web developers by including helpful shortcuts for repetitive, tedious code.  I use Emmet to automate List creation with multiple children elements, incremental class numbering, css shortcuts, and more. Check out some of the Emmet shortcuts you probably forgot.

The following shortcuts include the syntax in white which triggers the succeeding coloured code by pressing TAB key.

HTML


Use > to add a child element

Use + to add a sibling element

Use * to multiply elements

Use . to add class names to elements

Use ( ) to group multiple elements

Use  { } to put text inside an element

Add multiple item numbering with $

Start numbering at X number by using $@X

Descending number order by using $@-

Climb up one child element with ^

Enter an attribute by using [attr_name=”value”]

Putting it all together

The first grouping contains list item 1 that has 2 child elements: p which contains text and img which contains a src attribute.

The succeeding grouping contains list items 2-5, by multiplying 4 list items with incrementally named class names, paragraph names,  attribute values that are used for placesheen image src. They also contain an anchor element.

We then use ^ 3 times to traverse out of the list item, unordered list and the div so that we can add a footer.

CSS


Remember that Codepen  supports Emmet!

5 thoughts on “All the Emmet shortcuts you forgot!”

Leave a Reply

Your email address will not be published. Required fields are marked *