Emmet Documentation ( Actions+Filters+Customization )

Emmet Documentation

Actions

Expand Abbreviation

Balance

选择范围

Go to Matching Pair

匹配对应标签

在sublime text 3中似乎被覆盖了。

Wrap with Abbreviation

Wrapping individual lines

    About
    News
    Products
    Contacts

shift+ctrl+A

nav>ul.nav>li.nav-item$*>a

<nav>
        <ul class="nav">
            <li class="nav-item1"><a href="">About</a></li>
            <li class="nav-item2"><a href="">News</a></li>
            <li class="nav-item3"><a href="">Products</a></li>
            <li class="nav-item4"><a href="">Contacts</a></li>
        </ul>
    </nav>

Note you don’t need to add multiplier number for wrapping lines (e.g. li*5), you have to use * operator withoutnumber, like this: li*.

Removing list markers

You can let Emmet do this for you: simply add “trim“ (|t, pipe-t) filter to abbreviation to automatically remove list markers from wrapped content:

1. Ordered item 1
2. Ordered item 2
3. Ordered item 3

shift+ctrl+A

nav>ul.nav>li.item$*>a|t

<nav>
        <ul class="nav">
            <li class="item1"><a href="">Ordered item 1</a></li>
            <li class="item2"><a href="">Ordered item 2</a></li>
            <li class="item3"><a href="">Ordered item 3</a></li>
        </ul>
    </nav>

Controlling output position

You can control the output position with $# placeholder. Note that $# is not part of the abbreviation syntax, so you have to put it inside the attribute value or text node, like this: ul>li[title=$#]*>{$#}+img[alt=$#].

<ul>
        <li title="About">About<img src="" alt="About"></li>
        <li title="News">News<img src="" alt="News"></li>
        <li title="Products">Products<img src="" alt="Products"></li>
        <li title="Contacts">Contacts<img src="" alt="Contacts"></li>
    </ul>

Go to Edit Point

Select Item

Toggle Comment

Split/Join Tag

This action splits and joins tag definition, e.g. converts from <tag/> to <tag></tag> and vice versa. Very useful for XML/XSL developers.

Remove Tag

Merge Lines

文字合并成一行

在sublime text 3中似乎被覆盖了。

Update Image Size

This action helps you to automate this process: simply place caret inside <img> tag and run this action to add/update width and height attributes.

In CSS, place caret inside property value with url() function to add/update width and height properties for current rule.

Evaluate Math Expression

3*4

12

Increment/Decrement Number

Reflect CSS Value

    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

ctrl+B

    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);

Encode/Decode Image to data:URL

body {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAB0UlEQVQ4y2P4z8DAQCoGgjwgVsIqR46BwoJMt7i5GPeBmFQxUFWR5R6IycHOuB5Ii6C5niENiDORcAVID5ICDSCOB+IGIO4G4lwBPqY3MDOAhq5DNhTDkYL8TE+jArgcgGwWIC5iZ2O8TsjRnByMa4G0ENhARkaGf6JCTJ/rCviOg/DeFaKdz85IibCyMM4lJSSALl0Ld6GCDMszoCEaUMzFwszQSmrQ8nIzfgDqFQcbKC3B/BQpDFT4+Zieo2vg4mT8KSLE9AUYuz+BvkKRk5Vi/jC7S2gp0EApsIEykszPYLJaaqwZbGyMv0BckOYwH64r2xeJrrm0S2IGEPcC8TQ1JZZXMMM0VVhfbVsk2g80TAKIGTEM1NdinQliApPGmyWThJcDFXkDMQ+yk+SkmB+AmBZGbI9ObBKvAcpzo8QysoHGemwbgAofn9sGViiGLcCALrzrYMl+7+EJyRSgGmb0dIhiYGsZf+XRdWL5QIVMuGKgvpBvzp3DkvFQA3zwGggKWCBmxRelQHkVqOZ2YPL6iGGgvDTzYzILif+SYszvUcSYmRj+AnPDdyBzM6kYlHzERZnfYLiQEgwsed6hGAgMj/lADEqUK8jAS4C4A9lAAFHbei84vFYeAAAAAElFTkSuQmCC);
}

Filters

Now, try to expand this abbreviation: #content>p.title|e. You’ll have a slightly different result:

<div id="content">
    <p class="title"></p>
</div>

#content>p.title|e|e

<div id="content">
    <p class="title"></p>
</div>

#content>p.title|haml

#content
    %p.title

Implicit filter call

Default filters are defined in snippets.json file in filters section of each syntax:

{
    ...
    "html": {
        ...
        "filters": "html"
    }
}

Available filters

HAML syntax: haml

HTML syntax: html

Escape: e

Comment tags: c

div>div#page>p.title+p|c

...will be expanded into

<div>
    <div id="page">
        <p class="title"></p>
        <!-- /.title -->
        <p></p>
    </div>
    <!-- /#page -->
</div>

XSL tuning: xsl

Single line: s

ul>li*4|s

...will be expanded into

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

Trim line markers: t

Yandex BEM/OOCSS

Customization

snippets.json

Add your own or update existing snippets

preferences.json

Change behavior of some Emmet filters and actions

syntaxProfiles.json

Define how generated HTML/XML should look.

Cheat Sheet