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

作者:Mahdhi Rezvi

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

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

1EnjoyCSS

 

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

 

 

2Prettier Playground

 

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

3Postman

 

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

 

 

4StackBlitz

 

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

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

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

 

 

5Bit.dev

 

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

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

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

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

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

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

6CanIUse

 

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

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

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

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

写在最后

以上我尝试找出的一些工具,我觉得它们是我在开发生涯中遇到最好用的前端工具了。如果你觉得还有哪些值得添加的工具,也可以在评论区留言。祝你coding愉快~

 

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。

http://image98.pinlue.com/thumb/img_jpg/I7I6eaS2zGibo1Wia4dQ1sl4lmfsNlgwI8SS8xTxmGsaXwL1NyfxDyTialdsf466uLFJCnt5JmpejpOxiaDZCqAXEw/0.jpeg
分享
评论
首页