webstorm常用功能快捷键操作，以及常用代码补全，加快开发效

1.基本快捷键操作

ctrl + r ： 替换
ctrl + shift + r ： 全局替换
ctrl + f ： 查找
ctrl + shift + f ： 全局查找
ctrl + y ： 删除当前行
ctrl + d ： 复制当前行，粘贴到下一行
ctrl + / ： 注释当前行
ctrl + shift + / ：注释选中块
ctrl + shift +up ： 向上移动块
ctrl + shift +down ： 向下移动块
tab ： 选中文本整行向后缩进
shift + tab ： 选中文本整行向前缩进
ctrl + 鼠标左键 ： 点击类名，方法名，引入的js等，能直接跳转到相应位置

通用快捷键，别处也可用
ctrl + c ： 复制
ctrl +v ： 粘贴
ctrl + x ： 剪切

2.基本的代码补全功能

1.纯标签补全，输入div然后按tab

<div></div>

2.带类名的补全，输入div.main-box，然后按tab

<div class="main-box"></div>

3.带id的补全，输入div#main-box，然后按tab

<div id="main-box"></div>

4.带标签嵌套的补全，输入div.main-box>div.child-box然后按tab

<div class="main-box">
  <div class="child-box"></div>
</div>

5.一次性渲染9个div,输入div*9，然后按tab

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

6.渲染特定属性以及标签内容,输入a[href='www.baidu.com']{html},然后按tab

<a href="www.baidu.com">html</a>

7.渲染两个同级的div，输入div+div，然后按tab

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

8.渲染自动从1开始的自动标号,输入div#item$.class$$*3,然后按tab

<div id="item1" class="class01"></div>
<div id="item2" class="class02"></div>
<div id="item3" class="class03"></div>

引用阮一峰教程的一段话就是

1. E 代表HTML标签。
2. E#id 代表id属性。
3. E.class 代表class属性。
4. E[attr=foo] 代表某一个特定属性。
5. E{foo} 代表标签包含的内容是foo。
6. E>N 代表N是E的子元素。
7. E+N 代表N是E的同级元素。
8. E^N 代表N是E的上级元素。

3.webstorm内直接运行命令提示符，直接敲npm命令,点击Terminal即可

Terminal