Emmet语法
emmet 可以快速的编写html和css ,vscode 已经集成了这一个语法,
快速生成html
- 直接生成 标签 :输入相应标签名后按下tab键
对于标签 按下tab
<a href=""></a>
<div></div>
<span></span>
<i></i>
<img src="" alt="">
- 生成n个标签:
标签*n+tab
div*3
按下tab
<div></div>
<div></div>
<div></div>
- 生成有父子关系的标签:
标签1>标签2
div >li 按下tab
<div>
<li></li>
</div>
- 如果有并列关系:
标签1+标签2
div+p 按下tab
<div></div>
<p></p>
- 生成自带类名或者id 的div:
.类名 #id
.yxq 按下tab
<div class="yxq"></div>
#yxq 按下tab
<div id="yxq"></div>
- 生成其他标签有类名或者id 的标签:
标签.类名 标签#id
span.yxq 按下tab
<span class="yxq"></span>
span#yxq 按下tab
<span id="yxq"></span>
- 如果生成的类名(id)是有顺序的:
可以使用$自增的符号
.yxq$*4 按下tab
<div class="yxq1"></div>
<div class="yxq2"></div>
<div class="yxq3"></div>
<div class="yxq4"></div>
- 批量生成包含内容的标签 :
标签{内容}
div{yxq} 按下tab
<div>yxq</div>
- 批量生成的内容是有顺序的
div{yxq$}*5 按下tab
<div>yxq1</div>
<div>yxq2</div>
<div>yxq3</div>
<div>yxq4</div>
<div>yxq5</div>
快速生成css
例如 width:30px
只需输入 w30
就可以了 ,一般都是 开头首字母+数字就可以了
/* w30 */
width: 30px;
/* tac */
text-align: center;
vscode 快速格式化代码
我们可以设置一下vscode 使得保存文件的时候就格式化代码。
在设置
里搜索 format
然后把 format on save 勾选成 true 就好了,这样我们就可以 Ctrl+s
快速格式化代码了,又顺便保存了一下。