網(wǎng)上可以找到前端開(kāi)發(fā)社區(qū)貢獻(xiàn)的大量工具，這篇文章列出了我最喜歡的一些工具，這些工具給我的工作帶來(lái)了許多便利。

1. EnjoyCSS

老實(shí)說(shuō)，雖然我做過(guò)許多前端開(kāi)發(fā)，但我并不擅長(zhǎng) CSS。當(dāng)我陷入困境時(shí)，EnjoyCSS 是我的大救星。EnjoyCSS 提供了一個(gè)簡(jiǎn)單的交互界面，幫助我設(shè)計(jì)元素，然后自動(dòng)輸出相應(yīng)的 CSS 代碼。

EnjoyCSS 可以輸出 CSS、LESS、SCSS 代碼，并支持指定需要支持哪些瀏覽器及其版本。開(kāi)發(fā)簡(jiǎn)單頁(yè)面時(shí)用起來(lái)比較方便，但不太適合復(fù)雜一點(diǎn)的前端項(xiàng)目（這類項(xiàng)目往往需要引入 CSS 框架）。

2. Prettier Playground

Prettier 是一個(gè)代碼格式化工具，支持格式化 JavaScript 代碼（包括 ES2017、JSX、Angular、Vue、Flow、TypeScript 等）。Prettier 會(huì)移除代碼原本的樣式，替換為遵循最佳實(shí)踐的標(biāo)準(zhǔn)化、一致的樣式。IDE 大多支持 Prettier 工具，不過(guò) Prettier 也有在線版本，讓你可以在瀏覽器里格式化代碼。

如果工作電腦不在手邊，使用移動(dòng)端設(shè)備或者臨時(shí)借用別人的電腦查看代碼時(shí)，Prettier Playground 非常好用。相比在 IDE 或編輯器下使用 Prettier，個(gè)人更推薦通過(guò) git pre-commit hook 配置 Prettier：hook 可以保證整個(gè)團(tuán)隊(duì)使用統(tǒng)一的配置，免去各自分別配置 IDE 或編輯器的麻煩。如果是老項(xiàng)目，hook 還可以設(shè)置只格式化有改動(dòng)的單個(gè)文件甚至有改動(dòng)的代碼段，避免在 IDE 或編輯器下使用 Prettier 時(shí)不小心格式了大量代碼，淹沒(méi)了 commit 的主要改動(dòng)，讓 review 代碼變得十分痛苦。

3. Postman

Postman 一直在我的開(kāi)發(fā)工具箱里，測(cè)試后端 API 接口時(shí)非常好用。GET、POST、DELETE、OPTIONS、PUT 這些方法都支持。毫無(wú)疑問(wèn)，你應(yīng)該使用這個(gè)工具。

Postman 之外，Insomnia 也是很流行的 REST API 測(cè)試工具，亮點(diǎn)是支持 GraphQL。不過(guò) Postman 從 去年夏天發(fā)布的 v7.2 起也支持了 GraphQL。

4. StackBlitz

Chidume Nnamdi 盛贊這是每個(gè)用戶最喜歡的在線 IDE。StackBlitz 將大家最喜歡、最常用的 IDE Visual Studio Code 搬進(jìn)了瀏覽器。

StackBlitz 支持一鍵配置 Angular、React、Ionic、TypeScript、RxJS、Svelte 等 JavaScript 框架，也就是說(shuō)，只需幾秒你就可以開(kāi)始寫代碼了。

我覺(jué)得這個(gè)在線 IDE 很有用，特別是可以在線嘗試一些樣例代碼或者庫(kù)，否則僅僅嘗試一些新特性就需要花很多時(shí)間在新項(xiàng)目初始化配置上。有了 StackBlitz，無(wú)需在本地從頭搭建環(huán)境，花上幾分鐘就可以試用一個(gè) NPM 包。很棒，不是嗎？

微軟官方其實(shí)也提供了在線版本的 VSCode，可以在瀏覽器內(nèi)使用 VSCode，并且支持開(kāi)發(fā) Node.js 項(xiàng)目（基于 Azure）。不過(guò) StackBlitz 更專注于優(yōu)化前端開(kāi)發(fā)體驗(yàn)，界面更加直觀一點(diǎn)，也推出了 beta 版本的 Node.js 支持（基于 GCP，需要填表申請(qǐng)）。

5. Bit.dev

軟件開(kāi)發(fā)的基本原則之一就是代碼復(fù)用。代碼復(fù)用減少了開(kāi)發(fā)量，讓你不用從頭開(kāi)發(fā)組件。

這正是 Bit.dev 做的事，分享可重用的組件和片段，降低開(kāi)發(fā)量，加速開(kāi)發(fā)進(jìn)程。

除了公開(kāi)分享，它還支持在團(tuán)隊(duì)分享，讓團(tuán)隊(duì)協(xié)作更方便。

正如 Bit.dev 的口號(hào)「組件即設(shè)計(jì)體系。協(xié)同開(kāi)發(fā)更好的組件。」所言，Bit.dev 可以用來(lái)創(chuàng)建設(shè)計(jì)體系，允許團(tuán)隊(duì)內(nèi)的開(kāi)發(fā)者和設(shè)計(jì)師一起協(xié)作，從頭搭建一套設(shè)計(jì)體系。

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

在 Bit.dev 上不僅可以搜索組件，還可以直接查看組件的依賴，瀏覽組件的代碼，甚至在線編輯代碼并查看預(yù)覽效果！選好組件后可以通過(guò) Bit.dev 的命令行工具 bit 在本地項(xiàng)目引入組件，也可以通過(guò) npm、yarn 引入組件。

6. CanIUse

CanIUse是非常好用的在線工具，可以方便地查看各大瀏覽器對(duì)某個(gè)特性的支持程度。

我過(guò)去經(jīng)常碰到自己開(kāi)發(fā)的應(yīng)用的一些功能在其他瀏覽器下不支持的情況。比如我的作品集項(xiàng)目使用的某個(gè)特性在 Safari 下不支持，直到項(xiàng)目上線幾個(gè)月后我才意識(shí)到。這些經(jīng)驗(yàn)教訓(xùn)讓我意識(shí)到需要檢查瀏覽器兼容性。

我們來(lái)看一個(gè)例子吧。哪些瀏覽器支持 WebP 圖像格式？

如你所見(jiàn)，Safari 和 IE 目前不支持 WebP。這意味著需要為不兼容的瀏覽器提供回退選項(xiàng)，比如：

<picture>

CanIUse 還可以在命令行下使用，例如，在命令行下查看 WebP 圖像格式的瀏覽器兼容性：caniuse webp（運(yùn)行命令前需要事先通過(guò) npm install -g caniuse-cmd安裝命令行工具。