webstorm-快捷键-使用技巧

这里总结了一些关于webstorm开发工具的快捷键和使用技巧，希望对你有所帮助 0~0

---

webstorm-快捷键-使用技巧 快捷键 1 自动注释和撤销注释：ctrl+/2 自动补全html标签3 自动整理代码格式进行对齐4 寻找代码片段5 寻找代码定义位置6 大小写转化7 全局查找8 查找最近打开的文件9 多光标

快捷键

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>

又如：

input[value=6 placehoder=此刻的想法...]

tab后补全为：

<input type="text" value="6" placehoder="此刻的想法...">

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

选中要整理的代码

windows：

CTRL+ALT+L

Mac:

command+option+L

4 寻找代码片段

有时候我们需要寻找一些特定的样式或函数，只需要右键要寻找的目录，选择 find in path,输入要寻找的内容，webstorm就会自动寻找所有包含该内容的文件了。

5 寻找代码定义位置

很多时候我们想查找某个函数或者变量定位的位置，按住command（ctrl）键，点击要查找的内容，webstorm就会自动跳转到它定义的地方了，这个方法能够很好的提高开发和阅读代码的效率。

6 大小写转化

有时候需要快速的把一段字母转成全大写或全小写，只需要使用：

Command（ctrl）+shift+U

7 全局查找

双击 shift 键

8 查找最近打开的文件

Ctrl + E

9 多光标

Ctrl + Shift + Alt +鼠标左键点击