原文链接: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