六個好用的程式設計師開發線上工具

語言: CN / TW / HK
時間 2022-05-08 18:05:07

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

​ ​ 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 也有線上版本，讓你可以在瀏覽器裡格式化程式碼。​

​ ​ 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安裝命令列工具。

​ ​ * Photo by Dean Pugh on Unsplash ​ ​​

工具連結：

  • EnjoyCSS：http://enjoycss.com/
  • Prettier ：http://prettier.io/
  • Postman：http://www.postman.com/
  • StackBlitz：http://stackblitz.com/
  • Bit.dev：http://bit.dev/
  • CanIUse：http://caniuse.com/

Mahdhi Rezvi 原作，翻譯轉載自 New Frontend 。

「」
「」