1. 什么是 emmet？
Emmet 是一个专门为 HTML、CSS 快速编写设计的插件和库。他基于新的 W3C 规范，支持 HTML5/HTML/XML/XSL、CSS/LESS/Sass 和其他预处理器等，它通过缩写来快速生成相应的标签以及简写 CSS 的方法，让前端开发者让HTML 和CSS 更加便捷高效。
2. 如何在项目中使用 emmet？
2.1 在浏览器中使用 emmet
通过 emmet，可以方便地在浏览器控制台进行 HTML、CSS 的编写。可以在任何一个支持JavaScript 执行的浏览器控制台（Chrome、Firefox 等）中，按下 Cmd + option + J(OSX)，或者 Ctrl + Shift J(Windows) 来打开控制台,然后将需要的 HTML、CSS快速编写出来，然后进行复制，粘贴到相应的网页中即可。
例如：
ul>li*5
会生成：
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
2.2 在 VS Code 中使用 emmet
如果你使用 Visual Studio Code 这样的编辑器进行开发，则可以使用官方提供的 emmet 扩展。该扩展可以在 VS Code 中进行快速编写 HTML、CSS 的工作。
安装 emmet 扩展（方法较为简单，请参考 VS Code 官方教程）。安装完成后，在 VS Code 编辑器中，输入以下代码：
html:5
此时，按下 Tab 键，你会发现它自动输入了 HTML 文件的基本结构。
如果你想要创造一个表格，则可以键入以下代码：
table>tr>td
再次按下 Tab，代码如下：
<table>
<tr>
<td></td>
</tr>
</table>2.3 在 WebStorm 中使用 emmet
另一个流行的 IDE 编辑器 WebStorm 也内置了 emmet 工具。与 VS Code 一样，您可以通过使用 Emmet 自动补齐来快速编写 HTML 和 CSS 代码。
在 WebStorm 中，您需要打开高级设置中的 Emmet 选项，并设置其中的选项。同样，你也可以直接输入以下代码：
ul>li*5
按下 Tab 键，它将自动展开为以下代码：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>3. 总结
在这篇文章中，我们了解了 emmet 是什么，以及如何使用 emmet 在项目中，包括在浏览器、VS Code 使用和在 WebStorm 使用。emmet 是一种非常强大的工具，可以提高我们的工作效率。所以，无论你是一名新手还是高手，它都会让你成为一个更好的前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70572