大家好,我是scaler,最近剛來上海,原科大訊飛前端開發,現入職平安壹錢包。由於換了一個工作環境,所有的東西都需要重新習慣,所以希望把一些好的前端開發的工具分享給大家。文章很長~馬了之後慢慢看。
VSCode系列
推薦大家使用vscode編輯器,輕量、外掛庫豐富,下面是提高效率的vscode外掛。
1、Setting Sync 多臺電腦同步你的vscode外掛庫
推薦指數 ⭐⭐⭐⭐⭐
將你的vscode配置和外掛上傳到github上,其他電腦僅需同步下就可以獲得你積累多年的外掛庫
1、一個github賬號(沒有註冊一個)。
2、右側自己頭像 -> setting -> Developer settings -> Personal access tokens



3、填寫token描述,選擇gits scopes,點選生成token,複製你生成的token


4、在vscode外掛模組中搜尋Setting Sync,安裝就完事了


shift + Alt + D 下載你的外掛配置,首次下載需要輸入GitHub的token和上一次上傳生成的gits,vsCode裡的setting.json裡面可以找到


好了,快樂就完事了,行動起來,馬上上傳你的git外掛庫~當然你也可以和你的團隊共享你的外掛庫,前提你要把token和gist透漏給他們~
2、Git History 和 Git Lens 便捷你的版本管理
推薦指數 ⭐⭐⭐⭐
gitEasy肯定你們都有了,讓許多git命令視覺化操作,現在推薦他們,對~就是他們,可以讓你的git操作更如魚得水(優雅甩鍋,這行程式碼不是我開發的)


看下效果
哇,這行菜雞程式碼是你寫的 ~咦~

想找歷史變更,每個版本的幾記錄,版本分支線?右上角四個圖示分別代表 git log、當前更改對比、前一版本更改的對比、當前檔案每一次版本的更改記錄都炒雞好用。尤其在產品這個糟老頭子的百變需求面前。



更多特性,你們慢慢發掘~
3、change-case 列舉、常量敲錯者的福音
推薦指數 ⭐⭐⭐⭐
話不多說,外掛庫搜尋起來,安裝下,他長這樣

是不是駝峰轉全大寫要檢查好幾次,大寫轉小寫又要檢查好幾次,有了這個外掛,你只要有一種型別的命名,其他型別交給他來辦。
選中你要轉換的命名
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:尤其是上海的小夥伴,可面基~)
