Visual Studio Code(代碼編輯器) v1.83.1 32位 官方中文免費(fèi)綠色版

• 類型：編譯工具
• 大?。?/span>120MB
• 語言：簡體中文
• 時(shí)間：2023-10-13

查看詳情

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

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

<ul></ul>

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

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

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

ul>li

展開為：

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

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

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

div+p+bq

會(huì)被展開成：

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

乘法操作 Multiplication: *

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

ul>li*3

會(huì)被展開成：

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

Class Name, ID

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

比如，

ul#list>li*3

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

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

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

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

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

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

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

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

Emmet in VS Code

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

展開縮寫

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

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

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

建議列表

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

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

使用縮寫包圍

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

<span>Hello</span>

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

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

多光標(biāo)

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

其他操作

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

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

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

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

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

如何在某個(gè)語言中打開 Emmet 支持

默認(rèn)情況下，你可以直接在 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"
}

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

以上就是VSCode中Emmet的用法介紹，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

VSCode中Emmet建議怎么顯示為片段?

VSCode怎么修改主題顏色? VSCode修改主題配色的技巧

最新評論