前端工程師 2022 年必備的 7 個工具
過去幾年間，隨著 Web 應用新世代的成長，app 應用內容越來越豐富，與之一起提升的還有前端整體的複雜度。提到前端工具，也許你會迅速想到各種市面上常見的開發工具、除錯工具，但本次我們徵集了數位資深前端工程師的意見整理了如下幾個你可能沒用過，但用了肯定會說好的工具：
開發工具推薦：webstorm
下載地址: https://www.jetbrains.com/webstorm/download/#section=mac
簡介：工欲善其事，必先利其器。一款得心應手的開發工具是每一個前端工程師所必備的，無論是簡單的頁面還是複雜的工程，它都能 handle！豐富的外掛資源、簡單的版本管理、強大的除錯功能，盡在 webstorm。
tip： 通過 webstorm 設定自定義模板，新建檔案時可自動填充，完全無需編寫重複的程式碼。
雲服務推薦：輕服務
使用地址： qingfuwu.cn
簡介：想寫幾個介面，但又不想大動干戈部署服務，2022 年最簡單、易懂的雲服務：輕服務等你來使用，開箱即可用，專注業務邏輯，線上開發、除錯、上線，你想不到的快。
tip: 現在註冊能有十塊錢的免費額度，QPS 較低的話完全相當於免費使用各種資源。
Markdown 編輯器推薦： Typora
下載地址： https://typora.io/
簡介：2022 年，還在為記不住 Markdown 語法而手忙腳亂嗎？趕緊用 Typora，Win、Mac、Linux 都能用，自動匹配 Markdown 標記，即時預覽、輕鬆插圖、快速匯出為 pdf、LaTex、html，你想要的它都有。
tip: Typora 結合有道雲筆記，可實現多裝置共享 Markdown 檔案。
css 部落格推薦： css tricks
簡介：還在為設計稿頭疼嗎，趕緊看看 css tricks，可能那些強人所難的效果只需要幾行 css 程式碼就能解決了。
開源動畫庫推薦： Lottie
官網地址： https://lottiefiles.com/
簡介：Airbnb 開源的面向iOS、android、Web的動畫庫，不僅能讓原生 app 像使用靜態素材一樣使用 AE 或 figma 匯出的動畫，還能手動控制進度、繫結事件。
程式碼高亮 Chrome 外掛推薦： iFormatTool
新增地址：https://chrome.google.com/webstore/search/iFormatTool
簡介： 在你開啟型別或字尾為css、js、json的網址時，這款外掛會自動將頁面中的程式碼進行高亮顯示，並且還會根據不同的程式碼型別提供不同的操作按鈕。網頁上的程式碼終於“剪的斷，理不亂”了。
響應式設計預覽 Chrome 外掛推薦： window resizer
新增地址：https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
簡介：響應式佈局的網站已是當今主流，有了 window resizer 就不必擔心哪些裝置還沒測試了，有了它你還可以隨意輸入想要的尺寸進行調整、模擬不同解析度。