前端开发神器emmet使用总结

linco
125 阅读2分钟

作者：linklinco@github

1、前言

传统的前端开发是很繁琐的过程，因此诞生了很多JS框架比如jQuery、Vuejs等等，很多CSS预处理器比如SASS，LASS等。而emmet是优化HTML代码开发速度的工具，可以极大的提高编写HTML代码的效率。

vscode中已经内置了emmet语法，我们可以很方便地使用。

2、基础语法

2.1 生成基本HTML框架

在html文档中，输入!,再按Tab键，就可以自动生成一个简单的HTML架构。非常的方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
2.2 生成我们想要的元素标签

直接输入你想要的HTML标签，比如main然后按Tab，就自动生成了HTML标签。

<main></main>
2.3标签的复合

像css选择器一样，我们可以通过复合标签写法，来生成包含ID，class，属性的html标签。

div#hello => <div id="hello"></div>
div.world => <div class="world"></div>
a[href="www.baidu.com"] => <a href="www.baidu.com"></a>
ul>li =>    <ul><li></li></ul>
main+footer =>    <main></main><footer></footer>

父级嵌套

main>ul>li^footer

<main>
    <ul>
        <li></li>
    </ul>
    <footer></footer>
</main>
2.4 文本操作符

可以使用{文本内容}把文本添加到生成的元素里

p{hello world} => <p>hello world</p>

模拟文本，有时需要填充无意义的文本来占位，emmet提供了生成随机文本的功能，使用lorem,比如

p>lorem10  =>  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum, corrupti.</p>

这里的10是告诉Emmet需要10个随机文本，如果你愿意，可以写1000.

2.5乘法操作符

有时需要生成一堆重复的标签，可以直接使用*来生成重复的标签，比如

ul>li*5

生成

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

生成的时候也可以使用$来自动计数，比如

ul>li{$}*5

生成

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

如果要生成两位数可以使用两个&&，以此类推可以生成n位数。

如果要生成降序的，可以在&后面添加@-来降序，或者@n来改变起始值

比如

ul>li{$@-}*5

生成

<ul>
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
</ul>

ul>li{$@-10086}*5

生成

<ul>
    <li>10090</li>
    <li>10089</li>
    <li>10088</li>
    <li>10087</li>
    <li>10086</li>
</ul>
2.6分组操作符

使用()可以生成不同组的html标签，比如

main>(article>section*3)*3

可以生成

<main>
    <article>
        <section></section>
        <section></section>
        <section></section>
    </article>
    <article>
        <section></section>
        <section></section>
        <section></section>
    </article>
    <article>
        <section></section>
        <section></section>
        <section></section>
    </article>
</main>

3、实战

通过前面基础语法的配合，我们可以快速地生成HTML标签，比如下面这个复杂的例子

nav>ul>(li.name.data-$>lorem1)*5^^main>(article>section*3)*4^footer

可以生成

    <nav>
        <ul>
            <li class="name data-1">Lorem.</li>
            <li class="name data-2">Maxime.</li>
            <li class="name data-3">Perspiciatis!</li>
            <li class="name data-4">Sit.</li>
            <li class="name data-5">In!</li>
        </ul>
    </nav>
    <main>
        <article>
            <section></section>
            <section></section>
            <section></section>
        </article>
        <article>
            <section></section>
            <section></section>
            <section></section>
        </article>
        <article>
            <section></section>
            <section></section>
            <section></section>
        </article>
        <article>
            <section></section>
            <section></section>
            <section></section>
        </article>
    </main>
    <footer></footer>

这样一个完整的HTML，合理地使用emmet，能大幅度减少我们写html标签的时间。

avatar
文章
阅读
粉丝