Emmet語法的前身是Zen coding,它使用縮寫,來提高html/css的編寫速度, Vscode內部已經集成該語法。
快速生成HTML結構語法
快速生成CSS樣式語法
2、快速生成HTML結構語法
-
生成標簽 直接輸入標簽名 按tab鍵即可 比如 div 然后tab 鍵， 就可以生成 <div></div>
-
如果想要生成多個相同標簽 加上 * 就可以了 比如 div*3 就可以快速生成3個div
-
如果有父子級關系的標簽，可以用 > 比如 ul > li就可以了
-
如果有兄弟關系的標簽，用 + 就可以了 比如 div+p
-
如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #two tab 鍵就可以了
-
如果生成的div 類名是有順序的， 可以用 自增符號 $
-
如果想要在生成的標簽內部寫內容可以用 { } 表示
3、快速生成CSS樣式語法
CSS 基本采取簡寫形式即可
比如 w200 按tab 可以 生成 width: 200px;
比如 lh26px 按tab 可以生成 line-height: 26px;
4、快速格式化代碼
Vscode 快速格式化代碼: shift+alt+f
也可以設置 當我們 保存頁面的時候自動格式化代碼:
1）文件 ------.>【首選項】---------->【設置】；
2）搜索emmet.include;
3）在settings.json下的【工作區設置】中添加以下語句：
"editor.formatOnType": true,
"editor.formatOnSave": true
4）自動保存---->文件---->自動保存