Did you know that Emmet's built-in to WebStorm? Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that imply the HTML structure you want, press Tab, and then WebStorm spits out the desired HTML.
Here's a simple example of a basic expression in the Emmet syntax. Try typing the following in an HTMl page in WebStorm:
At the end of the expression, just hit the Tab key. WebStorm will use Emmet to parse the text and spit out the intended HTML which, in this case, will be an unordered list with 5 list items (shown below):
For details, you can refer to the Emmet Documentation, but for convenience, I'm including the most common stuff below. There's a lot more to it though, so if you like what you see here, be sure to RTFM.
You can use
> operator to nest elements inside each other:
+ operator to place elements near each other, on the same level:
* operator you can define how many times element should be outputted:
Parenthesises are used by Emmets’ power users for grouping subtrees in complex abbreviations:
If you’re working with browser’s DOM, you may think of groups as Document Fragments: each group contains abbreviation subtree and all the following elements are inserted at the same level as the first element of group.
You can nest groups inside each other and combine them with multiplication
ID and CLASS
In CSS, you use elem#id and elem.class notation to reach the elements with specified id or class attributes. In Emmet, you can use the very same syntax to add these attributes to specified element:
You can use
[attr] notation (as in CSS) to add custom attributes to your element:
* 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:
You can use multiple
$ in a row to pad number with zeroes:
You know - that filler text that designers use when they can't think of real words that are relevant to a design...
Holy Shit Example
Here's a crazy example to give you an idea of what you can accomplish if you get bad ass with Emmet.