Emmet语法

提高html/css编写速度,VSCode内部已集成该语法

快速生成HTML结构语法

1. 生成标签,直接输入标签名 按tab键 比如:div然后tab键,就生成了<div></div>
2. 生成多个相同标签 加*就可以了 比如: div*3 就生成了三个div
3. 有父子级标签 可以用> 比如: ul>li就可以了
4. 有兄弟级标签 可以用+ 比如: div+p
5. 生成带有类名或者id名字 直接写.nav或者#two tab键即可
6. 生成的div类名是有顺序的 可以用自增符号$ 比如: div.nav$*5
7. 要在生成的表情内部写内容可以用{}表示 比如: div{我是谁} div{$}*5

快速生成CSS样式语法

可以通过简写自动提示
类似于如下简写,其他以此类推

<style>
     .one {
        text-align: center; /*tac*/
        text-indent: 2em; /*ti2e*/
        width: 100px; /*w100*/
        line-height: 26; /*lh26*/
    }
</style>

快速格式化代码

VSCode快速格式化代码 alt/option + shift + f
也可以设置当我们保存页面的时候自动格式化代码

1. code------>首选项----->设置
2. 搜索emmet.include
3. 打开setting.json下的用户中添加以下语句

   "editor.formatOnType":true,
   "editor.formatOnSave":true
   

只需设置一次即可,以后都可以自动保存格式化代码