牆裂推薦：工欲善其事必先利其器(實際開發中高頻使用)
一. 截圖工具Snipaste（截圖置頂Windows介面）
百度雲盤下載 提取碼：5lym
人眼是資訊採集最多的人類器官，同時檢視的資訊量多少決定了你的效率高低。
截圖取色工具千千萬萬，Snipaste is my favorite one（中式英語押韻，嘻嘻）。它包括基本的取色，截圖，標註等截圖工具的基本功能。它吸引我的是可以將截圖置頂Windows介面。這個功能不單單可以應用到程式碼開發過程中，還可以在肉眼相關的對比，匹配的日常工作中大展身手。
現實開發中我們常常需要在開發介面，頁面，UI或者其他介面中來回切換，進行檢視某些資訊，除非你記憶超群。實際上我們關注的資訊點可能就是其中的一小點，如：network中返回值的結構和欄位、某部分UI的效果等。沒有發現這個工具之前我一般通過半屏方式來處理，但半屏是小螢幕的噩夢。
通過截圖置頂Windows介面可以方便我們同時檢視多個資訊源。下面是簡單例子的截圖，沒有進行過PS。
二. VSCode 外掛
1. Better Comments
註釋加上不同的字首，讓註釋具有不同的含義的表現，主要有以下三種。能在眾多普通註釋中亮瞎自己的狗眼。
2. Bracket Pair Colorizer
括號匹配，顏色區別，當程式碼巢狀多的時候能快速發現是否有缺括號
3. ident-rainbow
碰上彩虹，吃定彩虹。
縮排匹配，特別是在編輯html的時候，編輯巢狀層級深。
4. change-case
現實開發中常有同一個含義的變數，根據其作用含義會用不同的形式去定義，如：常量（ABC_DEF），變數（abcDef），Fucntion名（AbcDef），html屬性（abc-def），路徑（abc/def）等，有時候我們還會將翻譯拷貝過來作為變數（abc def）。平時我們一般手動去刪除字元修改。有了change-case你只需要輸入幾個快捷鍵就能完成上面繁瑣的修改。
使用方法：(當然也可以設定對應模式的快捷鍵，可以挑幾個常用的進行設定)
- 選中需要操作的字元
- 快捷鍵輸入：ctrl + shift + p 開啟命令列
- 輸入：change case commondands，如果之前使用過會預選上，此時只需回車
- 上下鍵選擇要切換的模式，檢視切換的效果
注意：間隔符可任意組合比如：change.case_demo-demo2 demo3 --> changeCaseDemoDemo2Demo3
5. javascript console utils
選中需要列印的內容，快捷鍵：ctrl+shift+L，自動在下面一行追加列印日誌程式碼
6. Sort Js Object keys（強迫症患者福音）
當物件屬性較多，需要去查詢特定屬性的時候，這不無是個強力助手。平時也可以用於物件屬性排序，讓資料模型更加有條理。
使用方法：
- 框選需要排序的物件(以括號為界,包含括號)
- ctrl + shift + p 開啟命令列
- 輸入sort就能找到對應命令
效果如下：
7. Code Runner
有時候想測試一些簡單的函式程式碼，可以通過在瀏覽器控制檯書寫對應程式碼執行檢視結果。這個過程比較繁瑣，而且控制檯不支援自動換行，一些語法提示等。Code Runner便能很好的解決以上的問題，它能執行你框選的程式碼，所以你只需要在編輯上編輯，框選，快捷鍵執行便能看到效果。
使用方法：
- 框選需要測試的程式碼
- 快捷鍵:ctrl+alt+n
三. 常用的快捷鍵
下面是個人實際開發中使用頻率較高的幾個快捷鍵，當然也有其他騷操作的快捷鍵，用的少，印象就沒那麼深刻。
-
快速查詢檔案
VSCode、Chrome瀏覽器控制檯：
Ctrl+Pgithub：
t（輸入字母t便能觸發搜尋當前專案下的檔案） -
程式碼命令輸入行：
Ctrl+Shift+P -
複製追加一行：
Ctrl+C+V（複製游標所在的行，在游標下追加一行）Alt+Shift+↑或者↓ -
刪除一行：
Ctrl+D（個人設定，也可以通過Ctrl+X剪下一行來刪除） -
上下移動行或者移動選中程式碼行：
Alt+↑或者↓ -
跳到指定行：
VSCode、Chrome瀏覽器控制檯：
Ctrl+G，輸入行號，回車 -
同時編輯多行
Ctrl+Alt+↑或者↓增加游標Alt+滑鼠點選增加游標Alt+Shift+滑鼠點選（ 矩形選中文字：游標點[左上角]+最後點滑鼠點選[右下角]確定一個矩形，且多行同時編輯）
-
為所選的每一行插入游標：
Shift+I -
選中當前行：
Ctrl+L -
選中所有的匹配項：
CTRL+SHIFT+L -
跳到變數宣告處：
Ctrl+滑鼠點選變數
參考：