【工具】876- 六个好用的前端开发在线工具

迈不过友情╰ 2022-10-31 10:49 130阅读 0赞

![format_png][]

网上可以找到前端开发社区贡献的大量工具，这篇文章列出了我最喜欢的一些工具，这些工具给我的工作带来了许多便利。

## 1. EnjoyCSS ##

老实说，虽然我做过许多前端开发，但我并不擅长 CSS。当我陷入困境时，\[EnjoyCSS\] 是我的大救星。EnjoyCSS 提供了一个简单的交互界面，帮助我设计元素，然后自动输出相应的 CSS 代码。

![format_png 1][] EnjoyCSS

> “
> 
> EnjoyCSS 可以输出 CSS、LESS、SCSS 代码，并支持指定需要支持哪些浏览器及其最低版本。开发简单页面时用起来比较方便，但不太适合复杂一点的前端项目（这类项目往往需要引入 CSS 框架）。
> 
> ”

## 2. Prettier Playground ##

\[Prettier\] 是一个代码格式化工具，支持格式化 JavaScript 代码（包括 \[ES2017\]、\[JSX\]、\[Angular\]、\[Vue\]、\[Flow\]、\[TypeScript\] 等）。Prettier 会移除代码原本的样式，替换为遵循最佳实践的标准化、一致的样式。IDE 大多支持 Prettier 工具，不过 Prettier 也有在线版本\[1\]，让你可以在浏览器里格式化代码。

![format_png 2][] 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 这些方法都支持。毫无疑问，你应该使用这个工具。

![format_png 3][] 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 包。很棒，不是吗？

![format_png 4][] 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 框架。

![format_png 5][] Bit.dev

> “
> 
> 在 Bit.dev 上不仅可以搜索组件，还可以直接查看组件的依赖，浏览组件的代码，甚至在线编辑代码并查看预览效果！选好组件后可以通过 Bit.dev 的命令行工具 `bit` 在本地项目引入组件，也可以通过 npm、yarn 引入组件。
> 
> ”

## 6. CanIUse ##

\[CanIUse\]是非常好用的在线工具，可以方便地查看各大浏览器对某个特性的支持程度。

我过去经常碰到自己开发的应用的一些功能在其他浏览器下不支持的情况。比如我的作品集项目使用的某个特性在 Safari 下不支持，直到项目上线几个月后我才意识到。这些经验教训让我意识到需要检查浏览器兼容性。

我们来看一个例子吧。哪些浏览器支持 WebP 图像格式？

![format_png 6][] CanIUse

如你所见，Safari 和 IE 目前不支持 WebP。这意味着需要为不兼容的浏览器提供回退选项，比如：

> “
> 
> CanIUse 还可以在命令行下使用，例如，在命令行下查看 WebP 图像格式的浏览器兼容性：`caniuse webp`（运行命令前需要事先通过 `npm install -g caniuse-cmd` 安装命令行工具。
> 
> ”

![format_png 7][]

## 工具链接 ##

\[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

![format_png 8][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 100[\+篇原创系列汇总][Link 1]

![format_png 9][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 100+ 篇原创文章

[format_png]: /images/20221024/133ecfefdf56460fa92bb93c45449de2.png
[format_png 1]: /images/20221024/1273a82dbff2473fb46f4bf3a50bcdb1.png
[format_png 2]: /images/20221024/aeca6d4fe60240ad9cde10a144524ed1.png
[format_png 3]: /images/20221024/88201b5016fc47ac910e89eaeaab1c2d.png
[format_png 4]: /images/20221024/1559cf012756442f833a9297f47c63b0.png
[format_png 5]: /images/20221024/ee759e76302444f08c4ed649a405f776.png
[format_png 6]: /images/20221024/9ba43f1691fe4546a9d52d90f52dfaf9.png
[format_png 7]: /images/20221024/12d97e92e8834b0f8aca636e1a373603.png
[format_png 8]: /images/20221024/1d8b7e22539640fe9248078e4fdef5d9.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[format_png 9]: /images/20221024/7d8ef84e02784413a21714814481b485.png