以前用Webstotm 写前端，一直，用一些 Emmet语法，尴尬的是，根本不知道这就是Emmet语法...
今天也是凑巧，索性，把Webstorm（常见配置+Emmet简单语法）一起整理一下。
常用的也就，一些主题配色、项目多开、还有设置默认编码，快捷键之类的。还有一些用不到的。
具体操作细节，自行点击下方链接即可：
！ +Tab (Emmet语法默认最后都是+Tab ，下面我就不再多说了)
语法 一：新增 p元素 带数字（语法+效果）
p{$}*5
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p>
语法二：新增 ul li 带数字内容（语法+效果）
ul>li{这是第$个li}*5
<ul> <li>这是第1个li</li> <li>这是第2个li</li> <li>这是第3个li</li> <li>这是第4个li</li> <li>这是第5个li</li> </ul>
语法三：新增 元素 带 类名（语法+效果）
span.box
<span class="box"></span>
语法四：新增 元素 带 类名+ id（语法+效果）
span.box#idbox
<span class="box" id="idbox"></span>
语法五：最后来个嵌套多的。（细品，你细品就会发现很多时候都会用到。）
#page>div.logo+ul#nav>li*5>a{Item $}
<div id="page"> <div class="logo"></div> <ul id="nav"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div>
注：
1、在 Emmet插件 中，可以利用如：h1{元素内容$}*n 的方式，自动复制生成 n行，$ 的作用是自动升序生成序号，便于测试。
2、在 Emmet插件 中，输入自动输出 n个字母组成 的文本内容。
原文：https://www.cnblogs.com/byx1024/p/12837934.html