提升前端開發效率的工具
大家好，我是scaler，最近剛來上海，原科大訊飛前端開發，現入職平安壹錢包。由於換了一個工作環境，所有的東西都需要重新習慣，所以希望把一些好的前端開發的工具分享給大家。文章很長~馬了之後慢慢看。
VSCode系列
推薦大家使用vscode編輯器，輕量、外掛庫豐富，下面是提高效率的vscode外掛。
1、Setting Sync 多臺電腦同步你的vscode外掛庫
推薦指數 :star::star::star::star::star:
將你的vscode配置和外掛上傳到github上，其他電腦僅需同步下就可以獲得你積累多年的外掛庫
1、一個github賬號(沒有註冊一個)。
2、右側自己頭像 -> setting -> Developer settings -> Personal access tokens
3、填寫token描述，選擇gits scopes，點選生成token，複製你生成的token
4、在vscode外掛模組中搜索Setting Sync，安裝就完事了
shift + Alt + U 上傳你的外掛配置，首次上傳需要輸入之前拿到的GitHub的token
好了，快樂就完事了，行動起來，馬上上傳你的git外掛庫~當然你也可以和你的團隊共享你的外掛庫，前提你要把token和gist透漏給他們~
2、Git History 和 Git Lens 便捷你的版本管理
推薦指數 :star::star::star::star:
gitEasy肯定你們都有了，讓許多git命令視覺化操作，現在推薦他們，對~就是他們，可以讓你的git操作更如魚得水（優雅甩鍋，這行程式碼不是我開發的）
看下效果
哇，這行菜雞程式碼是你寫的 ~咦~
想找歷史變更，每個版本的幾記錄，版本分支線？右上角四個圖示分別代表 git log、當前更改對比、前一版本更改的對比、當前檔案每一次版本的更改記錄都炒雞好用。尤其在產品這個糟老頭子的百變需求面前。
更多特性，你們慢慢發掘~
3、change-case 列舉、常量敲錯者的福音
推薦指數 :star::star::star::star:
話不多說，外掛庫搜尋起來，安裝下，他長這樣
是不是駝峰轉全大寫要檢查好幾次，大寫轉小寫又要檢查好幾次，有了這個外掛，你只要有一種型別的命名，其他型別交給他來辦。
選中你要轉換的命名
ctrl/commend + shift + p 喚起命令
選擇change case
不認識每個代表什麼轉換沒關係，後面的有轉換後的樣子
4、其他常用外掛
LeetCode -> 空閒時間燒光自己的腦細胞，長這樣
Bookmarks -> 讓你某行炫酷的程式碼標記為書籤，可隨時查詢，長這樣
background -> 讓你的vscode背景自定義，可萌、可基，長這樣
SVG Viewer -> 讓你的svg視覺化，長這樣
還有一些框架常用外掛，大家估計都用上了，我就不一一列舉了。如果還有特別炫酷的外掛可以在評論區告訴大家~
5、程式碼片段功能，可以參考我這篇文章
VScode快速一鍵生成html、vue、jsx、ajax、sass、docker等程式碼片段
chrome 系列
chrome是前端使用最多的瀏覽器，他的外掛庫也十分的豐富，但是苦於某些原因，無法訪問到chrome商店。自己搭建一個vps又太麻煩，自己買vpn又太貴。當然有錢任性的大佬可以無視，但是如果不是看YouTube、twitter等，可以搜下 谷歌訪問助手 這個外掛，可能需要將首頁設定為制定的首頁，畢竟人家也是要恰飯的。不想設定也行，GitHub上搜一下，後面的事情我也不知道了啊，咱也不敢問。安裝好以後就可以愉快的訪問谷歌擴充套件程式商城啦~
記得註冊和登陸google賬號，這樣你的外掛和書籤又可以同步啦~
是不是可以很開心~
JSONView -> json檔案格式化，媽媽再也不用擔心強迫症的我了，長這樣
Axure RP Extension for Chrome -> 再也不用IE看原型圖了，長這樣
React Developer Tools -> React開發必備，長這樣
Redux DevTools -> Redux開發必備，長這樣
Vue.js devtools -> Vue開發必備，長這樣
劃詞翻譯 -> chrome上讀英文文件不要太方便，長這樣
The QR Code Extension -> 網址秒變二維碼，移動開發的利器，長這樣
ModHeader -> 修改ajax請求，長這樣
好了，這些都是我常用的~希望大家能用上~
還有其他好用的效率工具大家可以在評論區留言，分享給前端路上的小夥伴。
歡迎大家加我微信，有問題可以多交流~蟹蟹（ps：尤其是上海的小夥伴，可面基~）
