Emmet-快捷編寫代碼工具-前端筆記

01-29

介紹

預習的時候，看見Emmet的使用方式，我覺得是一個很棒的提高前端開發效率的插件。Emmet的前身是Zen Coding，它使用仿CSS選擇器的語法來生成代碼，大大提高了HTML/CSS代碼編寫的速度。大部分流行的編輯器都支持Emmet。

這裡我使用的是VScode,一開始我新建一個文件，按 ! +Tab鍵，並沒有出現

一個基本的 HTML 文檔,沒有展開Emmet縮寫。後面發現是需要我們手動改一下默認設置。修改如下：

文件->首選項->設置->在搜索框輸入Emmet->覆蓋默認設置

{n"emmet.triggerExpansionOnTab": falsen}n

配置完成，保存以後就能使用快捷鍵來進行高效率的開發了。

HTML文檔需要包含一些固定的標籤，比如<html>、<head>、<body>等，手打的話就比較累，但是通過快捷鍵，一秒就能完成。輸入「!」，然後按Tab鍵：

後代：>

div>ul>li n

兄弟：+

div+p+bq n

父元素：^

可以使該符號前的標籤提升一行

div+div>p>span+em^bq n

分組：()

div>(header>ul>li*2)+footer n

乘法：*

ul>li*5 n

自增符號：$

ul>li.item$*3n

ID和類屬性:

可添加多個class

div#heade+div.page n

自定義屬性:

p[title="Hello world"]n

文本：{}

a{Click me} n

隱式標籤:

.classn

更多的用法可以看Emmet參考