Author: cloud is also a kind of lonely Reference: [www.cnblogs.com/summit7ca/]

Use Emmet artifact to write HTML code quickly in VsCode

A brief description of Emmet#

Emmet (formerly Zen Coding) is a tool that dramatically improves the efficiency of front-end development. In the front-end development process, a large part of the work is to write HTML, CSS code. Writing HTML code by hand can be particularly inefficient, as there are many Angle brackets to tap, many tags to close, and so on. Thus, there is Emmet, which can greatly improve the efficiency of code writing, it provides a very concise syntax rules, and then immediately generate the corresponding HTML structure or CSS code, and a variety of practical features to help front-end development. VsCode has the Emmet syntax built in. HTML /.css and pressing Tab will automatically generate the corresponding code

Please note that pressing Tab in the new version of VsCode no longer enables Emmet expansion by default! Need in the heart of the preference configuration emmet. TriggerExpansionOnTab is set to true value!

The basic syntax rules are as follows:

Copy

E stands for HTML tag. E#id represents the id attribute. Class represents the class attribute. E[attr=foo] represents a particular attribute. E{foo} indicates that the tag contains content foo. E>N means that N is a child of E. E plus N means that N is a sibling of E. E to the N means that N is a superior element of E.

This article only introduces the use of Emmet in Html, if you want to abbreviate Css syntax please refer to here docs.

2. Basic Usage#

  • You can use the name of an element, such as div or P, to generate HTML tags. Emmet does not have a set of tag names available and can write any word and convert it to a tag. If you know the abbreviation of an element,Emmet will automatically convert it to the corresponding label. Like:

Copy

Div => <div> </div> foo => <foo> </foo> HTML :5 => Will generate the HTML5 standard containing body as empty basic DOM HTML: Xt => Generate XHTML transitional document type,DOCTYPE as XHTML A :mail => <a href="mailto:"></a> A :link => <a href="http://"></a> base => <base href=""> br => <br> link => <link rel="stylesheet" href=""> script:src => <script src=""></script> form:get => <form action="" method="get"></form> label => <label for=""></label> input => <input type="text"> inp => <input Type ="text" name="" id=""> INPUT :hidden => <input type="hidden" name=""> INPUT :h also input:email => <input type="email" name="" id=""> input:password => <input type="password" name="" id=""> input:checkbox => <input type="checkbox" name="" id=""> input:radio => <input type="radio" name="" id=""> select => <select name="" id=""></select> option => <option value=""></option> bq => <blockquote></blockquote> btn => <button></button> btn:s => <button type="submit"></button> btn:r => <button type="reset"></button>

  • The Text operator (Text) can be used to add Text content while generating elements.

Copy

‘div{this is a text}

This is a text

My PM me

  • Attribute Operators are used to modify the attributes of an output element.

    • Id and Class (elem# Id and em.class)

    Copy

    div.test => <div class="test"></div> div#pageId => <div id="pageId"></div>

    Implicit labels automatically generate corresponding elements by association and generate different results according to different configuration rules.

    Copy

    `.class =>

    em>.class => table>.row>.col =>

    `

    Bind multiple class names. Just keep the symbols together

    Copy

    `div.test1.test2.test3 =>

    `

    • Custom attributes use [attr1=” attr2=”]

    Copy

    a[href='#' data-title='customer' target='_blank'] => <a href="#" data-title="customer" target="_blank"></a>

  • Nesting Operators The Nesting operators are used to place abbreviated elements in the generated tree, whether they should be placed inside or near context elements.

    • Child: nested child elements can be generated by > identifying elements, which can be concatenated with element attributes

      Copy

      `div#pageId>ul>li =>

      `

    • Sibling: the + + character generates sibling elements.

      Copy

      `div#pageId+div.child =>

      `

    • Parent :^ The sibling element used to generate the parent element. Starting with this character, find the parent element of the nearest element to the left and generate its sibling element.

      Copy

      `div>p.parent>span.child^ul.brother>li =>

      `

  • Grouping uses () to separate abbreviations. In this example, without parentheses, a will be generated as a child of span. The parentheses a will be equal to the elements in ().

Copy

`div>(ul>li+span)>a =>

  • Multiplication (Multiplication)

    useN automatically generates duplicate entries. N is a positive integer. Please be careful when using itWhere N is, different results are generated according to different positions.

Copy

`ul>li*3 =>

  • It is quite convenient to add an numbering number when duplicated items are made. It is only necessary to add the $sign.

Copy

`ul>li.item{item number:}*3

  • item number:1
  • item number:2
  • item number:3

If two digits are generated, use two consecutive $$digits, more digits and so on… Using the @ modifier, you can change the numbering direction (ascending or descending) and the cardinality (such as the starting value). Note that the operator adds @- after $to indicate descending order and @+ to indicate ascending order, which is used by default. @N can change the starting value. Note that N is placed after the +- character when used with descending order.

Copy

`ul>li.item$@-*3 =>

The above operation can be used together to get a cool effect, please pay attention to the problem of space when using, abbreviate code do not have space or it will not be converted. In addition, if you already have some HTML intelligent prompts in your editor, for example, my VsCode has HTML Snippets plug-in, this conflicts with Emmet syntax. When using Tab, the code prompts of the plug-in will be preferentially used. Put it together and see what it looks like:

Copy

table.table-row[role='table']>(thead>tr>td{item $@120}*5)+(tbody>tr>(td.item$$@-)lorem10*5)

The purpose of this section is to generate a class named table-row, and the table tag of the attribute role is customized, including thead and tbody, respectively, to generate 5 TDS. The content of TD in thead is item plus the increment ordinal, and the increment ordinal base starts from 120. Td in tBody has a class name called item plus descending increment symbol, and each TD content is randomly filled with 10 words.

Copy

`

item 120 item 121 item 122 item 123 item 124
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, assumenda. Magnam possimus molestias ipsum animi rem placeat, ut obcaecati laudantium. Consequuntur, labore ad optio cupiditate iusto dolores fugit quidem officiis. Veniam, explicabo consequuntur blanditiis at dicta fuga ratione eos beatae. Fuga voluptatum illo quis ducimus ad eveniet non. Saepe, eveniet.

And a big chestnut with nested elements and counting.

Copy

div.nav>(nav#navbar>(ul>li>(a[href="/xxx/product/$" data-index=$]>lorem4)*5))+div.btn[type='button']>span{--}^^div#main

This one is a bit complicated, but look at the effect:

Copy

`

—

Advanced advanced usage#

  • Emmet has a built-in Lorem Ipsum function to do this. LoremN or lipsumN, where N represents the number of words generated, a positive integer. You don’t have to.

Copy

`lorem => Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quia commodi vero sint omnis fugiat excepturi reiciendis necessitatibus totam asperiores, delectus saepe nulla consequuntur nostrum! Saepe suscipit recusandae repellendus assumenda.

p>lorem4 =>

Lorem ipsum dolor sit.

(p>lorem4)*3 =>

Lorem ipsum dolor sit.

Labore aperiam, consequuntur architecto.

Quidem nisi, cum odio!

  • Wrapping text may sound a bit convoluted, but the popular way to put it is to wrap a given piece of text into the desired structure. Note that this feature requires editor support, for example: the PM gave this text

Copy

‘Home page product introduction related cases about us contact us and the effect we expect is this

  • Home page
  • Product introduction
  • Related to the case
  • About us
  • Contact us
  1. Select the text and pressctrl+shift+pOpen a command window and enter ewrap
  2. chooseEmmet: Wrap with Abbreviationoptions

  3. Enter abbreviation characternav>ul>li*Press enter to see the effect.

    You can also edit Emmet(M) in the menu. Then enter.

The important thing to note here is that the effect of the * in the input abbreviation code is different.

Also gives the text with a serial number, if we are also can be abbreviated to deal with, rather than manually removing, main use is | t to deal with. Such as:

Copy

Page 2) product introduction (3) related cases 4. About our 5. Contact our character input packing command nav > ul > li * | t can be seen in the generated HTML automatically remove the serial number

Let’s demonstrate some of these situations.



Using Emmet to write HTML code quickly is a great way to increase productivity without having to type in closing tags. Let’s go play with it.

(www.cnblogs.com/summit7ca/)