闻到一份超实用的WebStorm快捷键，真香！---童欧巴

观感度：?????

口味：可口可乐

烹饪时间：15min

工欲善其事，必先利其器

--《论语·卫灵公》

所有快捷键均经过亲自测试！！！

以下的快捷键可以帮助你节约大量时间，我们的口号是：不加班！！！

强烈建议先收藏后阅读！！！

并一定要实际应用起来，可以帮助你节约很多时间，时间=金钱，掌握他们可以让你敲代码喝快乐水的时候能够更加快乐！！！

常用快捷键

command + b 跳到变量声明处 // 跳跳蛙 找爸爸 command + r 当前页替换 command + shift + r 全局替换 // 很巴适的功能 command + d 行复制 // 复制当前行到下一行 command + / 当前行注释 command + shift + / 块注释 // 注释没什么好说的 command + shift + +/- 展开/折叠 当前选中的代码块 // 当你写了很长很长的代码时，你可以使用它快速展开折叠，而节约上下翻页的时间 command + option + L 格式化代码 // 立正 稍息 command + shift + up/down 上下移动当前行代码 // 没什么好说的 command + F 当前页查找 command + shift + F 全局搜索内容 // 查找还是很常用 command + shift + o 搜索文件 // 搜索 command + 1 快速打开或隐藏工程面板 // 也就是打开隐藏侧边栏 command + x 删除当前行 // 删除后可以粘贴，就是保留了当前行 command + 后退格 删除当前鼠标所在行 // 删除当前行 不可以粘贴 command + e 打开最近打开的文件或者项目(支持文件名搜索) // 近期浏览文件历史 command + shift + v 选择粘贴剪切板上的内容(具有剪切板记忆功能) // 粘贴剪切板历史 command + c 复制 command + v 粘贴 // 没啥说的 但这俩元老级别得压轴出场 command + shift + u 大小写转换 // 大小写转换 command + w 关闭当前文件选项卡 // 关闭当前页签 option + 鼠标单击 光标在多处定位 // 用于统一编辑或修改 option + enter 自动修正 激活小灯泡 // eslint开启时可以快速点亮小灯泡，来修正代码。不用你滑鼠标或者触控板来回找 shift + 回车 软回车 //无论光标处于前一行的什么位置，都能定位到下一行 代码标签输入完成后，按Tab，生成代码。 // 没啥说的 基本操作

ok，总结完了基本的快捷键操作，是不是觉得很巴适，有很多在以后的编程中你会逐渐体会到并觉得十分好用，十分节约时间。

快速输入标签方法

>:下一个子标签，用于父子标签的连接*:多少个子标签，后面跟子标签的个数$:标签的名称序号，可以理解为for循环中的i{}:标签的内容，标签中的文字等需要在{}表示

看不懂没关系，一大堆?正在抵达战场，请跟随我一起敲出它们。

1.输入:h1，加tab键

<h1></h1>

2.输入：div#abc，加tab键

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

3.输入：div.abc，加tab键

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

4.输入：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>

6.输入 ul>li*5>a[href=#]{我是第$个}，加tab键

<ul> <li><a href="#">我是第1个</a></li> <li><a href="#">我是第2个</a></li> <li><a href="#">我是第3个</a></li> <li><a href="#">我是第4个</a></li> <li><a href="#">我是第5个</a></li> </ul>

7.输入 img[src='images/$.jpg']*3，加tab键

<img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt="">

8.输入 li*3>div.img>img[src='images/$.jpg']，加tab键

<li> <div class="img"><img src="images/1.jpg" alt=""></div> </li> <li> <div class="img"><img src="images/2.jpg" alt=""></div> </li> <li> <div class="img"><img src="images/3.jpg" alt=""></div> </li>

9.快速生成for循环代码块

<script> /* for循环：输入itar,再点击tab键*/ for (var i = 0; i < array.length; i++) { var obj = array[i]; } </script>

10.输入div#tab1+div#tab2，加tab键

+ : 表示并列的标签 <div id="tab1"></div> <div id="tab2"></div>

11.引入link，script标签

<!--引入link，输入link，加tab键--> <link rel="stylesheet" href=""> <!--引入css 输入link:css，加tab键 --> <link rel="stylesheet" href="css/mycss.css"> <!--引入js 输入script:src，加tab键--> <script src=""></script> <!--html中插入js 输入script，加tab键--> <script></script>

12.快速输入ul、li

<!--ul及1个li 输入ul+，加tab键 --> <ul> <li></li> </ul> <!--ul及3个li 输入ul>li*3，加tab键 --> <ul> <li></li> <li></li> <li></li> </ul> <!--输入ul>li.item$*6，加tab键--> <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> </ul>

13.快速输入多个标签

<!--输入a:link，加tab键 --> <a href="http://"></a> <!--1个P标签：输入p，加tab键--> <p></p> <!--两个P标签：输入p+p，加tab键--> <p></p> <p></p> <!--三个P标签：输入p*3，加tab键--> <p></p> <p></p> <p></p>

14.快速输入带类名的标签

<!--输入div.one.two，加tab键--> <div class="one two"></div> <!--输入form:get，加tab键--> <form action="" method="get"></form> <!--输入form:post，加tab键--> <form action="" method="post"></form> <!--输入input:button，加tab键--> <input type="button" value="">

希望本文可以帮助大家节约时间，高效率的完成工作和任务，做一个快乐的程序员。

---来自腾讯云社区的---童欧巴