webstorm快捷键集锦

	最近在整php前后端工作，在使用webstorm这个前端IDE的时候，发现有些快捷键很有用，怕遗忘，特在此记录！

console的快速log输出

如果定义了一个变量str，需要在浏览器console界面输出，则需要用到log()函数，类似下面的代码。在webstorm里面，只需要输入下面代码块注释部分，var.log，然后按tab键，会自动补全为console.log(str)。

let str = 1;
//str.log
console.log(str);

批量创建html tag

比如需要创建5个button tag，只需要像下面代码块中的注释那样输入button{按钮$}*5，然后按tab键，在webstorm里面，会自动创建5个button，其他tag也适用。

    <!--button{按钮$}*5  加上tab键，快速创建5个button标签-->
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

webstorm活动模板设置

通过活动模板的设置，可以将常用的tag块设置为一个指令，然后输入该指令，可以一下输出整个tag块，就不用每次输入同样的内容了，设置步骤如下：
1、打开webstorm设置界面

2.选择Editor->Live Templates(活动模板)

3.新建Live Templates

==4.指令和描述，比如我建立了一个vue指令，当我在html中输入vue，按tab后，会自动将Template text中的内容输出。