webstorm 介紹

最新版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

1.png

2.FileType下HTML 添加*.wxml

2.png

3.將其中的wecharCode.jar下載下來，而後在webStorm 的 File -> import settings 中導入便可

3.png

配置已經完成，接下來你的代碼就能出現微信小程序的代碼提醒了。

4.png

 

 

 

 

 

生成帶有 id 、class 的 HTML 標籤

Emmet 的語法有點相似 CSS 的語法，生成 id 爲 aaa 的 div 標籤，咱們只須要編寫下面指令：

#aaa

Emmet 默認的標籤爲 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>

這樣就生成了徹底不一樣的結構，注意這些小細節哦。

不要有空格

在寫指令的時候，你可能爲了代碼的可讀性，使用一些空格什麼的排版一下。這就會致使代碼沒法使用。例以下面這句：

更多代碼簡寫補全的技巧能夠參考： 

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(header > ul.nav > li*5) + footer