前端学习总结（二十）那些你可能不知道却强大方便的WebStorm快捷键

1 自动注释和撤销注释：ctrl+/

在一句代码前面用 ctrl+/ 可以自动注释和撤销注释，js,html都可以，很好的省去了敲注释符的时间

（mac下为command+/,下同）

2 自动补全html标签

我们知道在使用linux命令的时候按tab键有自动补全的功能，在很多编译器里也是，在webstorm中当你想敲一些html元素时，比如:

(1)想敲一对h1标签，只需要敲h1,按tab键，变回自动补全为：

<h1></h1>

(2)想输入带id的，如

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

只需要输入:div#abc,按Tab键，便会自动补全。

(3)想输入带class的，如

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

只需要输入: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>

（5）特定属性的标签的补全：

a[href=#]

tab后：

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

再如：

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

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>

更多代码简写补全的技巧可以参考：

http://blog.wpjam.com/m/emmet-grammar/

/article/1214440.html

http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html

3 自动整理代码格式进行对齐

选中要整理的代码

windows：

CTRL+ALT+L

Mac

command+option+L