Emmet Advanced Tips

When writing HTML and CSS code, we also need to modify or add some content, Emmet provides a lot of very unique tools, can greatly improve the editing experience, below we select a few common features to introduce.

Saronron found that the shortcut keys for the Emmet plugin installed in sublime text are not the same as the shortcuts provided in the official presentation document, then we need to modify the Emmet shortcut or find the sublime shortcut in Emmet text.

Modify the shortcut keys, open preferences--package Settings--emmet to make changes, only to see the shortcut keys, such as: Match Tag pair shortcut key, open the tool command panel ctrl+shift+p, Enter: Match to see it.

The shortcut keys used in this article are the same as those in the official demo.

1, expand the abbreviation (Expand abbreviation) Demo

This feature was introduced at the beginning of the introduction of Emmet, which is the core function of Emmet.

2. Generate Test text Lorem Ipsum Demo

When you write HTML code, sometimes you need to add something, Emmet provides a random, non-readable field of English, as test data we can call. The Lorem ipsum text is also very simple, input lorem, press the TAB key, you can generate the following text:

1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, non, minima, Voluptas Ducimus
2. Voluptatem perspiciatis ID delectus maiores saepe porro aliquam sunt pariatur eaque. Enim,
3. Voluptatem nesciunt voluptate ad veritatis.

Emmet's Lorem This feature is not just for generating a piece of text, using the Lorem default generates 30 words of text, you can specify the number of words for it to randomly generate a large paragraph of text.

3, if you want to generate a title, just reduce the number of words, such as: LOREM4 will generate the following title:

1. Lorem ipsum dolor sit.

The above example simply generates a separate test text, which is also very simple to write with the HTML tag, just like the code that generates a parent-child relationship in a quick Emmet HTML code article:

1. H2>LOREM4

will be generated:

1. <h2>lorem ipsum dolor sit. </H2>

1. P*4>lorem4

will be generated:

2. <p>lorem ipsum dolor sit. </P>
4. <p>dolores, Similique veritatis reprehenderit. </P>
6. <p>cupiditate Repudiandae numquam earum. </P>
8. <p>atque, Sequi autem praesentium? </P>

So Lorem provides us with powerful test data that improves the speed of writing HTML code and lets us focus on writing code.

4. Extended abbreviation (Wrap with abbreviation) Demo

A very powerful feature, based on the current HTML code to add abbreviations, will extend the code, such as this code, the cursor on the p tag or external:

1. <div id="page">
2. <p>hello World</P>
3. </div>

Press Shift+ctrl+gagain to eject: enter Wrap abbreviation (enter an extension abbreviation), where you enter:

1. . wrapper>h1{title}+.content

Will get:

2. <div id="page">
4. <div class="wrapper">
6. <H1>title</H1>
8. <div class="Content">
10. <p>hello World</P>
12. </div>
14. </div>
16. </div>

5. Convert Text to HTML tags

When a customer provides us with a text document, copy the title, for example:

1. Home
2. Company Profile
3. Company News
4. About Us
5. Contact Us

Convert to navigation, select text, press shift+ctrl+g, pop up: Enter Wrap abbreviation (enter an extension abbreviation), where you enter:

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

Will get:

2. <nav>
4. <ul class="nav">
6.         < Li class= "nav-item1" > <a href= "> home </a ></li>  
8.         <li class= "nav-item2" ><< Span class= "Tag-name" >a href= " > Company Profile </a></li>  
10.         < Li class= "nav-item3" > <a href= "> company dynamic </a></li>&NBSP;&NBSP;
12.         <li class= "nav-item4" ><< Span class= "Tag-name" >a href= " > About Us </a></li>  
14. <li class="NAV-ITEM5"><a href= ""> Contact Us </a ></li>
16. </ul>
18. </nav>

Note that there are 5 menus in the navigation, which do not need to be used behind the Li tag, just use a separate operator *.

6. Delete list tags in text

Many of the text in a Word document is a list block, such as:

1. 1. Home
2. 2. Company Profile
3. 3. Company News
4. 4. About Us
5. 5. Contact Us

Without the need to write HTML code, Emmet lets us remove markup from the text and add |t after the abbreviated base code of the previous feature to remove the markup from the text:

1. Nav>ul.nav>li.nav-item$*>a|t

The resulting HTML code is the same as the above effect, you can try!

7, control the output position of the text

By default, when you convert text to HTML code with Emmet, you can use the $# operator Emmet to output text to more than one element, and $ #平上Emmet缩写语法中的一部分, so you'll get $ #放在属性值 [] or the text {} operator.

As an example of the above navigation text, enter in Enter Wrap abbreviation:

1. UL>li[title=$#]*>{$#}+img[alt=$#]

Will get:

2. <ul>
4. <li title="Home"> Home <img src="" alt="Home"> </li>
6.     <li  title= "Company Profile" > Company profile <img src= " alt= "Company Profile" ></li>  
8.     <li title = "company News" > company dynamic < Img src= " alt= "company News" ></li >  
10.     <li  title= "About Us" > about us <img src= " alt= "About Us" ></li>  
12. <li title="Contact Us"> Contact Us <img src="" alt="Contact Us"> </li>
14. </ul>

8. Decomposition and tagging (split/join tag) Demo

When the cursor is on the label, press Ctrl+jto move the label:

1. <div></div>

Converted to

1. <div />

Label, and vice versa. When there is content in the Div, the same function will be converted to the previous label, the contents of which will be deleted, so we need to pay attention when using it.

9. Mapping CSS property values (Reflect CSS value) Demo

For browser compatibility, CSS styles have many prefix styles with attribute values, and if you modify the values, you need to modify several places, such as:

1. div {
2. padding: 10px;
3. -webkit-transform:rotate (50DEG);
4. -moz-transform:rotate (50DEG);
5. -ms-transform:rotate (50DEG);
6. -o-transform:rotate (50DEG);
7. Transform:rotate (50DEG);
8. opacity:0.7;
9. Filter:alpha (opacity=70);
10. }

In Emmet we only need to modify one of the rotation property values, and then press ctrl+shift+r shortcut, and the other related property values are changed accordingly.

10. Select Match tag (match tag Pair) Demo

When we write HTML code, we need to choose the code to start the tag to the closed tag, generally we use the mouse box, although not too much trouble, but Emmet provides us with more convenient, fast function, expand and reduce the choice.

Pressing the shortcut key ctrl+dat the mouse cursor will select everything within the label range of the cursor, and multiple runs will enlarge the selection. There are scaling down, shortcut keys:crtl+shift+d, multiple runs will narrow the selection.

11. Go to the Matching tab (go to Matching Pair) Demo

Jump in Start tab and Closed tab, shortcut key:ctrl+t. When writing large HTML files, it is always possible to find a matching closed tag, and Emmet provides a convenient way for us to easily jump in the beginning and closing tags.

12. Jump to text edit point (Go to edit points) Demo

This feature is suitable for jumping up and down between tags, empty attributes, and empty article tags, such as title, A, li, href, SRC, and so on, which need to be entered. Last, the next edit point shortcut keys are ctrl+alt+left,ctrl+alt+right, respectively.

13. Add and remove annotations (Toggle Comment) Demo

Before adding a note is a symbol of a knock out, really a bit hard, also very annoying. The comment switch function provided by Emmet is great, you can add and delete comments with the ctrl+/ shortcut, but the comments are scoped to the behavior unit and are available in both HTML and CSS code.

14. Remove tag (removal tag) Demo

In some large HTML code, sometimes the label is nested too much, by Emmet remove the label this function, quickly remove the extra matching start tag and closed tag, shortcut key:ctrl+shift+; (in Windows).

15. Update the image size (update image size) Demo

Many times in the HTML code in the IMG title and CSS style background-image, need to know the width and height of the picture, always find the picture in the computer to see its size, waste time and very uncomfortable. Emmet provides us with this feature by simply moving the cursor to an IMG or background-image label, pressing ctrl+u(in Windows), and Emmet automatically reading the dimensions of the picture and adding it.

The premise is that the referenced picture address is correct and exists, and the path can not have Chinese, must be English characters, or the keyboard will not be broken to respond.

16, digital increment/decrement (increment/decrement number) Demo

Number increment/decrement, can increment/decrement with 0.1, 1 and 103 values, the shortcut keys are:ctrl+up/down,alt+up/down and ctrl+alt+up/downrespectively.

17. Mathematical Calculation Expressions (Evaluate math expression) Demo

With Emmet in the HTML and CSS files can be simple numeric operations, magic, input 4*8 and then press Ctrl+shift+y, Emmet can give the final result.

18. Compile the picture into Data:url mode (Encode/decode image to Data:url) Demo

Data:url mode is to use base64 encoding to translate image data into standard ASCII characters, and to draw images locally, instead of loading from the server, reducing HTTP requests, thus increasing the load speed of the Web pages.

Convert images to Data:url mode, Emmet provides us with the easiest and quickest way to place the cursor on an IMG or background-image tagged picture and press ctrl+shift+b shortcut key for perfect conversion.

Original: http://yfdxs.com/emmet-advanced.html

Reference: http://docs.emmet.io/actions/expand-abbreviation/

The red Place has been modified.

Emmet Advanced Tips