使用vscode 快速编写html 和css

使用vscode 快速编写html 和css

越行勤 905 2020-12-12

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快速格式化代码了,又顺便保存了一下。
79A59EF56224B22753145CEA8E88BAA2-dfc4efa7ed3d4a6480b9233445c2e872