VS : Emmet snippets

Emmet Documentation

HTML

All unknown abbreviations will be transformed to tag, e.g. foo → .

 

link

link:css

link:print

link:favicon

link:touch

style

script

script:src

img

<link rel="stylesheet" href="" />

<link rel="stylesheet" href="style.css" />

<link rel="stylesheet" href="print.css" media="print" />

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

<link rel="apple-touch-icon" href="favicon.png" />

<style></style>

<script></script>

<script src=""></script>

<img src="" alt="" />

a

a:link

a:mail

br

hr

<a href=""></a>

<a href="http://"></a>

<a href="mailto:"></a>

<br />

<hr />

 

SYNTAX

Child: >

nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

Sibling: +

div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

Grouping: ()

div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

Multiplication: *

ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Naming and numbering: $

ul>li.sample$*5

<ul>
    <li class="sample1"></li>
    <li class="sample2"></li>
    <li class="sample3"></li>
    <li class="sample4"></li>
    <li class="sample5"></li>
</ul>

h$[title=topic$]{Headline $}*3

<h1 title="topic1">Headline 1</h1>
 <h2 title="topic2">Headline 2</h2>
 <h3 title="topic3">Headline 3</h3>

ul>li.item$$$*5

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

ul>li.item$@-*5

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

ID and CLASS attributes

#header

.title

form#search.wide

p.class1.class2.class3

 <div id="header"></div>

 <div class="title"></div>

 <form id="search" class="wide"></form>

 <p class="class1 class2 class3"></p>

Custom attributes []

p[title="Hello world"]

td[rowspan=2 colspan=3 title]

[a=‘value1‘ b="value2"]

 <p title="Hello world"></p>

 <td rowspan="2" colspan="3" title=""></td>

 <div a="value1" b="value2"></div>

Text: {}

a{Click me}

p>{Click }+a{here}+{ to continue}

<a href="">Click me</a>
 
<p>Click <a href="">here</a> to continue</p>

Implicit tag names

.class

em>.class

ul>.class

table>.row>.col

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

<em><span class="class"></span></em>

<ul>
    <li class="class"></li>
</ul>

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

 

---

https://code.visualstudio.com/docs/editor/emmet

Emmet in Visual Studio Code

Support for Emmet snippets and expansion is built right into Visual Studio Code, no extension required. Emmet 2.0 has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets.

• In CSS abbreviations, when you use :, the left part is used to fuzzy match with the CSS property name and the right part is used to match with CSS property value. Take full advantage of this by using abbreviations like pos:f, trf:rx, fw:b, etc.
• Explore all other Emmet features as documented in Emmet Actions.
• Don't hesitate to create your own custom Emmet snippets.