聊聊前端开发平常的协做工具（全）

❞

❝

前沿：在掘金写做不知不觉已通过了四个月了，从一开始寥寥无几的阅读量，到如今有破万阅读的文章，感谢曾支持个人掘金友，但愿在将来能加深产出文章的深度，今天从借此机会跟你们分享下树酱平常工做中经常使用的一些工具，或许能够帮到你提高平常的协做效率

❞

1.写做篇 ✏️

❝

基于以前不少童鞋在评论区，问树酱说好比思惟导图很好看，用的是什么，首图是怎么制做的等等问题，因而经过一些工具的整理但愿能帮助到你们

❞

1.1 语雀

❝

语雀是一个蚂蚁金服孵化出来的专业的云端知识库，相似wiki，目前已经覆盖了10 万阿里员工的使用，来进行文档编写及知识沉淀 官方连接🔗

❞

语雀我经常使用的两个方面

• 思惟导图：一个是语雀自带的思惟导图，我的以为UI体验很强（外表协会）

• 日记编排：用语雀来保持记录天天在前端开发中遇到的问题及心得体会，方便复盘和回归，最重要的是排版体验高，支持编排，当你回顾你写的文章的时候，阅读体验高，像是在翻书同样

1.2 Process On

❝

ProcessOn是一个在线协做绘图平台,为用户提供最强大、易用的做图工具。支持在线创做流程图、思惟导图、组织结构图、网络拓扑图、BPMN、UML图、UI界面原型设计等

❞

我主要用process on来绘制交互图及流程图，支持在线实时编辑，不足的就是若是非付费用户则会限制绘制图的数量，下面是操做页面👇

1.3 Carbon

❝

Carbon 用来建立美化版的代码片断，可筛选多种主题切换，而后生成你想要效果的代码片断图 官方连接🔗

❞

1.4 Mdnice

❝

mdnicde全名为Markdown Nice，支持给markdown添加“主题元素”，有点像换肤的感受，支持多种主观，让你的文章仿佛披上了嫁衣，最重要的是支持微信公众号、知乎、还有掘金！官方连接🔗

❞

导出以下图所示

1.5 封面模版

❝

不少童鞋很好奇，我每次文章都会附上一张主题图，是否是本身P的，虽然我是作UI出身的前端，可是设计仍是蛮琐碎和耗时的活，时间应该用在更宝贵的地方，这里介绍的就是我使用的模版在线编辑工具 - 凡科快图 官方连接🔗 或者 canva 官方连接🔗

❞

1.6 Shields

❝

shields.io 主要是用来能够生成 在Markdown 文档中的徽章，咱们常常在github的项目上看到这些徽章，来表述好比单元测试覆盖率、打包的大小、版本信息、认证信息等 官方连接🔗

❞

1.7 Gif生成

❝

有时候图片没法去表达咱们想要阐述的内容，这个时候动态图就起了很重要的做用，能够更直观的描述整个过程

❞

• Mac先经过QuickTime Player 进行屏幕录制

• 再将录制生成的moc视频转换为gif动态图 官方连接🔗

❝

若是是在掘金使用gif的同窗要注意的是，须要在左下角添加图片进行上传

❞

1.8 网页截屏

❝

文章素材须要网页截图？很长时间我要给当前网页截图，我还在用微信的截图工具，其实强大的chrome内置了截屏的功能，那如何使用呢

❞

• 首先打开chrome控制台（打开快捷方式 Option+Command+i）
• 打开命令行 （打开快捷方式 shift + cmd + p 或 win系统 shift + ctrl + p)
• 其次在命令行输入“capture”能够看到以下

❝

注意：capture full size screenshoot和capture screenshoot的区别在于前者是整个页面完整信息的截图，后者只是当前页面的截图

❞

2.效率篇 ⏰

❝

在平常开发中，效率工具的使用，每每能够给我减小不少没必要要时间的浪费，经过工具赋能，帮助咱们提升生产效能

❞

2.1 Iconfont 图标库

❝

Iconfont Icon库方便我的开发者找到本身须要的图标，节省图标设计和查找的时间，不香吗～ 官方连接🔗

❞

2.2 Regexr 正则可视化工具

❝

RegExr是一款在线编辑测试正则表达式的工具,它拥有一个简洁的界面,提供了一个能够实时查看查找与替换正则表达式的文本框 官方连接🔗

❞

2.3 Postwoman 接口调试利器

❝

你据说过Postman，如今来了postwoman，Postman的情敌！它不只免费开源、轻量级、快速，并且还有美观的API调试工具。能帮助咱们节省时间，提高工做效率。官方连接🔗

❞

2.4 CanIuse 兼容性查询

❝

can I use? 顾名思义：我能使用吗，能快速让咱们查看浏览器对某个属性语法的兼容状况，场景应用当前在某个浏览器能够正常使用，但是换了另外一个浏览器以后就不支持了，这个时候就得咱们防患于未然，在对某个属性使用前，作好足够得调研，而不是等到上线才发现问题 官方连接🔗

❞

2.5 Prettier Playground 代码在线格式化

❝

应用场景：当我使用的电脑没有安装IDE,可是我又须要看别人写的代码，这个时候 Prettier Playground能够帮我将本来凌乱的代码改头换面，大大提升可读性 官方连接🔗

❞

左边为源代码，右边为格式化后的代码

2.6 SwitchHosts host管理工具

❝

SwitchHosts 能够帮助咱们快速切换不一样的 hosts 设置、并进行hosts编辑 官方连接🔗

❞

3.命令行工具篇 🔧

❝

All in code! 若是只想用命令行工具来完成一系列有助于提高效率，你能够看看下面这些工具

❞

3.1 n - node 版本切换工具

❝

用来进行 node 版本的切换，方便轻量 官方连接🔗

❞

3.2 nrm - npm镜像管理工具

❝

nrm是npm的镜像源管理工具,有时候由于访问国外资源缘由致使速度太慢,使用nrm能够快速地在npm源间切换,也能够管理你内部的npm来源

❞

3.3 caniuse-cmd - 兼容性测试工具

❝

上文提到web版本的caniuse,这里介绍下它的命令行工具，如何使用？ npm install -g caniuse-cmd 下面是一个关于websocket浏览器兼容性测试的例子👇

❞

往期文章

• 从0到1开发动态表单
• 前端表单数据那些事
• 如何更好管理 Api 接口
• 微前端那些事
• 前端工程化那些事
• 从0到1开发工具库
• 从0到1开发简单脚手架
• 前端Nginx那些事
• 前端运维部署那些事

请你喝杯🍵 记得三连哦～

1.阅读完记得给🌲 酱点个赞哦，有👍 有动力

2.关注公众号前端那些趣事，陪你聊聊前端的趣事

3.文章收录在Github frontendThings 感谢Star✨