聊聊前端開發平常的協做工具（全）

樹醬但願將前端的樂趣帶給你們 本文已收錄 github.com/littleTreem… 喜歡就star✨

前沿：在掘金寫做不知不覺已通過了四個月了，從一開始寥寥無幾的閱讀量，到如今有破萬閱讀的文章，感謝曾支持個人掘金友，但願在將來能加深產出文章的深度，今天從藉此機會跟你們分享下樹醬平常工做中經常使用的一些工具，或許能夠幫到你提高平常的協做效率

1.寫做篇 ✏️

基於以前不少童鞋在評論區，問樹醬說好比思惟導圖很好看，用的是什麼，首圖是怎麼製做的等等問題，因而經過一些工具的整理但願能幫助到你們

1.1 語雀

語雀是一個螞蟻金服孵化出來的專業的雲端知識庫，相似wiki，目前已經覆蓋了10 萬阿里員工的使用，來進行文檔編寫及知識沉澱 官方連接🔗

語雀我經常使用的兩個方面

• 思惟導圖：一個是語雀自帶的思惟導圖，我的以爲UI體驗很強（外表協會）

• 日記編排：用語雀來保持記錄天天在前端開發中遇到的問題及心得體會，方便覆盤和迴歸，最重要的是排版體驗高，支持編排，當你回顧你寫的文章的時候，閱讀體驗高，像是在翻書同樣

1.2 Process On

ProcessOn是一個在線協做繪圖平臺,爲用戶提供最強大、易用的做圖工具。支持在線創做流程圖、思惟導圖、組織結構圖、網絡拓撲圖、BPMN、UML圖、UI界面原型設計等

我主要用process on來繪製交互圖及流程圖，支持在線實時編輯，不足的就是若是非付費用戶則會限制繪製圖的數量，下面是操做頁面👇

1.3 Carbon

Carbon 用來建立美化版的代碼片斷，可篩選多種主題切換，而後生成你想要效果的代碼片斷圖 官方連接🔗

1.4 Mdnice

mdnicde全名爲Markdown Nice，支持給markdown添加「主題元素」，有點像換膚的感受，支持多種主觀，讓你的文章彷彿披上了嫁衣，最重要的是支持微信公衆號、知乎、還有掘金！官方連接🔗

導出以下圖所示

1.5 封面模版

不少童鞋很好奇，我每次文章都會附上一張主題圖，是否是本身P的，雖然我是作UI出身的前端，可是設計仍是蠻瑣碎和耗時的活，時間應該用在更寶貴的地方，這裏介紹的就是我使用的模版在線編輯工具 - 凡科快圖 官方連接🔗 或者 canva 官方連接🔗

1.6 Shields

shields.io 主要是用來能夠生成 在Markdown 文檔中的徽章，咱們常常在github的項目上看到這些徽章，來表述好比單元測試覆蓋率、打包的大小、版本信息、認證信息等 官方連接🔗

1.7 Gif生成

有時候圖片沒法去表達咱們想要闡述的內容，這個時候動態圖就起了很重要的做用，能夠更直觀的描述整個過程

• Mac先經過QuickTime Player 進行屏幕錄製

  

• 再將錄製生成的moc視頻轉換爲gif動態圖 官方連接🔗

若是是在掘金使用gif的同窗要注意的是，須要在左下角添加圖片進行上傳

1.8 網頁截屏

文章素材須要網頁截圖？很長時間我要給當前網頁截圖，我還在用微信的截圖工具，其實強大的chrome內置了截屏的功能，那如何使用呢

• 首先打開chrome控制檯（打開快捷方式 Option+Command+i）
• 打開命令行 （打開快捷方式 shift + cmd + p 或 win系統 shift + ctrl + p)
• 其次在命令行輸入「capture」能夠看到以下

注意：capture full size screenshoot和capture screenshoot的區別在於前者是整個頁面完整信息的截圖，後者只是當前頁面的截圖

2.效率篇 ⏰

在平常開發中，效率工具的使用，每每能夠給我減小不少沒必要要時間的浪費，經過工具賦能，幫助咱們提升生產效能

2.1 Iconfont 圖標庫

Iconfont Icon庫方便我的開發者找到本身須要的圖標，節省圖標設計和查找的時間，不香嗎～ 官方連接🔗

2.2 Regexr 正則可視化工具

RegExr是一款在線編輯測試正則表達式的工具,它擁有一個簡潔的界面,提供了一個能夠實時查看查找與替換正則表達式的文本框 官方連接🔗

2.3 Postwoman 接口調試利器

你據說過Postman，如今來了postwoman，Postman的情敵！它不只免費開源、輕量級、快速，並且還有美觀的API調試工具。能幫助咱們節省時間，提高工做效率。官方連接🔗

2.4 CanIuse 兼容性查詢

can I use? 顧名思義：我能使用嗎，能快速讓咱們查看瀏覽器對某個屬性語法的兼容狀況，場景應用當前在某個瀏覽器能夠正常使用，但是換了另外一個瀏覽器以後就不支持了，這個時候就得咱們防患於未然，在對某個屬性使用前，作好足夠得調研，而不是等到上線才發現問題 官方連接🔗

2.5 Prettier Playground 代碼在線格式化

應用場景：當我使用的電腦沒有安裝IDE,可是我又須要看別人寫的代碼，這個時候 Prettier Playground能夠幫我將本來凌亂的代碼改頭換面，大大提升可讀性 官方連接🔗

左邊爲源代碼，右邊爲格式化後的代碼

2.6 SwitchHosts host管理工具

SwitchHosts 能夠幫助咱們快速切換不一樣的 hosts 設置、並進行hosts編輯 官方連接🔗

3.命令行工具篇 🔧

All in code! 若是隻想用命令行工具來完成一系列有助於提高效率，你能夠看看下面這些工具

3.1 n - node 版本切換工具

用來進行 node 版本的切換，方便輕量 官方連接🔗

3.2 nrm - npm鏡像管理工具

nrm是npm的鏡像源管理工具,有時候由於訪問國外資源緣由致使速度太慢,使用nrm能夠快速地在npm源間切換,也能夠管理你內部的npm來源

3.3 caniuse-cmd - 兼容性測試工具

上文提到web版本的caniuse,這裏介紹下它的命令行工具，如何使用？ npm install -g caniuse-cmd 下面是一個關於websocket瀏覽器兼容性測試的例子👇

往期文章

• 從0到1開發動態表單
• 前端表單數據那些事
• 如何更好管理 Api 接口
• 微前端那些事
• 前端工程化那些事
• 從0到1開發工具庫
• 從0到1開發簡單腳手架
• 前端Nginx那些事
• 前端運維部署那些事