Categories
程式開發

六個提升前端開發效率的工具


圖片

互聯網上有很多由社區成員提供的工具,可以幫助改善我們前端開發人員的開發體驗。下面分享一下我個人非常喜歡的幾個前端工具。

1. EnjoyCSS

老實說,儘管我做了很多前端開發工作,但還是不太擅長使用CSS。 EnjoyCSS 是一款非常簡單的工具,是我在困難時期的救星。它為用戶提供了簡單的UI,讓用戶可以設計元素,並提供對應的CSS輸出。

圖片

2. Prettier Playground

Prettier 是一種代碼格式化程序,支持JavaScript,包括ES2017、JSX、Angular、Vue、Flow和TypeScript等。它會用符合標準並遵循最佳實踐的樣式替換掉你原來的樣式。這個方便的工具在我們的IDE中非常流行,但是它也有自己的在線版本,你可以在裡面優化你的代碼。

圖片

3. Postman

從我踏入前端開發起,Postman就一直是我的必備開發工具之一。它能在後端檢查我的端點,非常好用。它的出色表現讓我把它放到了這裡。它包含的端點包括GET、POST、DELETE、OPTIONS和PUT之類。可以稱之為絕對不能錯過的一款工具。

圖片

4. StackBlitz

據Chidume Nnamdi(https://medium.com/@kurtwanger40)稱,這是所有用戶最喜歡的在線IDE工具。主要原因是它將我們最喜歡和最常用的IDE——也就是Visual Studio Code,引入了Web端。

StackBlitz允許你一鍵設置Angular、React、Ionic、TypeScript、RxJS、Svelte和其他JavaScript框架。一鍵設置這個功能意味著開發者可以在極短的時間內開始編碼。我發現這款工具非常有用,尤其是在線上嘗試示例代碼段或庫時。你可能沒有時間從頭開始創建一個新項目來嘗試一項新功能。有了StackBlitz,你只需不到幾分鐘的時間就可以試用新的NPM軟件包,而無需從頭開始在本地創建項目。

圖片

5. Bit.dev

軟件開發的一項基本原則是代碼可重用性。這可以減少你的開發工作,因為你無需從頭開始構建每個組件。

這正是Bit.dev所做的。它使你可以共享可重用的代碼組件和代碼片段,從而減少開銷並加快開發流程。

它還允許在團隊之間共享組件,這使你的團隊可以與其他團隊更好地協作。

“組件是你的設計系統。共同打造更好的產品。”—Bit.dev

正如Bit.dev所提到的,這一組件平台也適合用作設計系統構建器。它能讓你的開發人員和設計師團隊共同工作,是從頭開始構建設計系統的理想工具。

Bit.dev現在支持React、Vue、Angular、Node等JavaScript框架。

圖片

6. CanIUse

CanIUse 是一款在線工具,使用起來非常方便,因為它讓你可以了解所實現的特性是否與你希望使用的瀏覽器目標相兼容。

很多開發者都會遇到一個很鬧心的問題,那就是開發的應用程序中的某些特性在瀏覽器上的支持與兼容問題,明明在這個瀏覽器可以正常使用,換了一個瀏覽器之後就不支持了。我同樣有這樣的困擾,在遇到過很多次這個問題之後,我開始牢記檢查瀏覽器兼容性的必要步驟。舉一個例子:我的投資組合項目中的某項特性在Safari瀏覽器上並不受支持。直到項目部署幾個月後我才知道這件事。

為了看看這款工具是怎麼工作的,我們來檢查一下哪些瀏覽器支持WebP圖片格式。

圖片

如你所見,目前Safari和IE不支持。這意味著你應該為不兼容的瀏覽器提供一個後備選項。下面的代碼段是支持所有瀏覽器的最常用WebP圖像實現。

圖片

小結

在此,我根據以往的開發經驗,列舉出了以上這些我覺得很棒的工具。如果你認為有任何值得補充的內容,請在下面評論。編程愉快!

延伸閱讀

https://medium.com/better-programming/6-must-use-tools-for-front-end-development-643f50c9161