六個好用的前端開發在線工具

[Mahdhi Rezvi] 原做，翻譯轉載自 New Frontend （縮進段落爲譯者附註）。

網上能夠找到前端開發社區貢獻的大量工具，這篇文章列出了我最喜歡的一些工具，這些工具給個人工做帶來了許多便利。

1. EnjoyCSS

老實說，雖然我作過許多前端開發，但我並不擅長 CSS。當我陷入困境時，[EnjoyCSS] 是個人大救星。EnjoyCSS 提供了一個簡單的交互界面，幫助我設計元素，而後自動輸出相應的 CSS 代碼。

EnjoyCSS 能夠輸出 CSS、LESS、SCSS 代碼，並支持指定須要支持哪些瀏覽器及其最低版本。開發簡單頁面時用起來比較方便，但不太適合複雜一點的前端項目（這類項目每每須要引入 CSS 框架）。

2. Prettier Playground

[Prettier] 是一個代碼格式化工具，支持格式化 JavaScript 代碼（包括 [ES2017]、[JSX]、[Angular]、[Vue]、[Flow]、[TypeScript] 等）。Prettier 會移除代碼本來的樣式，替換爲遵循最佳實踐的標準化、一致的樣式。IDE 大多支持 Prettier 工具，不過 Prettier 也有在線版本，讓你能夠在瀏覽器裏格式化代碼。

若是工做電腦不在手邊，使用移動端設備或者臨時借用別人的電腦查看代碼時，Prettier Playground 很是好用。相比在 IDE 或編輯器下使用 Prettier，我的更推薦經過 git pre-commit hook 配置 Prettier：hook 能夠保證整個團隊使用統一的配置，免去各自分別配置 IDE 或編輯器的麻煩。若是是老項目，hook 還能夠設置只格式化有改動的單個文件甚至有改動的代碼段，避免在 IDE 或編輯器下使用 Prettier 時不當心格式了大量代碼，淹沒了 commit 的主要改動，讓 review 代碼變得十分痛苦。

3. Postman

[Postman] 一直在個人開發工具箱裏，測試後端 API 接口時很是好用。GET、POST、DELETE、OPTIONS、PUT 這些方法都支持。毫無疑問，你應該使用這個工具。

Postman 以外，[Insomnia] 也是很流行的 REST API 測試工具，亮點是支持 [GraphQL]。不過 Postman 從 去年夏天發佈的 v7.2 起也支持了 GraphQL。

4. StackBlitz

[Chidume Nnamdi] 盛讚這是每一個用戶最喜歡的在線 IDE。[StackBlitz] 將你們最喜歡、最經常使用的 IDE Visual Studio Code 搬進了瀏覽器。

StackBlitz 支持一鍵配置 Angular、[React]、Ionic、TypeScript、RxJS、[Svelte] 等 JavaScript 框架，也就是說，只需幾秒你就能夠開始寫代碼了。

我以爲這個在線 IDE 頗有用，特別是能夠在線嘗試一些樣例代碼或者庫，不然僅僅嘗試一些新特性就須要花不少時間在新項目初始化配置上。有了 StackBlitz，無需在本地從頭搭建環境，花上幾分鐘就能夠試用一個 NPM 包。很棒，不是嗎？

微軟官方其實也提供了 在線版本的 VSCode，能夠在瀏覽器內使用 VSCode，而且支持開發 Node.js 項目（基於 Azure）。不過 StackBlitz 更專一於優化前端開發體驗，界面更加直觀一點，也推出了 beta 版本的 Node.js 支持（基於 GCP，須要填表申請）。

5. Bit.dev

軟件開發的基本原則之一就是代碼複用。代碼複用減小了開發量，讓你不用從頭開發組件。

這正是 [Bit.dev] 作的事，分享可重用的組件和片斷，下降開發量，加速開發進程。

除了公開分享，它還支持在團隊分享，讓團隊協做更方便。

正如 Bit.dev 的口號「組件即設計體系。協同開發更好的組件。」所言，Bit.dev 能夠用來建立設計體系，容許團隊內的開發者和設計師一塊兒協做，從頭搭建一套設計體系。

Bit.dev 目前支持 [React]、Vue、Angular、Node 及其餘 JavaScript 框架。

在 Bit.dev 上不只能夠搜索組件，還能夠直接查看組件的依賴，瀏覽組件的代碼，甚至在線編輯代碼並查看預覽效果！選好組件後能夠經過 Bit.dev 的命令行工具 bit 在本地項目引入組件，也能夠經過 npm、yarn 引入組件。

6. CanIUse

[CanIUse]是很是好用的在線工具，能夠方便地查看各大瀏覽器對某個特性的支持程度。

我過去常常碰到本身開發的應用的一些功能在其餘瀏覽器下不支持的狀況。好比個人做品集項目使用的某個特性在 Safari 下不支持，直到項目上線幾個月後我才意識到。這些經驗教訓讓我意識到須要檢查瀏覽器兼容性。

咱們來看一個例子吧。哪些瀏覽器支持 WebP 圖像格式？

如你所見，Safari 和 IE 目前不支持 WebP。這意味着須要爲不兼容的瀏覽器提供回退選項，好比：

<picture>
    <source srcset="img/awesomeWebPImage.webp" type="image/webp">
    <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
    <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

CanIUse 還能夠在命令行下使用，例如，在命令行下查看 WebP 圖像格式的瀏覽器兼容性： caniuse webp（運行命令前須要事先經過 npm install -g caniuse-cmd 安裝命令行工具。