Emmet

■ 关于Emmet

在前端开发的过程中，最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等，头疼

这里推荐一个Emmet语法规则，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构

Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用

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

■ 快速生成HTML结构语法

　　生成标签，直接输入标签名，按tab键即可，比如div，然后tab键，就可以生成<div></div>

　　如果想要生成多个相同标签，加上 * 就可以了，比如div*3就可以快速生成3个div,注意*两边不能有空格

　　如果有父子级关系的标签，可以用>,比如 ul > li就可以了

　　如果有兄弟关系的标签，用 + 就可以了，比如 div + p

　　如果生成带有类名或者id名字的div，直接写.demo或者 #two tab键就可以了

　　如果生成的div类名是有顺序的，可以用自增符号 $，如.demo$*5 tab键，则生成5个div，每个div调用class依次为demo1....demo5

　　如果想要在生成的标签内部写内容，可以用{}表示

■ 快速生成CSS样式语法

　　ih200px tab键 就可以自动生成 inline-height: 200px;

■ 格式化文档

以下两种方法在vscode上格式化文档

　　方法1：

　　鼠标右键 --> 格式化文档 : ctrl + shift + F

　　方法2：

　　1) 文件 --> 首选项 --> 设置

　　2) 搜索emmet.include

　　3) 在settings.json下的用户中添加以下语句：

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

 

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