什么是 emmetjs
emmetjs 是一款前端开发时常用的文本快速输入工具，可以快速的生成 html 和 css 代码。
它的使用方法非常简单，只需要安装到项目中就可以使用了。
如何安装 emmetjs
在使用 emmetjs 之前，需要先在项目中安装 emmetjs 包。
可以使用 npm 工具来完成此操作，输入以下命令：
npm install emmet
如果需要在其他项目中使用 emmetjs，重复以上命令即可。
如何使用 emmetjs
emmetjs 的使用非常简单，在 html 或 css 文件中，输入相应的 emmet 缩写即可自动生成标签和样式。
例如，在 html 中输入以下 emmet 缩写：
ul>li*5>a[href="#"]
按下 TAB 键，即可自动生成如下代码：
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>相应的，在 css 文件中输入如下 emmet 缩写：
dib
按下 TAB 键，即可自动生成如下代码：
display: inline-block;
emmetjs 缩写语法
emmetjs 的缩写语法是一种结构化的语法，可以快速生成 html 和 css 代码，并且支持嵌套和属性设置等操作。
常用的缩写语法如下：
标签生成：使用标签名称或缩写表示
- div：生成 div 标签
- p：生成 p 标签
- h1<del>h6：生成 h1</del>h6 标签
- a：生成 a 标签
- img：生成 img 标签
属性设置：在标签名称后使用大括号表示
- a[href=#]{link}：生成带有链接文本的 a 标签
- img[src=image.jpg]：生成带有图片的 img 标签
索引重复：在标签名称后使用 * 数字 表示
- ul>li*5：生成 5 个 li 标签的 ul 列表
父子嵌套：使用 > 表示父子关系
- .wrapper>.title：生成一个类名为 wrapper 的 div，其中包含一个类名为 title 的 div
兄弟关系：使用 + 表示兄弟关系
- h1+p：生成一个 h1 标签和一个 p 标签，并列在一起
以上仅为常用的 emmetjs 缩写语法，更多语法请查看官方文档。
总结
通过本文的介绍，我们了解了什么是 emmetjs，以及如何安装和使用 emmetjs，并且深入了解了 emmetjs 的缩写语法。使用 emmetjs 可以大大提高前端开发效率，是我们开发过程中的必备工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1da563576b7b1eccbb