分享 63 个面向前端开发人员的开源项目工具

接下来码云笔记为大家分享 63 个面向前端开发人员的开源项目工具，内容虽有点长，但都是我们在做前端开发时需要的工具，整理不易，有需要的拿走不谢。

01、Day.js

Day.js是一个极简的Javascript库，大小只有2Kb左右。它可以在浏览器和NodeJs（服务器端）上运行。和moment js很像，切换到这个库的时候可以放心使用。

此外，它还可以在当今最流行的浏览器上运行，例如Windows XP上的Chrome，Windows 7上的IE 8、9和10，Windows 10上的IE 11，Linux上最新的Firefox，以及新的Safari。

地址：day.js

02、Mono Icon

Mono Icon是一个开源图标，我们可以轻松快速、完全免费地将其应用到我们的网站上。我们可以通过CDN将其直接嵌入到HTML页面中，也可以通过npm为我们的Web项目安装它。

地址：icons mono

03、视觉扩展代码Cho Microsoft Edge

随着Edge浏览器的发展，VS Code还发布了一个新的扩展，用于直接在VS Code中测试和运行Edge Web项目，而无需在计算机上安装此浏览器。

地址：marketplace

04、Blob生成器

Blob生成器是一个在线工具，可以通过SVG编辑为网页创建复杂的形状。我们只需要更改提供的属性，代码就会自动生成。

地址：blobs

05、Library Detector

Library Detector是一个Google Chrome扩展程序，可以轻松查看网站使用的Javascript技术。

地址：library-detector

06、tsParticles-TypeScript Particles

tsParticles-TypeScript Particles是在particle.js基础上重写的库，目的是让我们更轻松地创建更多背景动画，并提供更多实用程序和支持功能。

我喜欢这个库的地方在于它可以用于许多不同的框架，例如reactjs、vuejs、angularjs、Jquery…

地址：particles

07、CSS Value

CSS Value是一个网站，其功能可以很容易地确定某个CSS属性的值。例如选择text-decoration属性，会自动显示相关属性：text-decoration,text-decoration-color,text-decoration-line,text-decoration-skip,text-decoration-style,text-装饰厚度…

地址：cssvalues

08、RunJS

RunJS是一个桌面应用程序，可帮助我们编写专门的Javascript和Typescript代码。它的优势是我们可以快速测试代码，轻松导入和测试库代码，并且能够修改界面、主题和字体以适应我们的偏好。

地址：runjs

09、Duet Date Picker

Duet Date Picker是由Duet Design System开发的开源代码。它允许我们轻松地为网站构建日期选择器组件，而无需使用任何其他库。

我觉得在这个库中的一些功能是有一个黑暗和光明的主题，能够设置允许用户选择的时间间隔，按地区设置日期……

地址：date-picker

10、urlcat

urlcat是一个紧凑的Javascript库，大小仅为0.8kb左右，无需使用任何额外的库。它可以快速轻松地在URL上构建查询，也可以避免我们为网站构建url时的常见错误。

地址：urlcat

11、ztext.js

ztext.js是一个javascript库，可以轻松地为网页构建3D文本，并且可以与所有类型的字体一起使用。

此外，我们还可以为SVG、图像、表情符号等其他元素创建3D效果。

地址：ztext

12、GitHub Profile README Generator

GitHub Profile README Generator是一个在线网络工具，可帮助我们以最完整和最详细的方式在github上构建我们的个人资料页面，包括标题、工作、编程语言技能、（前端）、后端、框架…）、社交网络链接…

地址：gh-profile-readme-generator

13、Wrap SVG Online

Wrap SVG Online是一个应用程序，通过拖放从我们的计算机上传的图像，可以轻松地编辑网页的SVG图像。

地址：warp-svg

14、3D Book Image CSS Generator

3D书籍图像CSS生成器是一个在线工具，可让我们快速轻松地创建3D书籍封面并将其应用到您的网站。

我们只需要提供书籍的图像并编辑提供的CSS属性，例如Width（书籍宽度）、Height（书籍高度）、Thickness（书籍厚度）…您喜欢的代码片段HTML、CSS将是分别自动生成。

地址：3dbook

15、Print.js

Print.js是一个紧凑的Javascript库，它允许我们直接在网页上打印文件，而无需重定向或使用嵌入。

它支持多种格式的打印，例如PDF、HTML（例如表单…）、图像、JSON…此外，它还可以在大多数流行的浏览器上运行，例如Chrome、Firefox、Safari、Edge和Opera。

地址：printjs

16、Công Cụ制表符

制表器允许我们像排序、添加、编辑或删除HTML表格一样轻松地创建包含数据的交互式表格。

我们可以从Javascript Array、AJAX或JSON格式的数据源中获取表的数据。

此外，它还支持当今最流行的浏览器，例如Google Chrome、Firefox、Safari、Opera和Edgege。

它也适用于当今流行的javascript前端框架，如ReactJS、VueJS和AngularJS。

地址：tabulator

17、Textures JS

Textures JS是一个库，可帮助我们快速轻松地为网页创建SVG模式。它建立在D3.js之上，用于可视化我们的数据。在我看来，它在使用相应的模式划分地图中的区域时使用得相当多。

地址：textures

18、DOCX

DOCX是一个库，允许我们使用Javascript或Typescript从网页元素创建.docx文件。

它在浏览器和服务器端（使用Nodejs）都运行良好。据我所知，它有很多关于网站每个组件的详细示例，以及将它应用于React、Vue或angularJS时的具体教程。

地址：docx.js

19、Keen-Slider

Keen-Slider是一个免费的Javascript库，可以快速轻松地创建触摸滑块组件（通常在手机上）和许多其他有用的调整功能，例如垂直滑块、多张幻灯片、幻灯片的延迟加载模式……正如我所看到的，这个库还有一个非常好的功能，可以根据IOS设计和网站的背景过渡效果创建一个timepicker（选择时间）。

地址：keen-slider

20、Math JS

Math JS是一个开源数学库，在Github上为Javascript和NodeJS（服务器端）拥有超过10.5k颗星。它使我们可以灵活地计算和处理许多不同的数据类型，例如数字、大数、复数、分数、单位和矩阵。

地址：mathjs

21、Rough Notation

Rough Notation是一个紧凑的Javascript库，可帮助我们为网页中的元素创建注释，具有许多漂亮的效果，例如下划线、框、圆圈、突出显示、括号…

地址：roughnotation

22、Flip

Flip是一个插件，可让我们快速轻松地为网站创建具有翻转效果的计数器。如果我们需要创建活动计时器、促销活动或筹款活动，我认为这是最适合的库。

地址：pqina

23、Quotebacks

Quotebacks是一种在线工具，可让我们在网站上快速嵌入设计精美的报价单。我们只需要为程序提供4个基本参数：被引用的段落、作者姓名、标题和引用来源的url。然后代码会自动生成，我们只要把它复制到我们想展示的网站上就可以使用了。

地址：quotebacks

24、SVG路径可视化器

SVG Path Visualizer是一种工具，可帮助我们通过输入SVG路径数据来快速直观地查看SVG图像。

此外，该工具还提供了详细的说明，以便我们了解如何创建基本的SVG形状，如直线、曲线、三角形……

地址：svg-path-visualizer

25、Toast UI编辑器

Toast UI Editor是一个文本编辑器，允许我们在网页中编辑Markdown文档的文本或所见即所得。

通过将库划分为许多不同的插件，这将使我们更容易优化，只为我们的网站添加必要的功能。

示例是插件editor-plugin-chart：显示编辑器的图表，editor-plugin-code-syntax-highlight突出显示代码片段，editor-plugin-color-syntax编辑文本的颜色。..但现在它只支持纯javascript、ReactJs、VueJs和Jquery！

地址：tui-editor

26、Jexcel

Jexcel是一个紧凑的Javascript库，可帮助我们为网站创建高度交互的表格，其中包含可以从JS Array、JSON、CSV或XSLX文件中提取的数据。

在我看来，它有一些非常有用的特性，比如用户友好的界面，易于定制和与其他插件和库结合，通过简单的操作处理复杂的数据。

地址：jspreadsheet

27、Chocolat.js

Chocolat.js是一个Javascript库，可以轻松地在网页上显示响应式灯箱。此外，我们还可以在同一页面上设置一张或多张图片，全屏显示图片或将其限制为我们想要的任何div标签。

地址：chocolat

28、Image Compare Viewer

Image Compare Viewer是一个使用Javascript构建的开源库，可以创建一个直接在网页上比较两个图像的组件。在我看来，它通常用于比较编辑前后的图像，以帮助用户获得更直观和有区别的视图。

地址：image-compare-viewer

29、Trianglify

Trianglify是一个库，它允许我们通过组合和构建三角形来为网站创建漂亮的背景图案。我们只需选择要为背景图案设置的库提供的参数，例如宽度、高度、调色板、单元格间距……。

地址：trianglify

30、Notyf

Notyf是一个Javascript库，可帮助我们为大小仅为3Kb，它可以为网站创建toast消息。它以响应方式显示在许多不同的设备屏幕上，并且易于与当今流行的JS框架（如React、Angular、Aurelia、Vue和Svelte）一起使用。

地址：notyf

31、Dinero.js

Dinero.js是一个javascript库，它提供了许多功能来帮助我们工作和处理网络中与货币相关的问题。

地址：dinerojs

32、BEM CEAT SHEET

BEM CEAT SHEET是一个网站，它为我们提供了一种更优化、更一致的方式来使用网站组件命名类。根据这个规则命名将有助于团队中的开发人员轻松了解每个类的功能，并更有效地协同工作。

地址：bem-cheat-sheet

33、Rough.js

Rough.js是一个图形库，用于在网页中快速轻松地绘制直线、曲线、圆弧、多边形、圆形和椭圆形。此外，它还支持SVG Path！

地址：roughjs

34、simpleParallax.js

simpleParallax.js是一个体积小巧的开源javascript库，它将帮助我们简单轻松地为网站图像创建视差动画效果。

地址：simpleparallax

35、免费网站图标制作工具

网站图标是用户访问我们的网站时显示在浏览器选项卡上的小徽标。我们也可以使用另一种格式，如svg…

我想向您介绍一种工具，可以帮助您轻松创建网站图标，设计精美且完全免费，免费的网站图标制作工具。

地址：favicon

36、The good line-height

The good line-height让我们可以更直观地查看网页中文本的属性使用line-height。它提供了3个主要属性供我们自定义编辑。

地址：the-good-line-height

37、CSS 3D变换

这是使用透视属性为网页创建3D对象的方法的集合。我最喜欢这里的部分是每个代码片段旁边都有一个特定的示例。这将使我们更容易可视化受众，并查看哪些适合我们的网站。

地址：css-3d-transform

38、Good Web Design

Good Web Design是一个网站，收集了许多漂亮的登陆页面设计，分为CTA（号召性用语）、导航栏、页脚、案例研究等多个部分。

地址：good-web-design

39、BGJar

BGJar是一个在线工具，可以轻松快速地为我们的网站创建SVG背景。我们只需编辑必要的信息，网络应用程序将自动导出图像或代码供您应用到网站。

地址：bgjar

40、Bootstrap Icons

以前，Bootstrap Icons的诞生是为了满足构建Bootstrap组件、文档的需求。但是，今天它也可以通过以SVG样式格式化的图标用于许多其他项目。它将帮助我们通过CSS轻松设置图标样式，而不必担心损坏的图像。

地址：icons-getbootstrap

41、Squircley

Squircley帮助我们为Web中的对象创建漂亮的形状，例如背景、图标、徽标……

地址：squircley

42、mailgo

通常，当我们打开邮件链接时，浏览器将使用默认应用程序打开电子邮件编辑器。至于mailgo，我们可以设置选项来帮助用户打开其他电子邮件编辑器，例如Gmail、Outlook……或默认打开。除了使用a href=”mailto:”标签外，它还可以与href=”tel:”一起使用！

地址：mailgo

43、Forge Icon

Forge Icon是一个为我们的Web项目（例如电子商务、旅游、社交网络、应用程序设计…）组合许多不同类型图标的地方。

地址：icons-forgesmith

44、GooFonts

对于字体，我最常使用Google字体。它是免费的，并且有很多漂亮的字体。但是，字体数量如此之多，我们很难为我们的网站找到合适的字体。

因此，我想介绍一个名为GooFonts的工具。它将负责将Google Font的字体类型划分为许多小数组，例如用于报纸、学校、卡通、徽标的字体……

地址：goofonts

45、CSS Spider

CSS Spider是Google Chrome、Firefox的扩展，主要任务是帮助我们查看属性并获取网页中任何对象的CSS代码。

地址：cssspider

46、Bit

在编程中，我们通常会在使用它来解决问题后存储好的和有用的代码。主要目的是以后如果遇到类似的情况，可以重复使用，不用浪费时间去寻找和思考。

Bit的诞生是为了让我们更轻松地完成上述工作。它将立即将代码存储在云中，我们可以在任何地方访问它而无需担心安全性。

有两种保存代码片段的方法是私有的（只有你可以看到）和公开的（每个人都可以看到）。

因此，Bit工具也是您可以参考的其他程序员（如公共）的许多有用代码的地方。

地址：bit

47、Hat sh

Hat sh是一款免费工具，可帮助我们快速、轻松、安全地加密文件。

地址：hat-sh

48、screen guru

screen guru是一个在线工具，可让我们为网站截取屏幕截图。

地址：screen guru

49、FontBase

FontBase为网页设计师提供友好的界面，帮助我们快速轻松地管理字体。它具有许多便利，例如一键式加载谷歌字体库，始终更新新版本，轻松搜索字体，无需安装即可激活字体…

地址：fontbase

50、uiLogos

uiLogos是一个为网站聚合了超过25个专业设计文件的网站。但是，它只允许导出PNG文件，如果要使用SVG文件，则需要支付大约37美元。

地址：uilogos

51、DevLorem

DevLorem是一个帮助我们在Web开发过程中创建插图的工具。

地址：devlorem

52、CSSReference.io

CSSReference是CSS属性指南的集合。我最喜欢它的是通过说明性示例将信息可视化的能力。这也将使我们更容易吸收和享受学习编码。

地址：cssreference

53、Codeimg

Codeimg是一种工具，可帮助我们通过具有许多支持功能的图像显示代码，例如选择背景主题、指定颜色、字体大小、代码语言…

地址：codeimg

54、HTMLReference

HTMLReference是一个类似CSSReference的网站，其目的是通过特定示例收集所有HTML属性的说明。

地址：htmlreference

55、Wavesnippets

Wavesnippets是一种工具，可让我们将要与他人共享的代码部分设置为动画或视频或GIF。这种形式的一个很好的例子是它使其他人更容易理解和更好地理解你编写的代码的顺序。

地址：wavesnippets

56、Hero Patterns

Hero Patterns是用于网页设计的SVG背景图案的集合。

地址：heropatterns

57、Boxicons

Boxicons是一个简单且免费的矢量图标集合，适用于网页设计师和开发人员。

地址：boxicons

58、Coaster

Coaster是一款让我们在Unsplash上轻松查找和下载图像的软件。此外，它还支持Windows和Mac操作系统版本。

地址：heycoaster

59、Pretty Snap

Pretty Snap是一种工具，可帮助我们为要在网页中显示的图像创建漂亮的背景。

地址：prettysnap

60、Link-to-qr

Link-to-qr是一个免费的网站二维码生成器。

地址：link-to-qr

61、CSS背景图案

CSS Background Patterns是一组漂亮的网站背景图案。我喜欢这个网站的地方是我们可以立即在该工具的网站中应用我们想要的背景。

地址：css-backgrounds

62、生成SVG波形

Generate SVG Waves是一个在线工具，可帮助我们的网站创建SVG背景波。

地址：svgwave

63、DEVICE SHOTS

DEVICE SHOTS 可以轻松地将网站的照片应用到当今许多流行的设备屏幕上，例如计算机、手机、平板电脑……，非常方便。

地址：deviceshots