Emmet: A plugin for html/css quick edit artifact

First, Introduction: Emmet's predecessor is the famous Zen coding, if you are engaged in web front-end development, the plugin must not be unfamiliar. It uses the syntax of the faux CSS selector to generate code that greatly improves the speed at which html/css code is written.

Second, how to use:

Reference from: http://www.iteye.com/news/27580

First, quickly write HTML code

1. Initialize
HTML documents need to contain some fixed tags, such as

• Html:5 or!: for HTML5 document types
• HTML:XT: For XHTML transition Document types
• Html:4s: For HTML4 Strict document types

2. Easily add classes, IDs, text, and attributes

Continuous INPUT element names and Id,emmet will be automatically complete for you, such as input p#foo:

Successive input classes and IDs, such as P.bar#foo, are generated automatically:

How to define the contents and attributes of an HTML element. You can automatically generate the following code by entering H1{foo} and a[href=#]:

1. <H1>foo</H1>
2. <a href="#"></a>
   

3. Nesting

Now you just need 1 lines of code to implement the nesting of tags.

• : A child element symbol that represents a nested element
• +: Sibling tag symbol
• ^: You can raise the label in front of the symbol by one line

4. Grouping

You can quickly generate blocks of code by nesting and parentheses, such as input (. foo>h1) + (. bar>h2), which automatically generates the following code:

2. <div class="foo">
4. <H1></h1>
6. </div>
8. <div class="Bar">
10. <h2></h2>
12. </Div>
    

5. Implicit tags

Declare a tag with a class, just enter Div.item, generate <div class= "item" ></div>.

In previous versions, you can omit the Div, which is the input. Item to generate <div class= "item" ></div>. Now if you enter only. Item, Emmet is judged based on the parent tag. For example, entering. Item in <ul> will generate <li class= "item" ></li>.

• Li: Used in UL and OL
• TR: For table, Tbody, THEAD, and Tfoot
• TD: Used in TR
• Option: for Select and Optgroup

6. Define multiple elements

To define multiple elements, you can use the * symbol. For example, UL>LI*3 can generate the following code:

7. Define multiple elements with attributes

If you enter ul>li.item$*3, the following code will be generated:

HTML code

2. <ul>
4. <li class="item1"></li>
6. <li class="item2"></li>
8. <li class="Item3"></li>
10. </ul>
    

Second, the CSS abbreviation

1. Value

For example, to define the width of an element, simply enter w100 to generate

width:100px;

In addition to PX, other units can be generated, such as input h10p+m5e, the result is as follows:

1. Height: 10%;
2. Margin:5em;

Unit alias list: p denotes%; e means em; x indicates ex

2. Additional Properties

Maybe you've already learned some abbreviations, such as @f, that you can generate:

CSS Code

1. @font-face {
2. Font-family:;
3. Src:url ();
4. }

Some additional options, such as Background-image, Border-radius, Font, @font-face,text-outline, Text-shadow, etc., can be generated by the "+" symbol, such as input @f+, will be generated:

CSS Code

2. @font-face {
4. font-family: ' fontname ';
6. Src:url (' Filename.eot ');
8. Src:url ('filename.eot #iefix ') format (' Embedded-opentype '),
10. URL ('filename.woff ') format (' Woff '),
12. URL (' Filename.ttf ') format (' TrueType '),
14. URL ('filename.svg#fontname ') format (' svg ');
16. Font-style:normal;
18. Font-weight:normal;
20. }

3. Fuzzy matching

If you are unsure of some abbreviations, Emmet will match your input to the closest syntax, such as input ov:h, ov-h, OVH, and oh, and the generated code is the same:

CSS Code

1. Overflow:hidden;

Iv. Customization

You can also customize the Emmet plugin:

• To add a new abbreviation or update an existing abbreviation, you can modify the Snippets.json file
• Change the behavior of Emmet filters and actions to modify the Preferences.json file
• Define how to generate HTML or XML code to modify the Syntaxprofiles.json file

V. Plugins for different editors

Emmet supports the following editor (linked to the Emmet plugin for the editor):

• Sublime Text 2
• TextMate 1.x
• Eclipse/aptana
• Coda 1.6 and 2.x
• Espresso
• Chocolat (added via the "Install Mixin" dialog box)
• Komodo Edit/ide (added via tools→add-ons menu)
• notepad++
• PSPad
• <textarea>
• Codemirror2/3
• Brackets

Emmet: A plugin for html/css quick edit artifact