Emmet语法改善html 和 css 的工作流及格式化代码

Emmet语法

emmet语法快速生成html结构
emmet语法快速生成css样式
emmet语法格式化代码

Emmet 是一个支持大多数流行文本编辑器的极大改善 html 和 css 的工作流的一个插件。本文以vscode为例进行演示。

1.1快速生成html结构

1.生成标签，直接输入标签名按【tab】键即可。

如：英文!+【tab】键生成html骨架，标签名如div+【tab】直接生成div标签<div></div>。

2.用*实现生成多个相同的标签。

如：输入div*3按下【tab】就可快速生成3个div。

3.用>实现生成父子级标签。

如：输入ul>li+【tab】键可快速生成<ul><li></li></ul>。如果需要多个li，根据第二点再利用*实现即可，即ul>li*3+【tab】键可得

<ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

4.用+生成兄弟标签。

如：输入div+p+【tab】键生成<div></div> <p></p>

5.生成带有类名或id名的标签，.+类名或#+id名+【tab】即可。

如：.demo+【tab】键生成<div class="demo"></div>，默认生成的是div标签，若想生成其他带类名的标签，用标签名+.+类名即可，如span.yiyang+【tab】生成<span class="yiyang"></span>。#yyqx+【tab】生成<div id="yyqx"></div>，可用标签名+#+id名修改标签类型。

6.如果生成的类名是有顺序的，可用自增符号$。

如：.demo$*5可生成

    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

7.如果想要在生成的标签内写内容可以用：标签名+{}。

如：p{易烊千玺真帅}+【tab】得到
<p>易烊千玺真帅</p>
p.yyqx$*3{我是yyqx未实名女友}得到

    <p class="yyqx1">我是yyqx未实名女友</p>
    <p class="yyqx2">我是yyqx未实名女友</p>
    <p class="yyqx3">我是yyqx未实名女友</p>

8.生成上级元素：^

a^b表示生成与a的父级同级的标签b，如果有两个^符号，则再提升一级(向上找父亲)，以此类推,看不懂不要紧，上栗子。
div>p^span+【tab】得到

<div>
        <p></p>
    </div>
    <span></span>

div>ul>li^^span+【tab】得到

<div>
        <ul>
            <li></li>
        </ul>
    </div>
    <span></span>

要注意的是不能在父标签内部用^,否则无效。如：

<div>
        p^span
    </div>

结果为

<div>
        <p></p>
        <span></span>
    </div>

生成的不是与p的父级div同级的span。

1.2快速生成css样式

css采用简写形式+【tab】即可。

如：w50+【tab】生成width: 50px;
lh18+【tab】生成line-height: 18;
bgc#aaa+【tab】生成`background-color: #aaa;

1.3快速格式化代码

vscode快速格式化可用快捷键：shift+alt+f,或右键点击格式化文档。
也可以设置保存页面时自动格式化代码。设置步骤如下：
1.点击文件 —>首选项 —>设置；

2.搜索Format On Save；