以前用Webstotm 寫前端，一直，用一些 Emmet語法，尷尬的是，根本不知道這就是Emmet語法...
今天也是湊巧，索性，把Webstorm（常見配置+Emmet簡單語法）一起整理一下。
Webstorm常見配置。
自己日常也寫過一些，加上也參考一些百度上寫的不錯的文章。比較雜，下面就直接上鏈接了。
常用的也就，一些主題配色、項目多開、還有設置默認編碼，快捷鍵之類的。還有一些用不到的。
具體操作細節，自行點擊下方鏈接即可：
Webstorm--常見配置
WebStorm的快捷鍵，技巧
webstorm 格式化代碼快捷鍵
剩下想說的就是Emmet的簡單語法，操作。
原來寫項目一直在用 Emmet語法，例如：ul>li*6 等等，下面會詳細說。
百度得知，其實webstorm自帶emmet插件。用過zen coding的人應該都知道，emmet就是zen coding的升級版。
當然，webstorm也不是支持所有的emmet語法，不過夠用了。可以參考此文Enabling Emmet Support看看具體情況。
Webstorm 支持的 Emmet 語法參考鏈接
但是搞不懂，網上也有人讓在Webstorm中自行安裝 Emmet插件的。我安裝和不安裝沒測試出來區別。可能用的功能太基礎，也可能太菜了吧。
webstrom 自行安裝 步驟：（其實也很簡單）
界面左上角 File > setting > plugins 中搜索 Emmet ，安裝Emmet everywhere之后，重啟webstrom即可。
插件搜索后，如下圖：插件中還舉了一個例子。
最后就發一些，我經常用到的 Emmet的簡單語法，我都能用到，相信也能幫助到你。
HTML模板生成，這個貌似 sublime Text 中用的多，不過也應該知道一下。
！ +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插件 中，loremn(n為字母個數) 可自動輸出 n個字母組成 的文本內容。
以后想起來啥，再來補充。
by不言謝。