vscde 支持Emmet

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

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

<ul></ul>

HTML

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

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

首先是子節(jié)點操作符，通過 > 符號來指明節(jié)點之間的層級關(guān)系。你可以將

ul>li

HTML

展開為：

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

HTML

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

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

div+p+bq

HTML

會被展開成：

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

Hmtl

乘法操作 Multiplication: *

除了創(chuàng)建單個節(jié)點以外，你還可以通過 * 和數(shù)字，來創(chuàng)建多個節(jié)點。比如，

ul>li*3

HTML

會被展開成：

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

HTML

Class Name, ID

另外，在書寫 HTML 的時候，你不可避免地需要給節(jié)點添加屬性，比如 id 和類。在 Emmet 中，它們的書寫也很方便。

比如，

ul#list>li*3

HTML

你就可以通過 #list 來指定 ul 這個節(jié)點的 id 名。那么這個表達式會被展開為：

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

HTML

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

這就是 HTML、CSS 這兩門語言的一個進階版的代碼片段。最后我們看下官方文檔里提供的第一個例子：

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

HTML

這段代碼里，# 指定了 id，.logo 指定了類的名字，*5 ，所以，這段代碼最終會被展開成：

<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

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

Emmet in VS Code

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

展開縮寫

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

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

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

建議列表

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

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

使用縮寫包圍

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

<span>Hello</span>

HTML

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

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

多光標(biāo)

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

其他操作

除了能夠展開 Emmet 縮寫，Emmet 工具還提供了幾個 HTML 的快捷命令。

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

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

你還可以通過 “Emmet：更新標(biāo)簽“來同時更新一對開關(guān)節(jié)點（open/close tag）。

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

如何在某個語言中打開 Emmet 支持

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

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

JSON

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