六款程序員必看的前端在線開發工具

1、EnjoyCSS

EnjoyCSS提供了一個簡單的交互界面，對于并不擅長CSS的朋友簡直就是救星。設計元素，自動輸出相應的 CSS 代碼?？梢暂敵鯨ESS、SCSS 代碼，甚至可以指定支持哪些的瀏覽器和，瀏覽器的最低版本，使用起來非常方便，缺點是并不適合復雜的前端項目。

2、Prettier Playground

［Prettier］是一款代碼格式化工具，左右兩欄的操作界面，左邊是原始代碼，右邊是格式化后的代碼。支持多種格式的代碼，［JSX］、［Angular］、［Vue］等等。它會移除代碼原本的樣式，替換成標準化的代碼樣式，IDE 大多支持 Prettier 工具。值得一提的是， Prettier 也有在線版本，在瀏覽器中也可格式化代碼。

個人推薦通過 git pre-commit hook 配置 Prettier：hook 可以保證整個團隊使用統一的配置，免去了重復配置IDE或者編輯器的麻煩，如果是之前的項目，hook 還可以設置只格式化有改動的單個文件甚至是代碼段，避免在 IDE 或編輯器下使用 Prettier 時不小心格式了大量代碼，淹沒了 commit 的主要改動，讓 review 代碼變得十分痛苦。

3、Postman

一款測試后端API接口非常好用的工具，一直是前端工作的必備工具之一，支持方法多，GET、POST、DELETE等等， v7.2 也早就開始支持 GraphQL了。

4、StackBlitz

作為眾多用戶喜愛的在線 IDE。［StackBlitz］ 將大家常用到的 IDE Visual Studio Code 搬進了瀏覽器。支持一鍵配置 Angular、［React］、Ionic、TypeScript、RxJS、［Svelte］ 等 JavaScript 框架，無需在本地浪費時間重新搭建環境，可以快速著手代碼部分。

5、Bit.dev

Bit.dev是一款可以大大提升代碼復用率的開發工具，分享可重用的組件和片段，降低開發量，加速開發進程。還支持團隊分享，允許團隊內的開發者和設計師一起協作，重新搭建一套設計體系。查看組件的依賴，瀏覽組件的代碼，甚至在線編輯代碼并查看預覽效果！選好組件后可以通過 Bit.dev 的命令行工具 bit 在本地項目引入組件，也可以通過 npm、yarn 引入組件。

6、CanIUse

［CanIUse］可以很好地幫助開發者查看，自己的應用在各大瀏覽器的支持程度，避免瀏覽器的兼容性問題。

類似的工具還有很多，之后會慢慢跟大家介紹。那么，這些工具中，你覺得哪一款有讓你覺得需要改進的地方呢？
責編AJX