建站
咨詢
售后
建站咨詢
新聞中心
我們介紹過代碼片段（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ù)測的。
創(chuàng)新互聯(lián)專注于扶風(fēng)企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),購物商城網(wǎng)站建設(shè)。扶風(fēng)網(wǎng)站建設(shè)公司,為扶風(fēng)等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站建設(shè)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
Emmet 就是要解決這樣的問題，為你的 HTML、CSS 書寫提供類似于代碼片段的輸入方式，你只需輸入一小段縮寫，然后將其展開成最終的代碼。Emmet 的語法類似于 CSS 選擇器，你通過寫一段接近于 CSS 選擇器的代碼縮寫，然后使用 Emmet 引擎將它展開成復(fù)雜但完整的 HTML 或者 CSS 代碼。舉個(gè)最簡單的例子，比如說你在 HTML 中寫了 ul，然后 Emmet 就能夠把它展開成下面的 HTML：
HTML
這樣，你就不需要重復(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>liHTML
展開為：
HTML
兄弟節(jié)點(diǎn)操作符 Sibling: +
而如果你希望創(chuàng)建兄弟節(jié)點(diǎn)的話，則需要 + 操作符。比如，
div+p+bqHTML
會(huì)被展開成：
Hmtl
乘法操作 Multiplication: *
除了創(chuàng)建單個(gè)節(jié)點(diǎn)以外，你還可以通過 * 和數(shù)字，來創(chuàng)建多個(gè)節(jié)點(diǎn)。比如，
ul>li*3HTML
會(huì)被展開成：
HTML
Class Name, ID
另外，在書寫 HTML 的時(shí)候，你不可避免地需要給節(jié)點(diǎn)添加屬性，比如 id 和類。在 Emmet 中，它們的書寫也很方便。
比如，
ul#list>li*3HTML
你就可以通過 #list 來指定 ul 這個(gè)節(jié)點(diǎn)的 id 名。那么這個(gè)表達(dá)式會(huì)被展開為：
HTML
相信通過上面的例子，你已經(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 $}HTML
這段代碼里，# 指定了 id，.logo 指定了類的名字，*5 ，所以，這段代碼最終會(huì)被展開成：
HTML
看完上面的這些示例，你是不是十分心動(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：
HelloHTML
然后你希望把它放到一個(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"
}JSON
這段設(shè)置的要點(diǎn)就是，將某個(gè) Emmet 默認(rèn)不支持的語言，映射到一個(gè) Emmet 支持的語言上。比如上面的設(shè)置里，我們把 vue-html 映射成了 html，那么當(dāng)你在 vue-html 使用 Emmet 時(shí)，Emmet 就會(huì)把它當(dāng)作 html 來處理了。
本文名稱：創(chuàng)新互聯(lián)vscode教程：vscde支持Emmet
網(wǎng)頁鏈接：http://www.5511xx.com/article/dppiccp.html
