最新版2017
破解
注冊時，在打開的License Activation窗口中選擇“License server”，在輸入框輸入下面的網址：
http://idea.iteblog.com/key.php
點擊：Activate即可。
按鍵設置，eclipse習慣
提示延遲設成0
js類庫提示
文件編碼
webstorm 智能提示忽略大小寫
setting-Editor-General-Code Completion里的 Case sensitive completion: 可以設置只第一個字母敏感、完全敏感或者不敏感。
選擇none。。ok
html:5或者 ! 生成 HTML5 結構html:xt生成 HTML4 過渡型html:4s生成 HTML4 嚴格型
在Webstorm2016中安裝“SVNToolBox”插件
（1）打開Webstorm2016，菜單中選擇“File >> Settings…”；
（2）單擊“Plugins”,單擊“Browse repositories”按鈕；
（3）搜索“svn”,然后在搜索結果中點擊“SVNToolBox”，單擊“Install”按鈕；；
（4）安裝完畢后“重新啟動WebStorm”；
（5）正確安裝后，再次進入Webstorm2016，選擇“File >> Settings… >> Version Control”,便可以看到這里多了Subversion的設置項，這里我們使用默認即可；
3. “SVNToolBox”插件的使用
（1） 如果你的項目是SVN受控項目，那么在WebStorm的項目根目錄上單擊右鍵，便可以看到Subversion的右鍵菜單，選擇相對應的SVN功能操作即可對項目進行操作；
（2）在項目的代碼編輯窗口，單擊右鍵，可以對該代碼文件進行SVN上傳等操作。這里我們修改下代碼后，在代碼編輯窗口中點擊右鍵，然后點擊“Subversion >> Commit File…”;
（3）選擇被修改的代碼文件，然后單擊“Commit”按鈕；
（4）提示commit成功；
WEB開發微信小程序
1.首先FileType下Cascading Style Sheet 添加*.wxss
2.FileType下HTML 添加*.wxml
3.將其中的wecharCode.jar下載下來，然后在webStorm 的 File -> import settings 中導入即可
配置已經完成，接下來你的代碼就能出現微信小程序的代碼提醒了。
生成帶有 id 、class 的 HTML 標簽
Emmet 的語法有點類似 CSS 的語法，生成 id 為 aaa 的 div 標簽，我們只需要編寫下面指令：
#aaaEmmet 默認的標簽為 div ，如果我們不給出標簽名稱的話，默認就生成 div 標簽。如果編寫一個 class 為 bbb 的 span 標簽，我們需要編寫下面指令：
span.bbb然后就生成了對應的結構。同理，如果想要編寫一個 id 為 ccc 的 class 為 ddd 的 ul 標簽，我們可以這樣寫：
ul#ccc.ddd很簡單吧？比你用手寫 id 、class 方便多了吧
生成后代：>
大於號表示后面要生成的內容是當前標簽的后代。例如我要生成一個無序列表，而且被 class 為 aaa 的 div 包裹，那么可以使用下面指令：
div.aaa>ul>li可以生成如下的結構：
<div class="aaa"> <ul> <li></li> </ul> </div>生成兄弟：+
上面是生成下級元素，如果想要生成平級的元素，就需要使用 + 號。例如下面指令：
div+p+bq就可以生成如下的 HTML 結構：
<div></div> <p></p> <blockquote></blockquote>生成上級元素：^
上級 （Climb-up）元素是什么意思呢？前面咱們說過了生成下級元素的符號“>”，當使用 div>ul>li 的指令之后，再繼續寫下去，那么后續內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標簽，那么我需要先用 “^” 提升一下層次。例如：
div>ul>li^span就會生成如下結構：
<div> <ul> <li></li> </ul> <span></span> </div>如果我想相對與 div 生成一個平級元素，那么就再上升一個層次，多用一個“^”符號：
div>ul>li^^span重復生成多份：*
特別是一個無序列表，ul 下面的 li 肯定不只是一份，通常要生成很多個 li 標簽。那么我們可以直接在 li 后面 * 上一些數字：
ul>li*5這樣就直接生成五個項目的無序列表了。如果想要生成多份其他結構，方法類似。
生成分組：()
用括號進行分組，這樣可以更加明確要生成的結構，特別是層次關系，例如：
div>(header>ul>li*2>a)+footer>p這樣很明顯就可以看出層次關系和並列關系，生成如下結構：
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>此外，分組還可以很方便的結合上面說的 “*” 符號生成重復結構：
(div>dl>(dt+dd)*3)+footer>p生成結構：
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>生成自定義屬性：[attr]
a 標簽中往往需要附帶 href 屬性和 title 屬性，如果我們想生成一個 href 為 “http://blog.wpjam.com” ，title 為“我愛水煮魚”的 a 標簽，可以這樣寫：
a[href="http://blog.wpjam.com" title="我愛水煮魚"]其他標簽和屬性都類似。
對生成內容編號：$
例如無序列表，我想為五個個 li 增加一個 class 屬性值 item1 ，然后依次遞增從 1-5，那么就需要使用 $ 符號：
ul>li.item$*5這樣就生成了如下結構：
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>$ 就表示一位數字，只出現一個的話，就從1開始。如果出現多個，就從0開始。如果我想生成三位數的序號，那么要寫三個 $：
ul>li.item$$$*5輸出：
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>只能這樣單調的生成序號？對於強大的 Emmet 來說，肯定不會會了，我們也可以在 $ 后面增加 @- 來實現倒序排列：
ul>li.item$@-*5生成如下結構：
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>同樣，我們也可以使用 @N 指定開始的序號：
ul>li.item$@3*5這樣就會從 3 開始排序，生成如下代碼：
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>配合上面倒序輸出，可以這樣寫：
ul>li.item$@-3*5生成的就是以 3 為底倒序：
<ul> <li class="item7"></li> <li class="item6"></li> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> </ul>生成文本內容：{}
上面講解了如何生成 HTML 標簽，那里面的內容呢？當然也可以生成了：
a[href="http://blog.wpjam.com"]{點擊這里到 我愛水煮魚}這樣就生成了一個到我愛水煮魚的超鏈接了。在生成內容的時候，特別要注意前后的符號關系，雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的，但是加上其他的內容就不一定了，例如：
<!-- a{click}+b{here} --> <a href="">click</a><b>here</b> <!-- a>{click}+b{here} --> <a href="">click<b>here</b></a>這樣就生成了完全不同的結構，注意這些小細節哦。
不要有空格
在寫指令的時候，你可能為了代碼的可讀性，使用一些空格什么的排版一下。這就會導致代碼無法使用。例如下面這句：
(header > ul.nav > li*5) + footer
更多代碼簡寫補全的技巧可以參考：
http://blog.wpjam.com/m/emmet-grammar/
http://www.w3cplus.com/tools/emmet-cheat-sheet.html
http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html