【工具】876- 六個好用的前端開發在線工具

網上可以找到前端開發社區貢獻的大量工具,這篇文章列出了我最喜歡的一些工具,這些工具給我的工作帶來了許多便利。

1. EnjoyCSS

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

EnjoyCSS

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

2. Prettier Playground

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

Prettier Playground

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

3. Postman

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

Postman

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 包。很棒,不是嗎?

StackBlitz

微軟官方其實也提供了在線版本的 VSCode [3],可以在瀏覽器內使用 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.dev 的命令行工具 bit 在本地項目引入組件,也可以通過 npm、yarn 引入組件。

6. CanIUse

[CanIUse]是非常好用的在線工具,可以方便地查看各大瀏覽器對某個特性的支持程度。

我過去經常碰到自己開發的應用的一些功能在其他瀏覽器下不支持的情況。比如我的作品集項目使用的某個特性在 Safari 下不支持,直到項目上線幾個月後我才意識到。這些經驗教訓讓我意識到需要檢查瀏覽器兼容性。

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

CanIUse

如你所見,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 安裝命令行工具。

工具鏈接

[1] https://link.zhihu.com/?target=https%3A//prettier.io/playground/

[2] https://link.zhihu.com/?target=https%3A//prettier.io/docs/en/precommit.html

[3] https://link.zhihu.com/?target=https%3A//docs.microsoft.com/en-us/visualstudio/online/overview/what-is-vsonline


作者:LeanCloud

原文:https://segmentfault.com/a/1190000022437635



1. JavaScript 重溫系列(22篇全)
2. ECMAScript 重溫系列(10篇全)
3. JavaScript設計模式 重溫系列(9篇全)
4.  正則 / 框架 / 算法等 重溫系列(16篇全)
5.  Webpack4 入門(上) ||  Webpack4 入門(下)
6.  MobX 入門(上)  ||   MobX 入門(下)
7. 100 +篇原創系列彙總

回覆“加羣”與大佬們一起交流學習~

點擊“閱讀原文”查看 100+ 篇原創文章

本文分享自微信公衆號 - 前端自習課(FE-study)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章