Cool emmet.vim shortcuts - prcleary/shoppinglist GitHub Wiki

Add to .vimrc:

let g:user_emmet_leader_key=','

comma comma to replace, when cursor at end of emmet snippet

comma n to go to next edit point

comma N to go to next edit point

comma / to toggle comment

comma d or D to expand/shrink selection of tag

comma j to split tag e.g.

comma k to remove tag and contents

comma a to make URL (starting with http/s) into link with text

> is child operator; append *inside* element before

+ is sibling operator i.e. if not nested but at same level

^ is climb-up operator i.e. one level above

html attributes (id, class) using CSS convention e.g. div.container>p#foo>a

`*` multiplication operator e.g. div>p*5

$ item numbering

$@- reverse item numbering

$@3 for different counter base value

() for grouping

[] for custom attributes

{} to add text to element

Start web page

html:5 comma comma

<!DOCTYPE html>
</html>DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
</body>
</html>

Single tag

a comma comma

<a href=""></a>

div comma comma

<div></div>

img comma comma

<img src="" alt="">

Wrap something in tags

Visual select then Ctrl Y comma then enter tag or combination e.g. ul>li*

Complex examples

div>p>a

<div>
    <p><a href=""></a></p>
</div>

div containing 3 paragraphs with id foo, each with a link

div>p#foo$*3>a

<div>
    <p id="foo1"><a href=""></a></p>
    <p id="foo2"><a href=""></a></p>
    <p id="foo3"><a href=""></a></p>
</div>

#page>div.logo+ul#navigation>li*5>a{Item $}

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

div+div>p>span+em^bq

<div></div>
<div>
    <p>
        <span></span>
        <em></em>
    </p>
    <blockquote></blockquote>
</div>

div+div>p>span+em^^^bq

<div></div>
<div>
    <p>
        <span></span>
        <em></em>
    </p>
</div>
<blockquote></blockquote>

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>

div#header+div.page+div#footer.class1.class2.class3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

td[title="Hello world!" colspan=3]

<td title="Hello world!" colspan="3"></td>

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="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
    <li class="item0"></li>
</ul>

ul>li.item$@3*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

a{Click me}

<a href="">Click me</a>

.wrap>.content

<div class="wrap">
    <div class="content"></div>
</div>

em>.info

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

table>#row$*4[colspan=4]

<table>
    <tr id="row1"></tr>
    <tr id="row2"></tr>
    <tr id="row3"></tr>
    <tr id="row4"></tr>
    <td colspan="4"></td>
</table>

table>tr*4>(th+td)

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

p*4>lorem

<p>Lorem quo neque cumque voluptatum neque. Consectetur temporibus consequuntur sapiente provident eum, facere? Ab cupiditate praesentium voluptas veniam nostrum Recusandae totam explicabo amet odio veritatis temporibus? Sit rem cupiditate sequi</p>
<p>Dolor rem cum in voluptates ut. Magnam voluptatibus vero recusandae debitis fugit? Doloribus atque asperiores officia perferendis beatae Quae odio maiores dolorum eius reiciendis Itaque quas id beatae laborum suscipit.</p>
<p>Amet corporis perferendis sapiente eligendi porro temporibus! Beatae quod accusamus magnam sunt facere Sunt provident quas amet consequuntur earum. Inventore laborum voluptatem a debitis illum? Odio numquam qui modi et.</p>
<p>Ipsum cumque aspernatur reprehenderit beatae libero. Reprehenderit similique expedita debitis eligendi deserunt. Porro reiciendis nulla reiciendis soluta dignissimos, porro Nihil corporis a a iste sint. Labore perferendis pariatur rerum totam</p>

ul.generic-list>lorem10.item*4

<ul class="generic-list">
    <div class="item">Dolor suscipit dignissimos maxime nihil labore Eius recusandae accusantium placeat</div>
    <div class="item">Elit facere a amet nostrum explicabo cum Aut doloremque illum!</div>
    <div class="item">Elit saepe nisi obcaecati placeat distinctio. Nobis nihil laborum amet!</div>
    <div class="item">Amet ex quas adipisci ad autem aut. Pariatur esse dolor.</div>
</ul>