10 个很棒的前端开发工具来提高你的生产力

水深无声 2022-09-10 06:18 322阅读 0赞

![dd9fa3a55421b04fba098185a7da50cc.png][]

英文 | https://javascript.plainenglish.io/10-awesome-front-end-development-tools-to-boost-your-productivity-b1d2efc4c4ba

翻译 | 杨小二

# **介绍** #

作为开发人员，我们总是需要使用一些资源和工具，这些资源和工具可以让我们的生活更轻松，并在处理项目或学习某些东西时提高我们的生产力。现在网络上有很多工具可用，并且专门为开发人员创建。其中很多都是免费的，你无需支付任何费用。

在本文中，我们将为你列出一些非常有用的前端开发工具，这些工具可以在网络上免费获得。

现在，让我们开始吧。

# **1、 UiGradients** #

地址：https://uigradients.com/\#Peach

UiGradients是一款出色的 Web 工具，其中包含一系列令人惊叹的颜色渐变，你可以自定义和选择这些渐变。

你还可以获取这些渐变颜色的CSS 代码，或者直接以 JPG 格式下载。

![1546a25c7ac940ca9b8bad7c91864374.png][]

# **2、 APP响应式应用** #

地址：https://responsively.app/

这个工具可帮助你更快地开发响应式 Web 应用程序。对于所有前端开发人员来说，这是一个很好的 DevTool，因为它会让你的工作更轻松。

![9acaaa8a991312f4a98f6e97c2210674.png][]

# **3、 Public  API** #

地址：https://public-apis.io/

Public APIs是一个网站，为开发人员提供了一系列免费的公共 API，例如电影 API、音乐 API、开放数据 API 等等。你也可以在那里提交你自己的 API。

![18608f6abb2ed7546fa6ef5501d03ba8.png][]

# **4、Undraw** #

地址：https://undraw.co/illustrations

Undraw是一个很棒的网络应用程序，你可以在其中找到许多可以在网页上使用的 SVG 图像和插图。

它还允许你将SVG 图像嵌入到你的网站的能力相结合。

![247231ec32c80fdc54b7d34f30df6a0b.png][]

# **5、Lorem Picsum** #

地址：https://picsum.photos/

Lorem Picsum是一个简单的网站，你可以根据自己的需要轻松获取随机和特定的图像效果。这是照片的 lorem ipsum。

![49c1fd41639e78838f1c6380e1e3f22e.png][]

# **6、DevDocs** #

地址：https://devdocs.io/

DevDocs是一个非常有用的开源 Web 应用程序，它在一个易于导航和访问的界面中组合了多个 API 文档。它包含许多有关不同 Web 技术的文档，你可以轻松访问和学习这些文档。它也适用于离线模式。

![5c4efdb03f76a1d4e33870c6a2f8b5cd.png][]

# **7、Onepagelove** #

地址：https://onepagelove.com/

这是一个网站，它为你提供了一堆主题和模板以及一些前端开发的学习技巧。这是一个你可以获得灵感的好地方。如果你想使用它们，它们还能够下载免费模板。

![368e86d1bedc44d34751a59f2b0f8fbd.png][]

# **8、RegEx 101** #

RegEx 101是一款免费的正则表达式调试器，具有实时解释、错误检测和高亮显示功能。它适用于 PHP、JavaScript、Python 和 Golang。

![db7b82b35bf9f700ef6d6a6bd89bab53.png][]

# **9、Prettier** #

Prettier是一个免费工具，你可以使用它来使代码格式良好。它支持多种语言并与大多数编辑器集成，例如 VSCode、Sublime 等。

![3ab2fc8837ac7f8a27d7dde67a34dd99.png][]

# **10、Flaticon** #

Flaticon允许你获得 SVG、PNG 和其他格式的免费矢量图标。你可以访问他们数据库中的数千个图标。这比创建自己的图标要容易得多，这需要花费大量时间。

![64cc4bf26b50bd5c0143fc7dd3782ebf.png][]

# **结论** #

如你所见，所有这些工具都是有用且免费的。它们允许你以简单的方式完成不同的任务，以提高前端 Web 开发人员的工作效率。

感谢你阅读这篇文章。希望你觉得它有用。

#  #

**学习更多技能**

**请点击下方公众号**

![6ca069488b53345022294e8743a16b64.gif][]

![d3e80869d3e6512791647cc27e332b37.png][]

![4c57c6d42766fe8ee9563da3dcd12117.png][]

[dd9fa3a55421b04fba098185a7da50cc.png]: /images/20220829/6e0676a1ed684c0f85bd6a672c6ae027.png
[1546a25c7ac940ca9b8bad7c91864374.png]: /images/20220829/28416ffeff3746bc86c4b8cdfafd3ec0.png
[9acaaa8a991312f4a98f6e97c2210674.png]: /images/20220829/79b835d3f45343d789ef4f85276aa55e.png
[18608f6abb2ed7546fa6ef5501d03ba8.png]: /images/20220829/e5d0d4a9786f42519f045d4655b0547d.png
[247231ec32c80fdc54b7d34f30df6a0b.png]: /images/20220829/43827cd68dd4478abd332ed492560723.png
[49c1fd41639e78838f1c6380e1e3f22e.png]: /images/20220829/40250f8ff07240d9b48176b39cb72ca3.png
[5c4efdb03f76a1d4e33870c6a2f8b5cd.png]: /images/20220829/578f451cd3364381950fe278c8eaa2ea.png
[368e86d1bedc44d34751a59f2b0f8fbd.png]: /images/20220829/39ad526c74b544ac8c3a413c1ee6be3f.png
[db7b82b35bf9f700ef6d6a6bd89bab53.png]: /images/20220829/19bfc6467acf427ea113af04464d0c24.png
[3ab2fc8837ac7f8a27d7dde67a34dd99.png]: /images/20220829/9f2d7ebb9a794694929aedaef7ce888a.png
[64cc4bf26b50bd5c0143fc7dd3782ebf.png]: /images/20220829/f5a247d935904689b14d32ec0d488650.png
[6ca069488b53345022294e8743a16b64.gif]: /images/20220829/bc9c2badffe34e0bb3744f97a4bf961e.png
[d3e80869d3e6512791647cc27e332b37.png]: /images/20220829/71edab43829a469a983ea2570db02244.png
[4c57c6d42766fe8ee9563da3dcd12117.png]: /images/20220829/1307a1fb9c5a46e796ae63c5fe4141e4.png