Emmet快速编写HTML的神器

1. Emmet简述

Emmet 的前身就是 Zen Coding。
它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具。将它整合进文本编辑器，可以提供一些功能和快捷方式，加快开发速度。提供包括Eclipse、IDEA、UltraEdit、SlickEdit 等的插件。

VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码

请注意在VsCode新版本中按Tab不再默认启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!

15_22_a0056e07ab.png

2. 举个例子

15_22_f617046a41.png

这个HTML结构，你需要多久打出来呢？
写好下面这条语句，按下键盘Tab键或者Enter键即可看到上图中的结构了

div#box>p.header+ul>li.child${demo$}*4
=>
<div id="box">
    <p class="header"></p>
    <ul>
        <li class="child1">demo1</li>
        <li class="child2">demo2</li>
        <li class="child3">demo3</li>
        <li class="child4">demo4</li>
    </ul>
</div>

3. 基本用法

3.1 元素

div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成html5标准的包含body为空基本dom
html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML
html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01
a:mail          => <a href="mailto:"></a>
a:link          => <a href="http://"></a>
base            => <base href="">
br              => <br>
link            => <link rel="stylesheet" href="">
script:src      => <script src=""></script>
form:get        => <form action="" method="get"></form>
label           => <label for=""></label>
input           => <input type="text">
inp             => <input type="text" name="" id="">
input:hidden    => <input type="hidden" name=""> input:h即可
input:email     => <input type="email" name="" id="">
input:password  => <input type="password" name="" id="">
input:checkbox  => <input type="checkbox" name="" id="">
input:radio     => <input type="radio" name="" id="">
select          => <select name="" id=""></select>
option          => <option value=""></option>
bq              => <blockquote></blockquote>
btn             => <button></button>
btn:s           => <button type="submit"></button>
btn:r           => <button type="reset"></button>

3.2 快速生成HTML结构语法

生成标签，直接输入标签名按tab键即可。比如 div => <div></div>
生成多个相同标签，加上*N。比如 div*3 可快速生成3个div
父子级关系标签，可以用 > 比如 ul>li；父级标签用 ^
兄弟关系标签，用 + 比如 div+p
带有类名或者ID名字的标签，直接写标签名.demo或者#box
自动计数的或者说有顺序的标签，可以用自增符合 $
生成标签的内容，可以用 { }表示。可以与$、lorem搭配使用
自定义属性使用标签名[attr1='' attr2='']，比如

a[href='#' data-index='$'] 
=> 
<a href="#" data-index="1"></a>

分组操作，使之成为一个整体并分离。

div>(ul>li*2+p)>a
=>
<div>
    <ul>
        <li></li>
        <li></li>
        <p></p>
    </ul>
    <a href=""></a>
</div>

3.3 CSS缩写

Emmet 有一个特殊的 CSS 解析器，可以将这些缩写扩展成一个完整的 CSS 属性。

css属性首字母加值，比如 m10 => margin: 10px; fwb => font-weight: bold;
单位转换 p => % e => em x->ex ，比如p10px5p15x => padding: 10px 5% 15ex;

CSS缩写的详细语法参考https://docs.emmet.io/css-abbreviations/

4. 进阶用法

4.1 自动计数

如果生成两位数则使用两个连续的 $，以此类推... 使用@修饰符，可以更改编号方向（@-表示降序,@+表示升序），比如 $@+、$ @-
@N可以改变起始值，需要注意的是如果配合升降序使用的话N是放到+-符后，比如 $@+10

    ul>li*5.demo$@-10 
    ul>li.demo$@-10*5
    /* 两种写法在vscode中都没有问题*/
    <ul>
        <li class="demo14"></li>
        <li class="demo13"></li>
        <li class="demo12"></li>
        <li class="demo11"></li>
        <li class="demo10"></li>
    </ul>

4.2 模拟文本/随机文本

在开发时经常要填充一些文本内容占位，Emmet内置了Lorem Ipsum功能来实现生成随机文本。loremN或者lipsumN，N表示单词数量，可在生成HTML结构时搭配使用。

(p>lorem5)*3
=>
<p>Lorem ipsum dolor sit amet.</p>
<p>Minus qui harum eos rem?</p>
<p>Ea sint ipsam beatae eum.</p>

4.3 复杂嵌套例子

div#sidebar>(p.header+div.content>ul>(li>a[href='/api/categories/$' data-index='$']>lorem4)*3)^div#main
=>
<div id="sidebar">
    <p class="header"></p>
    <div class="content">
        <ul>
            <li><a href="/api/categories/1" data-index="1">Lorem ipsum dolor sit.</a></li>
            <li><a href="/api/categories/2" data-index="2">Odit reprehenderit esse consequuntur!</a></li>
            <li><a href="/api/categories/3" data-index="3">Quidem in itaque saepe.</a></li>
        </ul>
    </div>
</div>
<div id="main"></div>

5. 扩展

中文随机文本插件

Chinese Lorem，生成简体中文的假文文本并将其插入到Visual Studio Code中。

16_00_d2126cef50.png

用法 jw88，生成88个中文文本

16_00_15ebefcb0c.png

Chinese Lorem的有个缺陷不能像Lorem一样搭配Emmet生成HTML结构