闻到一份超实用的WebStorm快捷键真香

jiezi

5 年前

观感度：????????????????????

口味：可口可乐

烹饪时间：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. 输入 a[href=#] 加tab 键

结果：<a href="#"></a>

5. 输入 div>p*6, 加tab 键


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

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="">

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

欢迎来我的个人公众号交流，优质原创文章将同步推送。后台回复福利，即可领取福利，你懂得~

你的前端食堂，记得按时吃饭。

闻到一份超实用的WebStorm快捷键真香

常用快捷键

快速输入标签方法

交流