Emmet in VSCode Flashcards
How to generate a HTML boilerplate?
Opening up an empty HTML file in VS Code and entering ! should trigger Emmet suggestions. Press Enter.
Wrap with Abbreviation
It takes an abbreviation, expands it and places currently selected content in the last element of generated snippet.
“Wrap with Abbreviation” (Shift+Ctrl+A)
For example:
How to add a div class: wrapper with a h1 title nested and div class content on the same level. <p> Hello World </p> will be the last element..
<div>
<p>Hello world</p>
</div>
Solution:
.wrapper>h1{Title}+.content
<div>
<div>
<h1>Title</h1>
<div>
<p>Hello world</p>
</div>
</div>
</div>
How to do wrapping of individual lines?
<div>
About
News
Products
Contacts
Lorem ipsum dolor sit amet.
</div>
Select the lines you want to wrap.
Shift+Ctrl+A
nav>ul.nav>li.nav-item$*>a
<div>
<nav>
<ul>
<li><a>About</a></li>
<li><a>News</a></li>
<li><a>Products</a></li>
<li><a>Contacts</a></li>
</ul>
</nav>
Lorem ipsum dolor sit amet.
</div>
How to remove list markers?
Simply add “trim“ (|t, pipe-t) filter to abbreviation to automatically remove list markers from wrapped content:
Add it at the back |t
ul.nav>li.nav-item$1>a|t
Select the lines you want to wrap.
<div>
1. About
2. News
3. Products
4. Contacts
Lorem ipsum dolor sit amet.
</div>
How to control output position?
Can use the text content inside attributes like title, alt etc
You can control the output position with $# placeholder.
ul>li[title=$#]*>{$#}+img[alt=$#]
Attribute in square brackets
<div>
About
News
Products
Contacts
Lorem ipsum dolor sit amet.
</div>
ELEMENTS:
How to generate HTML tags ?
You can use elements’ names like div or p to generate HTML tags.
You can write any word and transform it into a tag: div → <div></div>
Child: >
You can use > operator to nest elements inside each other:
div>ul>li
…will produce
<div>
<ul>
<li></li>
</ul>
</div>
Sibling: +
Use + operator to place elements near each other, on the same level:
div+p+bq
…will output
<div></div>
<p></p>
<blockquote></blockquote>
Climb-up: ^
With ^ operator, you can climb one level up the tree and change context where following elements should appear:
Note: can use multiple ^^^, each one will move one level up
div+div>p>span+em^bq
…outputs to
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
Multiplication: *
With * operator you can define how many times element should be outputted:
ul>li*5
…outputs to
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Grouping: ()
Parenthesises are used by Emmets’ power users for grouping subtrees in complex abbreviations:
div>(header>ul>li*2>a)+footer>p
…expands to
<div>
<header>
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
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:
div#header+div.page+div#footer.class1.class2.class3
…will output
<div></div>
<div></div>
<div></div>
Custom attributes
You can use [attr] notation (as in CSS) to add custom attributes to your element:
td[title=”Hello world!” colspan=3]
…outputs
<td></td>
You can place as many attributes as you like inside square brackets.
You don’t have to specify attribute values: td[colspan title] will produce <td colspan="" title=""> with tabstops inside each empty attribute (if your editor supports them).
You can use single or double quotes for quoting attribute values.
You don’t need to quote values if they don’t contain spaces: td[title=hello colspan=3] will work.
Item numbering:
With multiplication * 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:
ul>li.item$*5
…outputs to
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
You can use multiple $ in a row to pad number with zeroes:
ul>li.item$$$*5
…outputs to
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Changing numbering base and direction
With @ modifier, you can change numbering direction (ascending or descending) and base (e.g. start value).
For example, to change direction, add @- after $:
ul>li.item$@-*5
…outputs to
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
To change counter base value, add @N modifier to $:
ul>li.item$@3*5
…transforms to
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
You can use these modifiers together:
ul>li.item$@-3*5
…is transformed to
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
