前言

最近在整理笔记的时候,发现平时收藏使用的插件的笔记比较乱,刚好抽空整理了一下,并提取一些精华部分放在这里。

这里我分一下类主要为以下三大类:

  1. 开发中用的依赖或库

  2. vscode插件

  3. 其他/黑科技

开发中用的依赖或库

echart

echart是一个基于js开发的可视化图表库,在这块echart确实做的非常不错,各类图表一应俱全,有比较复杂的需求建议可以使用他,上手还是比较简单的。

推荐指数:⭐⭐⭐⭐⭐

官网地址:echarts.apache.org/zh/index.ht…

image.png

vconsole

手机端调试利器vconsole,针对移动端的前端开发者调试面板,使用也非常简单,如果你想做一下简单的调试建议使用他,有复杂的需求还是推荐使用Whistle,各位掘友们可自行搜索引擎。

推荐指数:⭐⭐⭐⭐⭐

官网地址:gitee.com/Tencent/vCo…

image.png

momentjs

momentjs是一个专注时间处理的库,功能很强大,对时间类需求比较大的,推荐使用,但是一般对我个人而言用到的方法其实相对较少一些,而且多数情况都会自己封装相关的处理方法,与这个库相比的话,他体积确实大了不少,所以对时间处理相关的需求不大的话还是建议自己封装。

推荐指数:⭐⭐⭐⭐

官网地址:momentjs.cn/

image.png

lodash

lodash是一个挺实用的js工具库,主要处理数组、字符串、对象等等,使用确实相对简便,方法也相当之多,所以他的整个包的体积也达到1MB之多,为简化处理而增大项目的体积也是需要大家去衡量一下当前项目的需求,大型项目建议不轻易使用该库。

推荐指数:⭐⭐⭐

官网地址:www.lodashjs.com/

image.png

qiankun

qiankun作为比较流行的微前端框架确实相当亮眼,技术栈无关,使用简便,官方文档也比较齐全,希望微前端能一直发扬光大,还需要大佬们开疆拓土,生产相对成熟的解决方案输出到社区里,壮大微前端的生态圈。中小型项目还是建议统一技术栈即可。

推荐指数:⭐⭐⭐⭐

官网地址:qiankun.umijs.org/zh/guide

image.png

mockjs

mockjs模拟数据,在后端还没有提供接口出来之前,前端同学可以使用他来模拟后台数据的传输,并且mock也提供了很多占位符的方法来随机生成对应的数据,唯一需要注意的就是mock会拦截真实的请求,所以联调阶段记得要屏蔽mock数据哦~

推荐指数:⭐⭐⭐⭐

官网地址:mockjs.com/

image.png

file-saver

file-saver是一款基于js封装的下载方法,大小仅36KB,可以下载blob类型、文件流、url等,包体积不大,并且游览器的兼容性也处理的比较好,想了解的同学可以尝试使用。

推荐指数:⭐⭐⭐⭐

官网地址:github.com/eligrey/Fil…

image.png

vue-dark-photo

vue-dark-photo 一款基于vue2.x封装的轻便简易的图片预览组件,支持放大、缩小、下载、打印等功能。哈哈哈,自己打个广告,是笔者开源的项目 目前star 100+,有兴趣的同学可以去看看,有发现问题想反馈的记得留言给我或提issues给我哦。

推荐指数:⭐⭐⭐⭐⭐

官网地址:github.com/Dark2017/vu…

在线demo:dark2017.github.io/vue-dark-ph…

image.png

vscode插件

any-rule

any-rule提供了很多常用的正则匹配,并且使用简单,一键生成,大家可以根据项目需求调整成自己需要的正则表达式应用在项目当中。

推荐指数:⭐⭐⭐⭐⭐

image.png

Git Graph

这是一个可以查看git历史的插件,使用很方便,安装完之后就可以查看某个文件各个部分的提交记录以及对应提交人和时间,对于需求规范git以及优化提交记录等比较友好且直管,当然用sourcetree也是可以的,具体看个人喜好。

推荐指数:⭐⭐⭐⭐

image.png

project-tree

这是一个自动生成项目结构的插件,对于需要描述项目以及整体结构输出文档的同学应该帮助蛮大的。

推荐指数:⭐⭐⭐⭐

image.png

Todo Tree

Todo Tree 是一个提示待办事件的插件,用法相当简单,在你的代码中注释//TODO,他的字样会变得显眼,并且在你的侧栏会有相应的提示。

推荐指数:⭐⭐⭐⭐

image.png

NGINX Configuration

对于经常配置nginx的同学推荐使用,nginx语法高亮,使用后极度舒适~ 当然没有接触过nginx或者比较少用的就可以忽略这条了~

推荐指数:⭐⭐⭐

image.png

koroFileHeader

每当你新建一个文件时候会在头部自动生成作者信息、创建时间、更新时间等,并且更新时间是根据你最后一次保存自动刷新的~ 还有一些好玩的头部注释(比如佛祖、龙等)这里都有~

推荐指数:⭐⭐⭐⭐

image.png

其他/黑科技

postman

前后端同学都可以使用,接口调试利器,调试不要太简单~

推荐指数:⭐⭐⭐⭐⭐

官网地址:www.postman.com/

image.png

snipaste

截图神器,比你的qq或者微信截图好用N倍,不信自己下个玩玩。

推荐指数:⭐⭐⭐⭐⭐

官网地址:zh.snipaste.com/

image.png

Navicat Premium

可视化数据库管理,对于像我这种只会增删改查的前端不要太友好了,使用简便,管理数据库分分钟。

推荐指数:⭐⭐⭐⭐⭐

官网地址:www.navicat.com.cn/products/na…

image.png

lucky-canvas

是一个开源的大转盘抽奖插件,基于js + canvas开发,对于有运营活动要求的同学可以去使用他,有九宫格和大转盘,看自己需求来决策。

推荐指数:⭐⭐⭐⭐

官网地址:100px.net/demo/wheel/…

image.png

wangEditor

一个强大的富文本框编辑器,并且有开源团队在维护该项目,总的来说相当不错,有该需求的同学建议优先使用该插件。

推荐指数:⭐⭐⭐⭐

官网地址:www.wangeditor.com/

image.png

ImageHover Effects

这是一个开箱即用的css动画效果的网站,相当有意思,主要处理动画过渡效果,可以直接一键复制css代码到你的项目中,再也不用担心动画写不好了~

推荐指数:⭐⭐⭐⭐

官网地址:turkyden.com/image-hover…

image.png

JS 2020

这是一个汇总了全球js 2020(每年都会更新)包括技术趋势、从业者等的全面情况,很适合了解整个js界的整体趋势及他庞大的生态圈~

推荐指数:⭐⭐⭐⭐⭐

官网地址:2020.stateofjs.com/en-US/

image.png

chrome清理缓存

这里可以清除一些网站的dns缓存,特别适合需要将项目代理到本地开发的同学,配合switchhost使用更佳~

推荐指数:⭐⭐⭐⭐

官网地址:chrome://net-internals/#hsts

image.png

switchhost

SwitchHosts 是一个管理、切换多个 hosts 方案的工具。如果你想修改host,但是不用他,你就要到手动到C盘中去修改host文件,相当麻烦,用他来节省你的时间吧~

推荐指数:⭐⭐⭐⭐

官网地址:github.com/oldj/Switch…

image.png

可视化nginx配置

你只需要动动鼠标选择你想要的配置他就会生成对应模板,直接下载下来到你的nginx配置文件即可~

推荐指数:⭐⭐⭐⭐

官网地址:www.digitalocean.com/community/t…

image.png

在线转gif

将你录制的视频上传并截取即可生成对应的gif格式的文件哦~ 并且是免费的 缺点是只能截取5秒钟,若像素过大转换的时间可能会比较久,适合做demo的效果图~

推荐指数:⭐⭐⭐

官网地址:app.xunjiepdf.com/

image.png

npm图链接

如果你要发布一个npm包并且在GitHub上或者其他地方展示最近发布时间以及版本等信息,那么这个就在合适不过你了~

推荐指数:⭐⭐⭐

官网地址:nodei.co/

image.png


作者:饼干_
链接:https://juejin.cn/post/6966156550465388580
来源:掘金