聞到一份超實用的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.輸入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="">

複製代碼

但願本文能夠幫助你們節約時間，高效率的完成工做和任務，作一個快樂的程序員。

交流

歡迎來個人我的公衆號交流，優質原創文章將同步推送。後臺回覆福利，便可領取福利，你懂得~

你的前端食堂，記得按時吃飯。