VsCode快速編寫HTML代碼

一、Emmet簡述

Emmet (前身為 Zen Coding) 是一個能大幅度提高前端開發(fā)效率的一個工具. 在前端開發(fā)的過程中，一大部分的工作是寫 HTML院崇、CSS 代碼。特別是手動編寫 HTML 代碼的時候闲询，效率會特別低下久免，因為需要敲打很多尖括號，而且很多標(biāo)簽都需要閉合標(biāo)簽等扭弧。于是阎姥，就有了 Emmet，它可以極大的提高代碼編寫的效率鸽捻，它提供了一種非常簡練的語法規(guī)則呼巴，然后立刻生成對應(yīng)的 HTML 結(jié)構(gòu)或者 CSS 代碼，同時還有多種實用的功能幫助進行前端開發(fā)御蒲。
VsCode內(nèi)置了Emmet語法,在后綴為.html/.css中輸入縮寫后按Tab鍵即會自動生成相應(yīng)代碼

請注意在VsCode新版本中按Tab不再默認(rèn)啟用Emmet展開縮寫!需要在首選項配置中將emmet.triggerExpansionOnTab設(shè)置為true值!

語法基本規(guī)則如下:

E 代表HTML標(biāo)簽衣赶。
E#id 代表id屬性。
E.class 代表class屬性厚满。
E[attr=foo] 代表某一個特定屬性府瞄。
E{foo} 代表標(biāo)簽包含的內(nèi)容是foo。
E>N 代表N是E的子元素碘箍。
E+N 代表N是E的同級元素遵馆。
E^N 代表N是E的上級元素。

本文僅介紹了在Html使用Emmet,
如果想Css縮寫的語法請參考這里https://docs.emmet.io/css-abbreviations/

二丰榴、基礎(chǔ)用法

元素(Elements)
您可以使用元素的名稱货邓，如div或p來生成HTML標(biāo)簽。Emmet沒有一組可用的標(biāo)簽名稱四濒，可以寫任何單詞并將其轉(zhuǎn)換為標(biāo)簽换况。也就是只要知道元素的縮寫,Emmet會自動轉(zhuǎn)換成對應(yīng)標(biāo)簽.
形如:

div => <div> </div>
foo => <foo> </foo>
html:5 => 將生成html5標(biāo)準(zhǔn)的包含body為空基本dom
html:xt => 生成XHTML過渡文檔類型,DOCTYPE為XHTML
html:4s => 生成HTML4嚴(yán)格文檔類型,DOCTYPE為HTML 4.01
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亦可
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>

文本操作符(Text)
如果想在生成元素的同時添加文本內(nèi)容可以使用{}

div{這是一段文本}
<div>這是一段文本</div>
a{點我點我}
<a href="">點我點我</a>

屬性操作符(Attribute operators)
屬性運算符用于修改輸出元素的屬性.
- Id和Class (elem#id and elem.class )

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

隱式標(biāo)簽則會自動聯(lián)想生成對應(yīng)元素,根據(jù)配置規(guī)則不同生成的結(jié)果也是不同的


    .class
    =>
    <div class></div>
    em>.class
    =>
    <em><span class></span></em>
    table>.row>.col
    =>
    <table>
        <tr class="row">
            <td class="col"></td>
        </tr>
    </table>

綁定多個類名用.符號連續(xù)起來即可

div.test1.test2.test3
    =>
    <div class="test1 test2 test3"></div>

自定義屬性使用 [attr1='' attr2='']

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

嵌套操作符(Nesting operators)
嵌套操作符用于將縮寫元素放置在生成的樹中,是否應(yīng)放置在上下文元素的內(nèi)部或附近.
- 子級:>
  通過>標(biāo)識元素可以生成嵌套子級元素,可以配合元素屬性進行連寫
  div#pageId>ul>li => <div id="pageId"> <ul> <li></li> </ul> </div>
- 同級:+
  +字符表示生成兄弟級元素.
  div#pageId+div.child => <div id="pageId"></div> <div class="child"></div>
- 父級:^
  ^{用于生成父級元素的同級元素,從這個}字符所在位置開始,查找左側(cè)最近的元素的父級元素并生成其兄弟級元素.
  div>p.parent>span.child^ul.brother>li => <div> <p class="parent"><span class="child"></span></p> <ul class="brother"> <li></li> </ul> </div>
分組操作符(Grouping)
分組使用()來實現(xiàn)縮寫的分離.比如這個例子,如果不加括號那么a將作為span的子級元素生成.加上括號a將于()內(nèi)的元素同級.


div>(ul>li+span)>a
=>
<div>
    <ul>
        <li></li>
        <span></span>
    </ul>
    <a href=""></a>
</div>

乘法(Multiplication)
使用N即可自動生成重復(fù)項.N是一個正整數(shù).在使用時請注意N所在位置,位置不同生成的結(jié)果不同.

ul>li*3
=>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

自動計數(shù)(numbering)
這個功能挺方便的對于生成重復(fù)項時增加一個序號,只需要加上$符號即可.

ul>li.item${item number:$}*3
<ul>
    <li class="item1">item number:1</li>
    <li class="item2">item number:2</li>
    <li class="item3">item number:3</li>
</ul>

如果生成兩位數(shù)則使用兩個連續(xù)的$$,更多位數(shù)以此類推...
使用@修飾符，可以更改編號方向（升序或降序）和基數(shù)（例如起始值）.注意這個操作符在$之后添加
@-表示降序,@+表示升序,默認(rèn)使用升序.
@N可以改變起始值.需要注意的是如果配合升降序使用的話N是放到+-符后.


ul>li.item$@-*3
=>
<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>
---------------------------
ul>li.item$@-10*3
=>
<ul>
    <li class="item12"></li>
    <li class="item11"></li>
    <li class="item10"></li>
</ul>

上述的操作是可以搭配使用進而得出酷炫的效果,使用時請注意空格的問題,縮寫代碼不要有空格否則是不會進行轉(zhuǎn)換的.
另外如果你的編輯器中已經(jīng)有了一些html智能提示代碼段,比如我的VsCode還裝了HTML Snippets插件,這個與Emmet語法有部分沖突,使用Tab鍵時會優(yōu)先使用插件的代碼提示,建議禁用.
組合起來看看效果:

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

這段目的在于生成一個類名為table-row,且自定義了屬性role的table標(biāo)簽,內(nèi)部包含了thead與tbody,分別生成5個td.
thead中td的內(nèi)容是item加上自增序號,自增序號基數(shù)從120開始.
tbody中td擁有一個名為item加降序自增符號類名,且每個td內(nèi)容隨機填充10個單詞.

<table class="table-row" role="table">
    <thead>
        <tr>
            <td>item 120</td>
            <td>item 121</td>
            <td>item 122</td>
            <td>item 123</td>
            <td>item 124</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <td class="item05">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, assumenda.</td>
            </td>
            <td>
                <td class="item04">Magnam possimus molestias ipsum animi rem placeat, ut obcaecati laudantium.</td>
            </td>
            <td>
                <td class="item03">Consequuntur, labore ad optio cupiditate iusto dolores fugit quidem officiis.</td>
            </td>
            <td>
                <td class="item02">Veniam, explicabo consequuntur blanditiis at dicta fuga ratione eos beatae.</td>
            </td>
            <td>
                <td class="item01">Fuga voluptatum illo quis ducimus ad eveniet non. Saepe, eveniet.</td>
            </td>
        </tr>
    </tbody>
</table>

再來個配合嵌套元素和計數(shù)的大栗子.

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

這個有點復(fù)雜,看下效果:

<div class="nav">
    <nav id="navbar">
        <ul>
            <li>
                <a href="/xxx/product/1" data-index="1">Lorem ipsum dolor sit.</a>
                <a href="/xxx/product/2" data-index="2">Dolor vel, quia quas.</a>
                <a href="/xxx/product/3" data-index="3">Qui hic, corrupti eum!</a>
                <a href="/xxx/product/4" data-index="4">Necessitatibus perspiciatis, corrupti. Praesentium!</a>
                <a href="/xxx/product/5" data-index="5">Nostrum quos, voluptate. Velit!</a>
            </li>
        </ul>
    </nav>
    <div class="btn" type="button"><span>--</span></div>
</div>
<div id="main"></div>

三峻黍、進階高級用法#

模擬文本/隨機文本
在開發(fā)時經(jīng)常要填充一些文本內(nèi)容占位,Emmet內(nèi)置了Lorem Ipsum功能來實現(xiàn).loremN或者lipsumN,N表示生成的單詞數(shù),正整數(shù).可以不填.

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
=>
<p>Lorem ipsum dolor sit.</p>

(p>lorem4)*3
=>
<p>Lorem ipsum dolor sit.</p>
<p>Labore aperiam, consequuntur architecto.</p>
<p>Quidem nisi, cum odio!</p>

包裝文本
聽起來可能有點繞,通俗點解釋就是把一段指定的文本包裝成我們想要的結(jié)構(gòu).注意這個功能需要編輯器的支持,舉個大栗子:
比如PM給了這樣一段文本

首頁
產(chǎn)品介紹
相關(guān)案例
關(guān)于我們
聯(lián)系我們
而我們預(yù)期的效果是這樣
<nav>
    <ul>
        <li>首頁</li>
        <li>產(chǎn)品介紹</li>
        <li>相關(guān)案例</li>
        <li>關(guān)于我們</li>
        <li>聯(lián)系我們</li>
    </ul>
</nav>

選中文本,按下ctrl+shift+p打開命令窗口輸入ewrap
選擇Emmet:使用縮寫進行包裝(Wrap with Abbreviation)選項
輸入縮寫字符nav>ul>li*按下回車鍵即可看到效果.
當(dāng)然也可以在菜單=>編輯=>Emmet(M)..然后輸入.

這里需要的注意的地方是輸入的縮寫代碼中*所在位置不同得到的效果也是不同的.

另外如果給的文本帶有序號的情況,我們也是可以通過縮寫來處理,而不是手動刪除,主要用的是|t來處理.
比如:

    1.首頁
    2.產(chǎn)品介紹
    3.相關(guān)案例
    4.關(guān)于我們
    5.聯(lián)系我們
    輸入包裝字符命令
    nav>ul>li*|t
    即可看到生成的html中自動去掉了序號

針對上邊說的幾種情況來演示一下.

出處：http://www.cnblogs.com/summit7ca/