Vscode之Emmet语法简单介绍

1.Emmmet语法

Emmet语法的前身是Zen coding，它使用缩写来提高html和css的编写速度。

1.1 快速生成HTML标签

1. 生成标签：直接输入标签名，按tab建即可，eg: div 然后按tab 就可以生成

<div></div>

2. 如果想生成多个相同的标签，只需在标签后面加上就可以，eg:div3,就可以快速生成3个div标签。
3. 如果有父子级关系，用>符号就可以，eg :ol>li 。
4. 如果有兄弟级关系，用+号就可以了，eg:div+p。生成一个p和一个div。
5. 如果生成带有类名或者id名的，直接写.类名或者#two 然后按tab键就可以了。
6. 如果生成的div类名是有顺序的，可以用自增符号$。
7. 如果想添加带内容的标签，只需要在标签名后面加上{标签内容}就可以了 eg: div{标签内容}

1.2 快速生成CSS样式语法

css基本采用简写形式即可，emmet语法会自动补全。
eg :
w200 按tab 生成 width: 200px;
h200 按tab 生成 height: 200px;

1.3快速格式化代码

vscode快速格式化代码 shift+alt+f
同时我们也可以设置自动格式化代码，当我们保存代码时会自动格式化
设置方法：

1. 点击文件按钮---->首选项----->设置
2. 搜索emmet.include;
3. 在settings.json下的工作区设置中添加以下语句：

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