VsCode中使用Emmet神器快速編寫HTML代碼

1、Emmet簡述

Emmet (前身爲 Zen Coding) 是一個能大幅度提升前端開發效率的一個工具. 在前端開發的過程當中，一大部分的工做是寫 HTML、CSS 代碼。特別是手動編寫 HTML 代碼的時候，效率會特別低下，由於須要敲打不少尖括號，並且不少標籤都須要閉合標籤等。因而，就有了 Emmet，它能夠極大的提升代碼編寫的效率，它提供了一種很是簡練的語法規則，而後馬上生成對應的 HTML 結構或者 CSS 代碼，同時還有多種實用的功能幫助進行前端開發。
VsCode內置了Emmet語法,在後綴爲.html/.css中輸入縮寫後按Tab鍵即會自動生成相應代碼. 語法基本規則以下:

E 表明HTML標籤。
E#id 表明id屬性。 E.class 表明class屬性。 E[attr=foo] 表明某一個特定屬性。 E{foo} 表明標籤包含的內容是foo。 E>N 表明N是E的子元素。 E+N 表明N是E的同級元素。 E^N 表明N是E的上級元素。

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

2、基礎用法

• 元素(Elements)
  您能夠使用元素的名稱，如div或p來生成HTML標籤。Emmet沒有一組可用的標籤名稱，能夠寫任何單詞並將其轉換爲標籤。也就是隻要知道元素的縮寫,Emmet會自動轉換成對應標籤.
  形如:

  div => <div> </div> foo => <foo> </foo> html:5 => 將生成html5標準的包含body爲空基本dom html:xt => 生成XHTML過渡文檔類型,DOCTYPE爲XHTML html:4s => 生成HTML4嚴格文檔類型,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)
  若是想在生成元素的同時添加文本內容能夠使用{}

  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>

  隱式標籤則會自動聯想生成對應元素,根據配置規則不一樣生成的結果也是不一樣的.

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

  綁定多個類名用.符號連續起來便可

  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)
  嵌套操做符用於將縮寫元素放置在生成的樹中,是否應放置在上下文元素的內部或附近.

  • 子級:>
    經過>標識元素能夠生成嵌套子級元素,能夠配合元素屬性進行連寫

    div#pageId>ul>li => <div id="pageId"> <ul> <li></li> </ul> </div>

  • 同級:+
    +字符表示生成兄弟級元素.

    div#pageId+div.child => <div id="pageId"></div> <div class="child"></div>

  • 父級:^
    ^用於生成父級元素的同級元素,從這個^字符所在位置開始,查找左側最近的元素的父級元素並生成其兄弟級元素.

    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)
  分組使用()來實現縮寫的分離.好比這個例子,若是不加括號那麼a將做爲span的子級元素生成.加上括號a將於()內的元素同級.

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

• 乘法(Multiplication)
  使用N便可自動生成重複項.N是一個正整數.在使用時請注意N所在位置,位置不一樣生成的結果不一樣.

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

• 自動計數(numbering)
  這個功能挺方便的對於生成重複項時增長一個序號,只須要加上$符號便可.

  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>

  若是生成兩位數則使用兩個連續的$$,更多位數以此類推...
  使用@修飾符，能夠更改編號方向（升序或降序）和基數（例如起始值）.注意這個操做符在$以後添加
  @-表示降序,@+表示升序,默認使用升序.
  @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>

  上述的操做是能夠搭配使用進而得出酷炫的效果,使用時請注意空格的問題,縮寫代碼不要有空格不然是不會進行轉換的.
  另外若是你的編輯器中已經有了一些html智能提示代碼段,好比個人VsCode還裝了HTML Snippets插件,這個與Emmet語法有部分衝突,使用Tab鍵時會優先使用插件的代碼提示,建議禁用.
  組合起來看看效果:

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

  這段目的在於生成一個類名爲table-row,且自定義了屬性role的table標籤,內部包含了thead與tbody,分別生成5個td.
  thead中td的內容是item加上自增序號,自增序號基數從120開始.
  tbody中td擁有一個名爲item加降序自增符號類名,且每一個td內容隨機填充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>

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

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

這個有點複雜,看下效果:

<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>

3、進階高級用法

• 模擬文本/隨機文本
  在開發時常常要填充一些文本內容佔位,Emmet內置了Lorem Ipsum功能來實現.loremN或者lipsumN,N表示生成的單詞數,正整數.能夠不填.

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>

• 包裝文本
  聽起來可能有點繞,通俗點解釋就是把一段指定的文本包裝成咱們想要的結構.注意這個功能須要編輯器的支持,舉個大栗子:
  好比PM給了這樣一段文本

  首頁 產品介紹 相關案例 關於咱們 聯繫咱們 而咱們預期的效果是這樣 <nav> <ul> <li>首頁</li> <li>產品介紹</li> <li>相關案例</li> <li>關於咱們</li> <li>聯繫咱們</li> </ul> </nav>

1. 選中文本,按下ctrl+shift+p打開命令窗口輸入ewrap
2. 選擇Emmet:使用縮寫進行包裝(Wrap with Abbreviation)選項
   

3. 輸入縮寫字符nav>ul>li*按下回車鍵便可看到效果.
   固然也能夠在菜單=>編輯=>Emmet(M)..而後輸入.

   這裏須要的注意的地方是輸入的縮寫代碼中*所在位置不一樣獲得的效果也是不一樣的.

另外若是給的文本帶有序號的狀況,咱們也是能夠經過縮寫來處理,而不是手動刪除,主要用的是|t來處理.
好比:

1.首頁
    2.產品介紹
    3.相關案例
    4.關於咱們
    5.聯繫咱們
    輸入包裝字符命令
    nav>ul>li*|t
    便可看到生成的html中自動去掉了序號

針對上邊說的幾種狀況來演示一下.
利用好Emmet來快速編寫html代碼,能提高工做效率不用在一個個敲閉合標籤,簡直是我等偷懶黨神器.趕快去耍耍吧.