|
|
发表于 2022-9-20 12:02:00
|
显示全部楼层
前言
前端开发主要会涉及两种工具
编码工具是我们用的最多的，工欲善其事，必先利其器，所以一款好的编码工具可以提升我们的开发效率，现实点就是早点干完活回家吃饭。下面我重点介绍下面两种工具，大家可以选择自己喜欢的使用。
编码工具
1、webstorm - 收费/可以免费
Webstorm
第一款要推荐的也是我正在使用的工具，就是webstorm，很多人说jetbrains出品，必属精品，使用体验确实很好，插件也很丰富并且优质；
jetbrains的产品大多数都是收费的，webstorm个人版售价在300多人民币左右就可买到正版，当然懂得都懂。因为是我的主力开发工具，所以买了个人版授权。
因为它功能齐全，并且是基于Java开发的，所以对电脑的配置要求会有点高，低配的电脑上会有些卡顿。个人比较喜欢的有下面的特性：
- 智能的代码提示，因为项目启动会建立索引，所以提示也是很准确的
- 查找引用，对于模块化的项目，我们可以很简单的看到这个模块都被谁引用了
- 重构，重命名变量或者文件名称时候会查找引用并且同步修改
- 准确快速跳转方法/组件定义位置
- 版本控制工具，使用UI的形式操作git，不管是diff、merge都是很友好，尤其是merge的时候，可以智能合并大部分的冲突，当然你也可以使用命令行操作
- 设置同步（仅仅正版支持），登录账号，多个设备之间设置会自动同步并处理好操作系统的差异
- upsource集成更加简单，操作方便
- 本地历史功能，这个功能太优秀了，即使脑子抽了删了些代码，通过它也能找到
- 其他需要大家去探索了
2、vscode - 免费
VS Code
vscode是微软开源的一个工具，目前也很火，插件比较丰富，启动快，比较轻量，也受了很多开发者的青睐，有很多人为之编写插件。
vscode完全免费，还有很多的插件支持，微软收购github以后，vscode对github也做了很大的适配，包括设置同步，github代码管理，甚至在github网站也支持了vscode在线版本的部署；
但是因为小呢，可能有些方面需要安装插件支持，不能像webstorm的开箱即用，普通的开发还是够用了，比较吸引人的有下面的一些特性：
- typescript支持很好，因为typescript也是微软开发的
- 插件丰富，中文支持很完美
- 支持远程开发，可以借助remote develop插件，可以通过ssh修改服务器上的代码
- 通过安装对应开发语言的插件，提示比较准确
- 设置同步，可以使用Microsoft或者GitHub账户
开发周边工具
1、图片压缩tinypng - 免费
tinypng是一款优秀的图片压缩工具，支持浏览器上直接使用，也可以下载客户端使用。
支持批量压缩图片，仅支持webp/png/jpeg，压缩率基本都在60%以上，如果压缩少量的图片可以使用客户端去压缩，客户端都是第三方开发的，所以我们先要申请APIkey，每个APIkey每月的使用量是500张图片，开发使用基本上够了，不够的话可以申请多个使用；
个人推荐使用下面的这个客户端，有下面的优点：
TinyPNG4Mac
- 批量压缩
- 替换原图（设置按钮下面有一个勾选）
- 页面简洁操作方便
当然我们也可以将tinyPNG集成到我们的IDE上，在vac ode和webstorm上都有对应的插件，只需要申请APIkey就可以在IDE中操作压缩，也很方便。
2、切图工具PxCook - 免费
PxCook
对于PS切图量像素，量字体比较多的朋友可以试试，上图右侧可以直接生成代码，量尺寸间距都很好用，因为PS对电脑要求也比较高，一直开着也比较浪费内存，所以一般都会将图片切出来，关闭PS，然后开发的时候尺寸等直接用pxcook去量取。
这个工具也是免费的，目前支持windows/mac平台。
3、抓包charles - 收费/可以免费
Charles
在做移动端开发的时候，避免不了的要去抓包，因为在浏览器的模拟器里面不能覆盖所有的场景，有些我们要在App中去调试，抓请求、抓链接、网络模拟都离不开抓包工具，虽然市面上的抓包工具比较多，但是个人推荐charles，UI比较简洁，功能强大。
关于HTTPS抓包，可以在知乎上搜索相关文章，这里就不多介绍了
4、切换网络switchHosts - 免费
看名字就知道是切换hosts的工具，对于要反复切换网络环境的朋友比较实用，调试代码的时候，有时候我们要切换不同的网络进行调试，我们通过控制上面的开关使用不同的hosts配置，Windows我们需要使用管理员运行。
SwitchHosts目前有下面的特性：
- 多个hosts配置合并
- hosts分组，组内只能选一个（对于相同项目切换不同的环境很友好）
- 支持配置导入导出
- 支持远程配置（可以对团队指定统一的配置进行维护）
- 开源/跨平台
5、图床uPic - 免费
在写文章的时候，我们不免有在文中插入图片的需求，尤其是写markdown的朋友，图片的存储就是问题，我们一般会将图片转成一个url链接，然后插入文章而不是将文件存储在本地文件夹中进行引用，否则移动图片位置后我们的文章图就挂了。
这是我使用过的最好的图床工具，在Mac虽然有iPic，但是高级功能需要收费，uPic完全开源免费，支持的图床也很多，但是仅支持Mac平台。
目前支持的图床有：smms,UPYUN USS,qiniu KODO,Aliyun OSS,TencentCloud COS,BaiduCloud BOS,Weibo,Github,Gitee,Amazon S3,Imgur,custom upload api, ...
支持以下丰富的功能：
- Mac访达扩展，直接右键上传
- 支持剪切板上传，一般都是微信等截图后直接上传
- 文件上传直接将url复制到剪切板
- 支持多文件上传，会将上传成功的所有链接复制到剪切板
- 支持不限于图片的文件，可以是js/html/mp4等
以上是个人使用的一些工具，如果大家还有很实用的工具，也欢迎在评论区留言。 |
|
