这些提升前端开发效率的工具,一定要用起来~~

·  阅读 4068
这些提升前端开发效率的工具,一定要用起来~~

前端提升效率的工具

现在各行各业都在卷,你卷我卷大家卷;想要卷的好,工具不能少;使用高效的工具可以极大提升我们的开发效率,让你卷的更轻松,摸鱼更愉快。。。

接下来分享一些我经常使用的免费工具

本地软件

下面是一些电脑上安装的软件工具,排名不分先后

SwitchHosts

这是一款能够非常便捷的管理和修改hosts文件的软件,它可以同时支持Mac和Windows两大平台。

github地址

SwitchHosts

前端开发经常需要修改hosts文件,windows系统需要进入C:\WINDOWS\system32\drivers\etc下才能找到hosts文件, mac系统则需要通过sudo vi /etc/hosts修改hosts文件,还需要记住路径;

使用工具的话,直接编辑内容,保存即可,省时省力。

SourceTree

这是一款git的GUI可视化管理工具,支持Windows和Mac平台。能够方便管理版本库和进行git操作,还可以查看和对比代码改动。

官网地址

SourceTree

SourceTree搭配BeyondCompare工具进行代码对比效果更好。

我个人喜欢使用git命令行来进行git操作, 然后使用SourceTree来检查和对比代码的细节改动。

iTerm2

官方介绍:iTerm2 是终端的替代品,也是 iTerm 的继任者。iTerm2 将终端带入现代,具有您从来不知道自己一直想要的功能。

官网地址

iTerm2支持分屏,还可以定制主题,打造更美观的终端。

iTerm2

搭配zshOh My ZshPowerlevel10k让你拥有超强终端,具体的安装和配置可以参考这篇文章: iTerm2 + zsh + Oh My Zsh + Powerlevel10k 打造 Mac 下最强终端

ApiFox

官方介绍: API 文档、调试、Mock、测试一体化协作平台。Apifox = Postman + Swagger + Mock + JMeter。

官网地址

这是一款免费的工具。功能齐全,便于团队协同开发,前后端、测试全流程闭环。

image.png

Proxyman/LightProxy

这两款软件都是mac系统免费的抓包软件。

image.png

Proxyman:

github地址
官网地址

Proxyman

LightProxy:

github地址
官网地址

LightProxy

mac系统抓包工具还有Charles,不过要收费。

Alfred

Mac效率工具必备神器

这款软件不用过多介绍,类似这种多功能集成的工具也挺多,但是不影响它的知名度。没有它也可以轻松干活,但是好好利用的话,效率会提高很多。

官网地址

具体的功能介绍和配置可以参考这篇文章: Mac 效率工具必备神器 —— Alfred

Clipy

一款免费的系统剪贴板管理软件,他可以记录最近拷贝的信息,便于重复使用。

github地址

前端开发过程中,ctrl+cctrl+v频率非常高,有了剪贴板管理工具,就可以方便的在剪贴板历史中拿到之前复制的内容,大大提高搬砖效率。

Clipy

剪贴板管理软件有很多,功能也都基本类似,随便使用一款即可。

超级右键 Lite

增强mac系统右键功能的工具

这款软件可以定制右键菜单快捷功能选项,包括快捷新建各种文件,快捷进入终端、VsCode,截图、切换显示/隐藏等功能。

image.png

直接在app store中下载即可

typora

这是一个markdown文件编辑器。无缝实时预览,所见即所得

官网地址

markdown文档广泛运用于编写开发文档、技术笔记、博客、文章、公众号等等,一款好用的离线markdown文档编辑器少不了。

image.png

现在VsCode安装相关的markdown插件也可以轻松编写markdown文档,在编辑体验商比typora更灵活快捷,可以根据个人习惯使用。

Thor Launcher

免费的mac系统快捷键设定软件,可以快速在应用之间切换。

看这软件图标和软件名,是不是想到了雷神索尔。

image.png

快捷键可按个人习惯绑定

Thor Launcher

这个软件可在app store中直接下载

在线工具

接下来介绍一些在线的工具网站

Squoosh

谷歌出品在线免费图片压缩工具(jpg、png等,压缩效果比tinypng稍好)

链接:Squoosh

官网截图:

Squoosh_1.png

压缩完图片之后,还能对压缩前后的图片进行现场比对

Squoosh_2.png

不会上传图片,直接在浏览器本地进行处理。

tinypng

一个免费的提供图片压缩的网站,压缩率和图片质量都挺高。

链接:tinypng

前端在优化图片体积时,经常会用到的一个网站,虽然有UI同学帮忙切图,但是自己动手,丰衣足食。

而且我还发现,UI同学也在用这个网站来压缩图片,这就很奇妙了。

tinypng

还有一个gif图片制作、压缩的网站 ezgif,还包含一些其他功能。

npm.devtool.tech

这个网站有几个特色:

  • 1、可以查看流行的npm包
  • 2、在控制台中可以直接调用npm包的方法,在线调试npm包功能
  • 3、能够上传项目的package.json文件并查看该项目使用的技术栈,可以查看各个依赖包的详细信息

链接:npm.devtool.tech

控制台调试:

npm.devtool.tech

当你只是想测试下lodash库时,没有必要下载lodash库到本地,然后新建临时目录和文件进行调试。直接搜索lodash, 然后就可以在控制台中使用lodash库了。

readme.so

这个网站可以让你快速编写一个github的README文档,它内置了一些README相关的模板模块,你只需要从选中模块,就可以将模块的模板添加到文档中,并在模板基础上进行修改。

链接:readme.so

readme.so

shields.io

vue

shields.io

这些标签效果都可以在这个网站上进行定制,让你的README更美观

链接:shields.io

tool.lu

链接:tool.lu

tool.lu

在线的工具箱,这里列出了这么多工具,总有一款你会用得上。

tool.oschina.net

这也是一个在线工具箱集合

链接:tool.oschina.net

tool.oschina.net

另外还有:

浏览器插件

一些必备的浏览器插件,可以参考我的另一篇文章,必备的chrome浏览器插件,你都用上了吗~~

VsCode扩展插件

最后,分享一些我常用的VsCode扩展插件; 当然,实用的VsCode插件远不只下面列出的这些插件,其他插件可以根据个人喜好安装。

这里就不一一截图了,VsCode搜索相应插件可直接查看效果。

  • Auto Rename Tag: 修改 html 标签,自动帮你完成头部和尾部闭合标签的同步修改

  • Code Runner: 可选取代码片段,右键/快捷键直接运行,在控制台查看运行结果

  • Draw.io integration: 直接在编辑器中画流程图的工具

    Draw.io integration

  • indent-rainbow: 代码缩进层次用不同的颜色高亮显示,更清晰的显示代码缩进层次

  • koroFileHeader: 一键生成文件注释和函数注释

    文件注释

    函数注释

  • Markdown Preview Enhanced: 在VsCode中预览markdown文件

  • open in browser: 可以将HTML等文件直接用浏览器打开,查看效果

  • path intellisense: 自动识别并补全文件路径

  • REST Client: 在VsCode中实现跟postman相同的功能

  • tree-generator: 选择文件夹,一键生成目录树

  • GitLens — Git supercharged: VsCode中管理git、操作和查看等功能

分类:
开发工具
标签:
分类:
开发工具
标签:
收藏成功!
已添加到「」, 点击更改