webstorm經常使用功能快捷方式

1 自動註釋和撤銷註釋：ctrl+/

在一句代碼前面用 ctrl+/ 能夠自動註釋和撤銷註釋，js,html均可以，很好的省去了敲註釋符的時間 
（mac下爲command+/,下同）

2 自動補全html標籤

咱們知道在使用Linux命令的時候按tab鍵有自動補全的功能，在不少編譯器裏也是，在webstorm中當你想敲一些html元素時，好比:

(1)想敲一對h1標籤，只須要敲h1,按tab鍵，變回自動補全爲：

<h1></h1>

• 1

• 1

(2)想輸入帶id的，如

<div id="abc"></div>

• 1

• 1

只須要輸入:div#abc,按Tab鍵，便會自動補全。

(3)想輸入帶class的，如

<div class="abc"></div>

• 1

• 1

只須要輸入:div.abc,按Tab鍵，便會自動補全。

(4)想輸入一個div裏有6個p標籤，只須要輸入: 
div>p*6 ,按Tab鍵，便會自動補全爲：

<div> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

（5）特定屬性的標籤的補全：

a[href=#]

• 1

• 1

tab後：

<a href="#"></a>

• 1

• 1

再如：

ul.menu>li*6>a[href=#]{HTML}

• 1

• 1

tab後補全爲：

<ul class="menu"> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> <li><a href="#">HTML</a></li> </ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

更多代碼簡寫補全的技巧能夠參考： 
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

3 自動整理代碼格式進行對齊

選中要整理的代碼

windows：

CTRL+ALT+L

• 1

• 1

Mac

command+option+L

• 1

• 1

4 尋找代碼片斷

有時候咱們須要尋找一些特定的樣式或函數，只須要右鍵要尋找的目錄，選擇 find in path,輸入要尋找的內容，webstorm就會自動尋找全部包含該內容的文件了。

5 尋找代碼定義位置

不少時候咱們想查找某個函數或者變量定位的位置，按住command（ctrl）鍵，點擊要查找的內容，webstorm就會自動跳轉到它定義的地方了，這個方法可以很好的提升開發和閱讀代碼的效率。

6 大小寫轉化

有時候須要快速的把一段字母轉成全大寫或全小寫，只須要使用：

Command（ctrl）+shift+U

7 全局查找

雙擊 shift

8 查找最近打開的文件

Ctrl + E

更多webstorm快捷功能參考：

webstorm那些好用的特性： 

http://blog.allenice233.com/2014/06/23/webstorm%E9%82%A3%E4%BA%9B%E5%A5%BD%E7%94%A8%E7%9A%84%E7%89%B9%E6%80%A7/