1、簡(jiǎn)介

Emmet語法的前身是Zen coding,它使用縮寫,來提高h(yuǎn)tml/css的編寫速度, Vscode內(nèi)部已經(jīng)集成該語法。

2、快速生成HTML結(jié)構(gòu)語法

• 生成標(biāo)簽 直接輸入標(biāo)簽名 按tab鍵即可。比如 div 然后tab 鍵， 就可以生成 <div></div>
• 如果想要生成多個(gè)相同標(biāo)簽 加上 * 就可以了。比如 div*3 就可以快速生成3個(gè)div
• 如果有父子級(jí)關(guān)系的標(biāo)簽，可以用 >。比如 ul > li就可以了
• 如果有兄弟關(guān)系的標(biāo)簽，用 + 就可以了。比如 div+p
• 如果生成帶有類名或者id名字的，直接寫 .demo 或者 #two tab 鍵就可以了
• 如果生成的div 類名是有順序的，可以用自增符號(hào) $
• 如果想要在生成的標(biāo)簽內(nèi)部寫內(nèi)容可以用 { } 表示

3、快速生成CSS樣式語法

CSS 基本采取簡(jiǎn)寫形式即可

• 比如 w200 按tab 可以 生成 width: 200px;
• 比如 lh26px 按tab 可以生成 line-height: 26px;

4、快速格式化代碼

Vscode 快速格式化代碼: shift+alt+f
也可以設(shè)置當(dāng)我們保存頁面的時(shí)候自動(dòng)格式化代碼:
1）文件 ------.>【首選項(xiàng)】---------->【設(shè)置】；
2）搜索emmet.include;
3）在settings.json下的【工作區(qū)設(shè)置】中添加以下語句：

"editor.formatOnType": true,

"editor.formatOnSave": true