vscde 支持Emmet

我們介紹過(guò)代碼片段（Code Snippet），你可以通過(guò)預(yù)定義代碼的模板來(lái)省去重復(fù)代碼的輸入。但是有的時(shí)候，預(yù)定義好的模板也還是有局限性。尤其是在書(shū)寫(xiě) HTML 的時(shí)候，你輸入的代碼，并不是 if 條件語(yǔ)句、for 循環(huán)語(yǔ)句這種常見(jiàn)的定式，而是根據(jù)你想要在網(wǎng)站上展示的效果而臨時(shí)決定的 HTML 結(jié)構(gòu)。換句話說(shuō)，你書(shū)寫(xiě)的 HTML 其實(shí)反映的是業(yè)務(wù)邏輯，而這往往是無(wú)法通過(guò)代碼片段來(lái)提前預(yù)測(cè)的。

Emmet 就是要解決這樣的問(wèn)題，為你的 HTML、CSS 書(shū)寫(xiě)提供類(lèi)似于代碼片段的輸入方式，你只需輸入一小段縮寫(xiě)，然后將其展開(kāi)成最終的代碼。Emmet 的語(yǔ)法類(lèi)似于 CSS 選擇器，你通過(guò)寫(xiě)一段接近于 CSS 選擇器的代碼縮寫(xiě)，然后使用 Emmet 引擎將它展開(kāi)成復(fù)雜但完整的 HTML 或者 CSS 代碼。舉個(gè)最簡(jiǎn)單的例子，比如說(shuō)你在 HTML 中寫(xiě)了 ul，然后 Emmet 就能夠把它展開(kāi)成下面的 HTML：

<ul></ul>

HTML

這樣，你就不需要重復(fù)地輸入 <> 尖括號(hào)，匹配開(kāi)關(guān)節(jié)點(diǎn)等。不過(guò)這個(gè)例子還是太簡(jiǎn)單了，下面我們來(lái)看看，如何使用 CSS 選擇器的語(yǔ)法來(lái)創(chuàng)造更復(fù)雜的 Emmet 縮寫(xiě)。

Child: > 子節(jié)點(diǎn)操作符

首先是子節(jié)點(diǎn)操作符，通過(guò) > 符號(hào)來(lái)指明節(jié)點(diǎn)之間的層級(jí)關(guān)系。你可以將

ul>li

HTML

展開(kāi)為：

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

HTML

兄弟節(jié)點(diǎn)操作符 Sibling: +

而如果你希望創(chuàng)建兄弟節(jié)點(diǎn)的話，則需要 + 操作符。比如，

div+p+bq

HTML

會(huì)被展開(kāi)成：

<div></div>
<p></p>
<blockquote></blockquote>

Hmtl

乘法操作 Multiplication: *

除了創(chuàng)建單個(gè)節(jié)點(diǎn)以外，你還可以通過(guò) * 和數(shù)字，來(lái)創(chuàng)建多個(gè)節(jié)點(diǎn)。比如，

ul>li*3

HTML

會(huì)被展開(kāi)成：

<ui>
  <li></li>
  <li></li>
  <li></li>
</ui>

HTML

Class Name, ID

另外，在書(shū)寫(xiě) HTML 的時(shí)候，你不可避免地需要給節(jié)點(diǎn)添加屬性，比如 id 和類(lèi)。在 Emmet 中，它們的書(shū)寫(xiě)也很方便。

比如，

ul#list>li*3

HTML

你就可以通過(guò) #list 來(lái)指定 ul 這個(gè)節(jié)點(diǎn)的 id 名。那么這個(gè)表達(dá)式會(huì)被展開(kāi)為：

<ul id="list">
  <li></li>
  <li></li>
  <li></li>
</ul>

HTML

相信通過(guò)上面的例子，你已經(jīng)看出了 Emmet 的強(qiáng)大之處。本質(zhì)上，你可以通過(guò)類(lèi)似于 CSS 選擇器的語(yǔ)法來(lái)組織最終 HTML 文檔的結(jié)構(gòu)，并利用乘法、組合等操作符來(lái)執(zhí)行重復(fù)的操作。

這就是 HTML、CSS 這兩門(mén)語(yǔ)言的一個(gè)進(jìn)階版的代碼片段。最后我們看下官方文檔里提供的第一個(gè)例子：

#page>div.logo+ul#navigation>li*5>a{Item $}

HTML

這段代碼里，# 指定了 id，.logo 指定了類(lèi)的名字，*5 ，所以，這段代碼最終會(huì)被展開(kāi)成：

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

HTML

看完上面的這些示例，你是不是十分心動(dòng)，想要試一試 Emmet 這個(gè)工具呢？關(guān)于更多 Emmet 的知識(shí)，推薦你閱讀官方的文檔。雖然是英文的，但是還是非常好理解的。

Emmet in VS Code

接下來(lái)，就到了我們專(zhuān)欄的核心內(nèi)容。我們一起看看， 在VS Code 中Emmet 有哪些調(diào)用方式。

展開(kāi)縮寫(xiě)

首先，在各個(gè)編輯器里，最通用的展開(kāi) Emmet 縮寫(xiě)的方式，就是按下 Tab 鍵。不過(guò)由于 VS Code 中對(duì) Tab 鍵的使用非常頻繁，默認(rèn)并沒(méi)有打開(kāi)這個(gè)功能。所以，如果你要用這個(gè)功能，就需要通過(guò) emmet.triggerExpansionOnTab 將這個(gè)設(shè)置打開(kāi)。

修改完配置后，當(dāng)你在 CSS 文件里輸入 p10， 然后按下 Tab 鍵時(shí)，p10 就會(huì)被替換成 padding: 10px;

其次，你也可以在命令面板中搜索 “展開(kāi)縮寫(xiě)”（Expand Abbreviation）并執(zhí)行。

建議列表

如果你剛學(xué)習(xí) Emmet，對(duì) Emmet 的語(yǔ)法還不熟悉，那么你一定希望知道自己寫(xiě)的縮寫(xiě)，最終被展開(kāi)時(shí)是什么效果。VS Code 的建議列表已經(jīng)做到了這一點(diǎn)，當(dāng)你在編輯器里書(shū)寫(xiě)縮寫(xiě)時(shí)，你能夠?qū)崟r(shí)地看到 Emmet 給的展開(kāi)建議。

如果你不希望在建議列表中使用 Emmet 的話，也可以通過(guò)配置”emmet.showExpandedAbbreviation”: “never”來(lái)禁用。

使用縮寫(xiě)包圍

縮寫(xiě)展開(kāi)已經(jīng)非常強(qiáng)大了，但是 Emmet 里還有一個(gè) “使用縮寫(xiě)包圍” 命令，它是干什么用的呢？比如說(shuō)，你已經(jīng)寫(xiě)好了一段 HTML：

<span>Hello</span>

HTML

然后你希望把它放到一個(gè)列表中。你當(dāng)然可以先寫(xiě)一個(gè) li，展開(kāi)縮寫(xiě)，接著把上面的 HMTL 片段剪切到列表中。你也可以選中這段 HTML 片段，在命令面板中執(zhí)行 “使用縮寫(xiě)包圍”（Wrap with Abbreviation） 命令。接著，VS Code 就會(huì)顯示一個(gè)輸入框，你可以在這個(gè)輸入框內(nèi)填入 Emmet 縮寫(xiě)，這個(gè)縮寫(xiě)展開(kāi)后，會(huì)自動(dòng)把我們選中的 HTML 放在其中。

在上面的動(dòng)圖中，相信你還發(fā)現(xiàn)了，當(dāng)你在輸入框中填入 Emmet 縮寫(xiě)時(shí)，編輯器里會(huì)自動(dòng)根據(jù)最新的縮寫(xiě)進(jìn)行更新，這樣你就能夠?qū)崟r(shí)地預(yù)覽 Emmet 縮寫(xiě)被展開(kāi)后的效果了。

多光標(biāo)

Emmet 操作同樣也支持多光標(biāo)，如果你創(chuàng)建了多個(gè)光標(biāo)，你可以同時(shí)在它們上面執(zhí)行 “使用縮寫(xiě)包圍” 命令。

其他操作

除了能夠展開(kāi) Emmet 縮寫(xiě)，Emmet 工具還提供了幾個(gè) HTML 的快捷命令。

第一個(gè)就是在 open 節(jié)點(diǎn)和 close 節(jié)點(diǎn)之間進(jìn)行跳轉(zhuǎn)，命令是 “Emmet: 轉(zhuǎn)制匹配對(duì)”。

第二個(gè)就是刪除節(jié)點(diǎn)。在 HTML 中刪除 HTML 節(jié)點(diǎn)最麻煩的就是你需要把開(kāi)、關(guān)兩個(gè)節(jié)點(diǎn)都刪除掉，否則 HTML 結(jié)構(gòu)就不完整了。通過(guò)命令 “Emmet：移除標(biāo)簽”，你就可以同時(shí)將開(kāi)、關(guān)兩個(gè)節(jié)點(diǎn)都刪除掉。

你還可以通過(guò) “Emmet：更新標(biāo)簽“來(lái)同時(shí)更新一對(duì)開(kāi)關(guān)節(jié)點(diǎn)（open/close tag）。

這些命令是不是在 HTML 編輯器時(shí)非常實(shí)用呢？

如何在某個(gè)語(yǔ)言中打開(kāi) Emmet 支持

默認(rèn)情況下，你可以直接在 html、haml、jade、slim、jsx、xml、xsl、css、scss、sass、less、stylus、handlebars、php 和 javascriptreact 中使用 Emmet 。但對(duì)于其他語(yǔ)言，你也可以通過(guò)如下的設(shè)置來(lái)將其打開(kāi)。

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
}

JSON

這段設(shè)置的要點(diǎn)就是，將某個(gè) Emmet 默認(rèn)不支持的語(yǔ)言，映射到一個(gè) Emmet 支持的語(yǔ)言上。比如上面的設(shè)置里，我們把 vue-html 映射成了 html，那么當(dāng)你在 vue-html 使用 Emmet 時(shí)，Emmet 就會(huì)把它當(dāng)作 html 來(lái)處理了。