聞到一份超實用的WebStorm快捷鍵，真香！
- 2020 年 3 月 30 日
- 筆記
觀感度：?????
口味：可口可樂
烹飪時間：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="">
希望本文可以幫助大家節約時間，高效率的完成工作和任務，做一個快樂的程序員。
