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

喜欢ヅ旅行 2021-12-17 18:34 244阅读 0赞

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

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

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

**2 自动补全html标签**

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

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

*  1

(2)想输入带id的，如

*  1

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

(3)想输入带class的，如

*  1

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

(4)想输入一个div里有6个p标签，只需要输入:  
**div>p\*6 ,按Tab键**，便会自动补全为：

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

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

a[href=#]

*  1

tab后：

*  1

再如：

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

*  1

tab后补全为：

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

更多代码简写补全的技巧可以参考：  
[http://blog.wpjam.com/m/emmet-grammar/][http_blog.wpjam.com_m_emmet-grammar]  
[http://www.w3cplus.com/tools/emmet-cheat-sheet.html][http_www.w3cplus.com_tools_emmet-cheat-sheet.html]  
[http://www.ruanyifeng.com/blog/2013/06/emmet\_and\_haml.html][http_www.ruanyifeng.com_blog_2013_06_emmet_and_haml.html]

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

选中要整理的代码

windows：

CTRL+ALT+L

*  1

Mac

command+option+L

*  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/][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]

[http_blog.wpjam.com_m_emmet-grammar]: http://blog.wpjam.com/m/emmet-grammar/
[http_www.w3cplus.com_tools_emmet-cheat-sheet.html]: http://www.w3cplus.com/tools/emmet-cheat-sheet.html
[http_www.ruanyifeng.com_blog_2013_06_emmet_and_haml.html]: http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html
[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]: 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/