前端提升效率的工具
现在各行各业都在卷，你卷我卷大家卷；想要卷的好，工具不能少；使用高效的工具可以极大提升我们的开发效率，让你卷的更轻松，摸鱼更愉快。。。
接下来分享一些我经常使用的免费工具
本地软件
下面是一些电脑上安装的软件工具，排名不分先后
SwitchHosts
这是一款能够非常便捷的管理和修改hosts文件的软件，它可以同时支持Mac和Windows两大平台。
前端开发经常需要修改hosts文件，windows系统需要进入C:\WINDOWS\system32\drivers\etc下才能找到hosts文件, mac系统则需要通过sudo vi /etc/hosts修改hosts文件，还需要记住路径；
使用工具的话，直接编辑内容，保存即可，省时省力。
SourceTree
这是一款git的GUI可视化管理工具，支持Windows和Mac平台。能够方便管理版本库和进行git操作，还可以查看和对比代码改动。
SourceTree搭配BeyondCompare工具进行代码对比效果更好。
我个人喜欢使用git命令行来进行git操作, 然后使用SourceTree来检查和对比代码的细节改动。
iTerm2
官方介绍：iTerm2 是终端的替代品，也是 iTerm 的继任者。iTerm2 将终端带入现代，具有您从来不知道自己一直想要的功能。
iTerm2支持分屏，还可以定制主题，打造更美观的终端。
搭配zsh、Oh My Zsh、Powerlevel10k让你拥有超强终端，具体的安装和配置可以参考这篇文章:
iTerm2 + zsh + Oh My Zsh + Powerlevel10k 打造 Mac 下最强终端
ApiFox
官方介绍: API 文档、调试、Mock、测试一体化协作平台。Apifox = Postman + Swagger + Mock + JMeter。
这是一款免费的工具。功能齐全，便于团队协同开发，前后端、测试全流程闭环。
iProxy/Proxyman/LightProxy
Proxyman, LightProxy 这两款软件都是mac系统免费的抓包软件。
Proxyman:
LightProxy:
听说 lightProxy 已经不维护了，原作者新发布了 iProxy，在lightProxy 基础上做了一些优化升级，目前持续维护中。现在也是我的主力工具。
mac系统抓包工具还有Charles，不过要收费。
Alfred
Mac效率工具必备神器
这款软件不用过多介绍，类似这种多功能集成的工具也挺多，但是不影响它的知名度。没有它也可以轻松干活，但是好好利用的话，效率会提高很多。
具体的功能介绍和配置可以参考这篇文章： Mac 效率工具必备神器 —— Alfred
Clipy
一款免费的系统剪贴板管理软件，他可以记录最近拷贝的信息，便于重复使用。
前端开发过程中，ctrl+c和ctrl+v频率非常高，有了剪贴板管理工具，就可以方便的在剪贴板历史中拿到之前复制的内容，大大提高搬砖效率。
剪贴板管理软件有很多，功能也都基本类似，随便使用一款即可。
超级右键 Lite
增强mac系统右键功能的工具
这款软件可以定制右键菜单快捷功能选项，包括快捷新建各种文件，快捷进入终端、VsCode，截图、切换显示/隐藏等功能。
直接在app store中下载即可
typora
这是一个markdown文件编辑器。无缝实时预览，所见即所得
markdown文档广泛运用于编写开发文档、技术笔记、博客、文章、公众号等等，一款好用的离线markdown文档编辑器少不了。
现在VsCode安装相关的markdown插件也可以轻松编写markdown文档，在编辑体验商比typora更灵活快捷，可以根据个人习惯使用。
Thor Launcher
免费的mac系统快捷键设定软件，可以快速在应用之间切换。
看这软件图标和软件名，是不是想到了雷神索尔。
快捷键可按个人习惯绑定
这个软件可在app store中直接下载
MouseCatch （捕鼠器）
一款简洁的多屏快速切换工具
mac外接屏幕时，经常需要进行显示器切换操作，每次都是通过移动光标来切换激活显示器，再进行后续操作。
如果嫌每次移动光标太麻烦，则可以使用这个小工具，设置快捷键后，可以快速切换显示器。
这个软件可在app store中直接下载
Bob （翻译工具）
是一款 macOS 平台翻译和 OCR 软件
这是一款开源的翻译和 OCR 软件, 可以接入多个平台的翻译服务。
-
翻译功能： 划词翻译、 截图翻译、 输入翻译、 翻译多开、 自定义插件、 自动识别语种、 驼峰拆分、蛇形拆分、 AppleScript、 调用、 PopClip 调用等
-
OCR 功能： 截图 OCR、 静默截图 OCR、 访达选图 OCR、 离线识别、 连续识别、 二维码识别、 自动复制、 智能分段等
我自己配置了百度翻译、腾讯翻译君和Google翻译，这几个基本够用了
看下翻译的效果
具体内容可查看文档： github地址
在线工具
接下来介绍一些在线的工具网站
Squoosh
谷歌出品在线免费图片压缩工具（jpg、png等,压缩效果比tinypng稍好）
链接：Squoosh
官网截图：
压缩完图片之后，还能对压缩前后的图片进行现场比对
不会上传图片，直接在浏览器本地进行处理。
tinypng
一个免费的提供图片压缩的网站，压缩率和图片质量都挺高。
链接：tinypng
前端在优化图片体积时，经常会用到的一个网站，虽然有UI同学帮忙切图，但是自己动手，丰衣足食。
而且我还发现，UI同学也在用这个网站来压缩图片，这就很奇妙了。
还有一个gif图片制作、压缩的网站 ezgif，还包含一些其他功能。
npm.devtool.tech
这个网站有几个特色：
- 1、可以查看流行的npm包
- 2、在控制台中可以直接调用npm包的方法，在线调试npm包功能
- 3、能够上传项目的
package.json文件并查看该项目使用的技术栈，可以查看各个依赖包的详细信息
控制台调试：
当你只是想测试下lodash库时，没有必要下载lodash库到本地，然后新建临时目录和文件进行调试。直接搜索lodash, 然后就可以在控制台中使用lodash库了。
readme.so
这个网站可以让你快速编写一个github的README文档，它内置了一些README相关的模板模块，你只需要从选中模块，就可以将模块的模板添加到文档中，并在模板基础上进行修改。
链接：readme.so
shields.io
这些标签效果都可以在这个网站上进行定制，让你的README更美观
链接：shields.io
tool.lu
链接：tool.lu
在线的工具箱，这里列出了这么多工具，总有一款你会用得上。
tool.oschina.net
这也是一个在线工具箱集合
另外还有：
浏览器插件
一些必备的浏览器插件，可以参考我的另一篇文章，必备的chrome浏览器插件，你都用上了吗~~
VsCode扩展插件
最后，分享一些我常用的VsCode扩展插件； 当然，实用的VsCode插件远不只下面列出的这些插件，其他插件可以根据个人喜好安装。
这里就不一一截图了，VsCode搜索相应插件可直接查看效果。
-
Auto Rename Tag: 修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改
-
Code Runner: 可选取代码片段，右键/快捷键直接运行，在控制台查看运行结果
-
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、操作和查看等功能
-
别名路径跳转 可以解决vue项目中
import引入的文件路径使用了@别名或者省略了.vue扩展名时无法跳转文件的问题 -
Live Server 可以在任意目录启动一个本地服务器
