VScode 使用emmet

背景

在不少的編輯場合，不少時候回出現不少邏輯性的問題。可能以爲html是一門沒有邏輯的語言，實際上，它是有必定的思想編輯的。後來出現了emmet，這個不單單是一種快捷方式，同時也是一種思考方式。

解決方案

這裏介紹vscode中emmet，這個是自帶的，也就是說不須要任何的東西去下載，這個不單單是vscode，如今不少優秀的編輯器都自帶了。

請注意在VsCode新版本中按Tab再也不默認啓用Emmet展開縮寫!須要在首選項配置中將emmet.triggerExpansionOnTab設置爲true值!

基本語法

語法基本規則以下:

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的上級元素，實際上是叔叔元素，若是沒有上級元素，那麼效果和E+N同樣,E^^N是爺爺元素，以此類推。

基本案例：

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>

特別補充:
分組操做符(Grouping):
分組使用()來實現縮寫的分離.好比這個例子,若是不加括號那麼a將做爲span的子級元素生成.加上括號a將於()內的元素同級.

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

乘法(Multiplication):

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>

進階語法

模擬文本/隨機文本
在開發時常常要填充一些文本內容佔位,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>

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

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

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

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

好比:

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

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