03.06 6 個前端開發必備工具,提高你的生產力

網絡為我們提供了多種多樣的前端工具,我挑選了6個實用的前端工具,能幫助大家提高工作效率。


6 個前端開發必備工具,提高你的生產力


1.EnjoyCSS

老實說,我做過很多的前端開發,但一直不擅長CSS。

這個簡單易上手的工具在很多時候給了我極大的幫助。它既是一個代碼生成器,也是一個視覺編輯器。

你可以用它來創建各種網頁元素,例如按鈕、輸入框,同時給它們添加自定CSS3屬性。


6 個前端開發必備工具,提高你的生產力


2.Prettier Playground

Prettier是一個代碼格式化工具,支持JavaScript, ES2017, JSX, Angular, Vue, Flow, TypeScript等。

它能夠解析代碼,使用你自己設定的規則來重新打印出格式規範的代碼。

這個工具非常流行,並且有一個線上版本。


6 個前端開發必備工具,提高你的生產力


3.Postman

Postman是一種網頁調試與發送網頁http請求的chrome插件。

我們可以用來很方便的模擬get或者post或者其他方式的請求來調試接口。

我從事開發來,Postman就一直存在於我的開發工具列表中。


6 個前端開發必備工具,提高你的生產力


4.StackBlitz

Chidume Nnamdi 曾說,這是每個用戶最喜歡的在線IDE工具。

主要原因是它將我們最喜歡和最常用的IDE引入了Web — Visual Studio Code。

StackBlitz允許您一鍵設置Angular,React,Ionic,TypeScript,RxJS,Svelte和其他JavaScript框架。

由於有了這個方便的功能,您可以在不到五秒鐘的時間內開始編碼。


6 個前端開發必備工具,提高你的生產力


5.Bit.dev

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

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

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


6 個前端開發必備工具,提高你的生產力


6.CanIUse

這個在線工具非常方便,因為它使您可以瞭解所實現的功能是否與您希望使用的瀏覽器兼容。

為了瞭解這一點,讓我們檢查一下哪些瀏覽器支持WebP圖像格式。


6 個前端開發必備工具,提高你的生產力


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


6 個前端開發必備工具,提高你的生產力

本文翻譯自: 6 Must-Use Tools for Front-End Development---by Mahdhi Rezvi



前端開發工具就推薦到這裡,想學習前端課程,可以訪問 “實驗樓” 官網學習。

課程推薦:


《HTML 基礎課程》(免費)

《CSS 基礎課程》(免費)

《HTML5 基礎教程》(免費)

《JavaScript基礎課程》(免費)

以上課程均可在“實驗樓”官網獲取。


分享到:


相關文章: