6个提升前端开发效率的必备工具

原文链接：https://medium.com/better-programming/6-must-use-tools-for-front-end-development-643f50c9161

作者：Mahdhi Rezvi

如有翻译不准确，请多指正。

在互联网中，许许多多由社区开发的工具，可以让前端开发人员的工作生活变得更加轻松。今天我想和大家分享的，是我最喜欢的一些前端开发常用工具，这些工具真的对我的工作很有帮助。

1

EnjoyCSS

说实话，虽然我做了很多前端开发工作，但我仍然不能出色地运用CSS。这个非常简单的工具，就是我遇到困难时的救星。EnjoyCSS可以让你通过简单的UI设计你的元素，并且提供相关的CSS输出。

2

Prettier Playground

Prettier是一个代码格式化程序，支持JavaScript，包括ES2017、JSX、Angular、Vue、Flow、TypeScript等等。它可以移除你的原始格式，并且将其替换为遵循最佳运行方式的、标准的一致样式。如此便捷的工具在我们的编辑器中十分流行，与此同时它还有一个线上版本，可以在线完成对代码格式的修正。

3

Postman

自从我开始前端开发生涯，Postman就一直在我的开发人员工具集中。它在后端检查GET、POST、DELETE、OPTIONS和PUT在内的一系列端点这方面，起到了非常显著的作用。Postman是榜单中当之无愧的存在，千万不要错过它噢。

4

StackBlitz

根据 Chidume Nnamdi显示，StackBlitz是每名使用者都很喜欢的一款在线编辑工具。最重要的一点就是，它将我们最喜欢也最熟悉的IDE引入了web——Visual Studio Code中。

只要在StackBlitz中点击一下，你就可以设置Angular、React、Ionic、TypeScript、RxJS、Svelte以及其他JavaScript框架。由于它的操作十分便捷，在打开StackBlitz后的五秒之内，你就可以开始编辑代码了。

StackBlitz十分好用，尤其在尝试简化代码片段，或在线数据库方面，你可能没有时间从头开始创建新的项目，而只是尝试新的功能。而通过StackBlitz，你不需要创建新的项目，就可以在短短几分钟内试用新的NPM软件包。很棒，对吗？

5

Bit.dev

一个软件开发的基本原则就是代码的可重复使用性，它确保你可以减少开发量，而不需要去从头构建组件。

这确实是Bit.dev可以做到的，它允许共享可重复使用代码片段和组件，从而减少开销，并且加快你的开发进程。

Bit.dev还允许在团队之间共享组件，让你的团队可以与其他团队进行协作。

（组件是你的设计系统，一起来让它变得更好吧。——Bit.dev）

正如Bit.dev所说的那样，这一组件平台也适合用作设计系统构建器。让开发人员和设计师团队进行协同合作，Bit.dev是一款从头开始构建设计系统的理想工具。

Bit.dev现在支持React，Vue，Angular，Node和其他JavaScript框架。

6

CanIUse

作为一款在线工具，CanlUse非常的简便，可以帮你弄清楚你期望实现的功能，是否与你使用的浏览器兼容。

很多开发者都会遇到浏览器的兼容问题，在这个浏览器上可以正常使用的，但换一个浏览器就不支持了。在这方面我有很多经验，再遇到后很多次类似的问题之后，我会把兼容性检查作为开发的必要步骤，比如，我在Safari设备上的投资项目不支持某些特殊的功能，这件事我在部署之后的几个月之后才弄明白。

为了看看这款工具是怎么工作的，让我们来检查一下哪些浏览器支持WebP图片格式。

就如同你看见的那样，Safari和IE目前不支持，这就意味着你需要对不兼容的浏览器留有一个备选项。下面的代码片段，是WebP图片最常用的实现，支持所有的浏览器。

写在最后

如果你觉得还有哪些值得添加的工具，也可以在评论区留言。祝你coding愉快~

END