[Front-end] Emmet , 前端快速開發的神兵利器

一個 Snapchat 標準庫，只需要少少的記憶，就可以大大提升HTML、CSS 的撰寫效率

Les Lee

Published in

一個小小工程師的隨手筆記

8 min readFeb 9, 2021

VSCode 最近的更版對於 Emmet 的支持更加完整了，因此決定來寫一篇文章介紹 Emmet 。

https://code.visualstudio.com/updates/v1_53

身為 web engineer ，在寫 HTML 的時候總是要打那煩人的左右角括號，並且還要在每個標籤結尾寫上結尾標籤，著實麻煩。

emmet 就是為了我們這種懶人發明的一鍵 HTML 產生器！

我們只需要依照著 Emmet 的規則，編寫我們想要的 html 結構，之後按下「Tab」，Emmet 就會自動幫我產生相對應的 HTML Code ！

就像上面的那張 GIF 展示的那樣~

Emmet Documentation

Emmet is a web-developer's toolkit that can greatly improve your HTML & CSS workflow: Basically, most text editors out…

docs.emmet.io

Emmet 的語法很簡單也不多，且很多規則跟 CSS 的選擇器語法很相近。對於會寫 CSS 的人來說，幾乎是無痛學習。

以下就來針對 Emmet 的語法介紹一下。

元素標籤+Tab

emmet 的使用方法就是，打好一串表達語法之後，按下「Tab」，就會自動轉換成相對應的 HTML 了。

使用 "!" 一鍵生成 HTML 結構

emmet 可以使用 "!" 一鍵生成 HTML Template，我們不用再自己從 <!DOCTYPE html> 開始一個字一個字敲打了。

使用 > 表示結構的「下一層」

像是 CSS 選擇器中，我們想要表達階層結構的時候，可以使用 > 來選取子元素。Emmet 也可以使用「>」來表示這種巢狀結構。

例如：

div>ul>li

會展開成這樣

<div>
    <ul>
        <li></li>
    </ul>
<div>

使用 *N 代表要重複 N 次

例如，我們可以使用 li*5 讓他自動重複 5 次，產生五個 <li></li>

使用 + 表示結構的「同一層」

通常一個標準的 html 頁面需要有 header, main, footer 。這時候就可以用 + 很簡單地產生。

header+main+footer

會展開成

<header></header>
<main></main>
<footer></footer>

綜合練習

如果我想要產生如下的結構，該怎麼寫呢？

<header></header>
<main>
    <article></article>    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</main>

寫法： header+main>article+section*6

使用 ^ 跳回上一層

我們可以使用 ^ 跳回到上一層，例如剛剛的例子，如果我們想要在 main 後面繼續接著寫 HTML 結構，我們就可以使用 ^ 來回到與 main 同一層的地方繼續往下串接我們的語法。

header+main>article+section*6^footer

會展開成

<header></header>
<main>
    <article></article>    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</main>
<footer></footer>

當然，如果我們想要往外多跳幾層，我們只需要多重複幾次 ^ 即可。

使用 () 將結構分塊，增加可讀性

由於 Emmet 的語法轉換器，是一次 parse 這一連串的字串，因此不允許語法中存在空格，但這也讓在撰寫這表達式的時候可讀性不佳。此時我們可以使用()來為結構分塊。

以上方的例子來說，我們就可以改寫成下方這樣

header+(main>nav>ul>li*4)+article+section*3+footer

使用 . 表示 class / # 表示 ID / [] 表示其他屬性 / {} 表示標籤之間的內容

Emmet 一樣支援標籤內的屬性描述。

例如最常見的 <a> 標籤，我們就可以給他額外的屬性

a.link#customLink[src='test.png' alt='test']{This is a test link}

會自動展成這樣

<a href="" class="link" id="customLink" src="test.png" alt="test">This is a test link</a>

使用 $ 可以自動記數

有些時候，我們希望 class 的名稱能夠照著數字順序給，這個時候，可以使用 $ 讓他 auto incremental

li.class$*5

會展開成

<li class="class1"></li>
<li class="class2"></li>
<li class="class3"></li>
<li class="class4"></li>
<li class="class5"></li>

當然我們也可以多給幾個 $，來代表要「幾位數」

使用 @ 給予起始值

剛剛的例子中，我們也可以不要從 1 開始，使用 @ 可以指定一個起始數字。

使用 - 來倒著數回去

這基本上很少使用到，但是還是說一下。我們除了順著數，也可以倒著屬回去。

一樣以剛剛的 li 為例，我們如果在 @ 後面多增加一個「-」，就可以讓數字由大到小排列。

li.class$@-10*30

會展開成

<li class="class39"></li>
<li class="class38"></li>
<li class="class37"></li>
<li class="class36"></li>
<li class="class35"></li>
<li class="class34"></li>
<li class="class33"></li>
<li class="class32"></li>
<li class="class31"></li>
<li class="class30"></li>
....