阅读 5086

一个优秀前端的工具素养

作者介绍

Arno(青楠),专有钉钉前端成员,工具和效率的狂热追求者 🤩,目前负责专有钉钉协同产品体系的前端研发。

💎 前言

工欲善其事必先利其器。

👆 这句话,想然大家道理都懂 ~

但最近在暑期实习的日子里,我特意留心观察了一下身边的实习生同学使用工具的习惯。我发现自己在大学认为高效率的工作模式,他们无论在意识层面还是在使用层面上对工具的掌握都有些蹩脚。特别是有部分同学 Mac 也没有怎么接触过,算是效率领域的门外汉了。所以本着做个负责的好师兄的态度,我将自己对工具使用的经验,分享给大家。也算是抛砖引玉,和大家一起聊聊有哪些 NB 又和好玩的工具。

需要注意的是:我这里主要以 Mac Apple 生态作为基调,但我相信工具和效率提升的思想是不变的,Win 下也有具体的工具可以替代,所以 Win 的同学也可以认真找一找,评论回复一下 Win 下的替代方案吧 🙏🏻

当然,👇 的工具,我没有办法在这种汇总类的文章里面讲透彻,所以都「点到为止」,给了相关扩展阅读的文章,所以感兴趣的话大家再外链出去研究一番,或者自行 Google 社区的优质资源 ~

所以准备好了么?Here we go ~

image.png

🛠 前端工作中的那些工具

在开始聊前端的主流工具之前,先强调一下作为的 Coder,熟练,及其熟练,飞一般熟练快捷键的重要性!

成为快捷键爱好者

使用工具软件的时候,我都是下意识地要求自己记住至少 Top 20 操作的「快捷键」。虽然不至于要求一定要成为 vim 编辑者这种级别的「纯金键盘侠」,但至少对 VSCode 主流快捷键要形成「肌肉记忆」。这就问大家一个问题,如果能够回答上,说明大家对 VSCode 快捷键掌握还是不错的 ~ 来:

问:VSCode 中 RenameSymbol 的快捷键是什么?(P.S. 若 Rename Symbol 都不知道是什么作用的话,去打板子吧 😄)

image.png

如果回答不上,那请加油了,相信我,快捷键每次操作都可以节省你至少 1s 的时间,想一想,有多划算吧 ~ 当然在这里给大家推荐一个查询 Mac 下面应用对「快捷键」注册的工具 —— CheatSheet,长按 Command 键可以激活当前使用 App 的快捷键菜单。like this 👇

image.png

捷键没有速成之法,还是在不断重复练习,所以 KEEP ON DOING THAT

成为 VSCode Professional

工具,也有时髦之说,自从 Typescript 开始泛滥之后,VSCode 确乎成为了主流的前端开发工具。但我发很多同学对 VSCode 的使用上还是处于一种入门水准,没有真正发挥好这个工具的强大之处 ~ 所以也在和大家一起聊一聊。我不打算写一篇 Bible 级别的 VSCode 指南,只是通过几个小 Case 告诉大家 VSCode 有很多有趣的点可以使用以极大程度上提升效率,尤其是 VSCode Extensions(插件)。

  1. 你知道 VSCode 是可以云同步配置的功能,且可以一键同步其它设备么?
  2. 你知道 VSCode 有一个可以自动给 Typescript 的 import 排序并自动清除无效依赖的插件么?
  3. 你知道 VSCode 可以使用快捷键自动折叠代码层数么?
  4. 你知道如何快速返回到上一个编辑或者浏览过的文件吗?

如果都知道,那还不错 👍,如果听都没听说过,那我给大家几个建议:

  • 把 VSCode 的快捷键列表看一遍,摘出来自己觉得可以将来提升自己编码效率的,反复执行,直到形成肌肉记忆。
  • 把 VSCode 安装量和受欢迎度 Top200 的插件,浏览一遍,看看简介,安装自己感兴趣的插件。 👈 来一场探索宝藏的游戏吧,少读一些推荐文章,多动手自己捣鼓,找到好工具!

  • 最后把 VSCode 上一个绝美的皮肤和字体,按照我的审美,这就是我要的「滑板鞋」 ~ btw,主题是 OneDarkPro 字体是:FiraCode


扩展阅读:

用好 Terminal

作为一个工程师,不要求你成为 Shell 大师,但 Terminal 里面的常用命令以及日常美化优化还是必须要做的。这里给大家推荐 iTerm + OhMyZsh 的模式,打造一个稳定好用的 Terminal。

  • 下载 iTerm 安装(你用 VSCode 的也行,但我还是推荐独立终端 App,因为 VSCode 这货有时候会假死,然后把 iTerm 一下整没了,所以还是术业有专攻才行 🙈),有了这货,分屏幕上 👇 就是常规操作了。

  • 下载 OhMyZsh 安装,更新最新的 Git 目录,把主流插件都 down 下来,装好后秒变彩色,再安装对应的主题,不要太开心。

  • 按照个人兴趣「调教」OhMyZsh,强烈建议在 ~/.zshrc 启动这些插件:谁用谁知道 ~ 😄 随便说一个功能都好用到不行,这里就不啰嗦了,有其它好用插件的同学,欢迎盖楼分享一下。

plugins=(git osx wd autojump zsh-autosuggestions copyfile history last-working-dir)
复制代码

比如:Git 这个插件就可以将复杂的 git 命令 git checkout -b 'xxx' 简化为:gcb 'xxx'

比如:OSX 插件可以帮我们快速打开 Finder 等等操作。

...


扩展阅读:

  • Shell 编程入门:手撸脚本,提升效率 ✍🏻

  • OhMyZsh 插件集:看那些花里胡哨的 shell 插件们,来,拉出来都晒一晒 🌞

  • Vim 快捷键 CheatSheet:在手撸服务器时代,Vim 是神器,现在看来依旧值得传火 🧎‍♂️ 大神收下我的膝盖

用好 Chrome DebugTool

作为一个前端我就不赘述这个的重要性了。强烈建议大家把官方文档撸一遍,你会有很多新知的。

developer.chrome.com/docs/devtoo…

👆 这个可以写一本书,但是我还是建议大家用好这个工具,这是我们前端最重要的调试器了,我经常在面试同学的时候会问关于他们如何使用调试器解决问题的。其实看大家调试代码的过程就知道这个同学的编程水准,真的,大家可以有意识的看看自己是怎么去调试和排查问题的,效率高么?有没有提升空间。

  • 比如:如何排查一个项目的渲染卡顿点?
  • 比如:如何排查内存泄露?
  • 比如:如何全局搜索查找重复的代码?

用好 ChromeExtensions

浏览器插件,我就不多说了。我在此罗列一下我日常使用的 Chrome 插件,也欢迎各路神仙补充自己的浏览器插件和那些骚操作。重点说一下 For 开发者的:

  • JSONFormatter:对于日常直接请求的 JSON 数据格式化

  • XSwitch:我前 TL 手撸的浏览器网络请求代理工具,帮他打个广告 😛

  • ReactDeveloerTools 👈 这个就不多解释了,强烈建议大家打开 HighlightRerender 功能,看看自己的代码写得多烂,多多批判一下自己 🙈

对于 Chrome Extension 这种「神文」比较多,像油猴、AdBlock、视频下载啥的之类的工具我就不在这里提了,懂的人都懂,不懂的人自己 Google。我这里再推荐几篇文章,大家按需阅读吧:

  • Chrome 前端插件推荐:B 乎上这个 问题和 回答 比较中肯
  • Chrome 通用插件推荐:B 乎继续 推荐,看看高赞回答下的「集体智慧」吧 😁

🔍 搜索!搜索!!搜索!!!

呼,终于聊完了开发用的工具,那接下来我们来聊一下搜索。按照我的理解,我一直把数字化时代个人信息管理的效率分成三个基础段位:

  • 入门级:很少整理自己的磁盘和桌面,典型特征就是桌面什么奇葩的命名文件都堆在一起
  • 新手级:开始有意识整理了,文件分级分层,重视文件命名,建立标签等机制
  • 熟练级:开始有意识建立数据库索引,在 OS 层面做文件索引,有数据意识
  • 大师级:开始关注数据,将个人数据,集体数据融入日常,甚至开始使用非结构化的数据来辅助自己做事情

扪心自问,你在哪一个 Level 呢?

Spotlight

第一第二级,我就不了了,这里我重点和大家分享一下达到第三级的索引和搜索工具。要知道在 Mac 下 Spotlight 一直都是一个全局搜索工具,用好 Spotlight,就可以无缝解锁系统级别的搜索,主要的 Apps、文件、日历 ... 都可以搜索。

Alfred

但系统自带的,往往都不是最强的是吧?所以在 Spotlight 系统级的 metadata (Mac 会自建文件索引库并开放 API 给上层应用调用)的基础上,诞生了一个很强的工具 Alfred。我一直是 Alfred 的资深粉丝 + 用户,每天使用 Alfred 的功能(搜索)高达 70 次。👇 图为证:

Alfred 是一个「真正意义上的效率工具」,其主要的功能:

  • 文档检索
  • 快捷 URL 拼接
  • 剪切板历史快速访问 & 搜索
  • BookMark 搜索
  • 自定义工作流(下一个章节重点聊一聊这个)
  • ...(功能无敌)

强烈建议不知道 Alfred 是啥的同学,读一下 👇 这篇文章,这篇文章是我在入职阿里第一年内网写的一篇介绍 Alfred 的文章,如果有收获,还请给我点个赞了 👍

此处为语雀内容卡片,点击链接查看:www.yuque.com/surfacew/fe…

🚌 自动化的魅力

「自动化」一定是一种程序工作者应该深深植入自己「脑海里」的思考模式。但凡遇到重复的流程,我们是不是都应该尝试着问自己,这么费时间的流程,频次有多少,是否值得我们使用工具去自动化?

如今,靠做自动化上市的公司也有了,所以这里重点想和大家一起聊一聊个人如何把身边的自动化做到极致。这里重点讲三个工具:Alfred Workflow、Apple 捷径、IFFTT。

AlfredWorkflow

主打 Mac 上的自动化流程。通过 👇 这种可视化编程的思路,创建一种动作流。比如我想实现通过 Cmd + Alt + B 搜索 Chrome 书签 🔖。社区的小伙伴们就已经帮我们实现了一套工作流。我们可以直接在 Alfred 的社区 Packtal 等论坛去下载已经实现的 Workflow 去实现这些日常生活中的小自动化流程。

再比如上面的:

  • ChromeHistory:搜索 Chrome 历史记录(在 Alfred 搜索中)

  • GithubRepos:浏览搜索自己的 GithubRepo

  • Colors:快速转换前端颜色(前端同学一定知道为什么这个常用)🙈

  • ... 等等等等

我们也可以定义自己的工作流来自动化一些流程,我用自身的一个 Case 来说,我会定义很多快捷键来绑定我自己的日常操作。比如:

  • Cmd + Alt + D:打开钉钉

  • Alfred 输入 weather:查询天气

  • Alfred 输入 calendar:打开百度日历(不为别的,看放假日历 😄)

  • codereview:进入集团 CR 的工作台

  • ...

浑然一体,非常好玩,可以大量定制自己的工作流程。我之前写过一篇文章有关联到 Workflow 的部分,感兴趣的可以 一读

AppleShortcuts

主打手机上的自动化流程。(iPhone)

它提供了近乎 0 代码的流程编排,让我们可以访问 App 以及一些操作系统的 API,从而实现类似 👆 Alfred 的功能编排,是不是也很强。比如我们想要实现一个从剪切板里面读取内容并打开网页的功能,只需要下面增加两个简单的编程动作(真 0 代码)就可以实现自定义流程的实现。

Apple 捷径提供的 API 示意:

可以看到的是,Apple 这些大厂一直在思考真正意义上的让编码平易近人,让普通的小白用户也可以低成本地定义自己的工作流程。Shortcuts 的玩法有很多,在这里就不细细展开了,给大家足够多探索的可能性。

IFFTT

🔗:ifttt.com/home

三方中立的自动化流程提供商。这个工具跨平台多端支持,我用的相对偏少,但可以解决我部分跨平台的流程问题,这块大家自行探索吧 ~

聪明的人,一定会用「自动化」的思维解决问题,所以用好自动化的工具的重要性我相信大家应该明白了。

💻 突破次元壁の工具

最后,再和大家聊一聊非软件的「工具」吧。我还是觉得大家作为 Coder,还是要在自己的装备上多花点盘缠,就像 Kevin 老师用了戴森吹风机就比普通发型师厉害一样。

  • 自己的 主力机,一定是要性能杠杠的,经济允许的情况下,前端我还是力挺 Mac(高配) 和 Apple 生态 ~
  • 给自己 一块 4K 屏(最好放公司),看着心情都会变好,如果财力雄厚,搞一块 Apple 的 PRO DISPLAY XDR,就给跪了。

  • 使用 iPad & ApplePencil 尝试着数字笔记的艺术,涂涂画画,发现灵感,整理思维。

  • 自动升降桌 & 人体工程学椅:对身体,脊椎好一点 🙂 就坐屁股变大,变胖,是不争的事实 😿

  • HHKB 键盘 ⌨️,最近用了一段时间,适应布局之后,觉得打字都变快了 ... 可能是金钱的力量让代码翘起来都更顺心了呢 🎶(开个玩笑)

  • ...

🎓 结语

当然,👆 的工具只是大千世界中,集体智慧凝练的工具的冰山一角。

这些工具提升效率创造的增益往往初步看很小,但是大家一定要知道,这种增益会随着时间积累而放大,做一个简单的计算,一天你因为工具里面的 100 次效率优化,每一次即便是优化 5s,一年下来,节省的时间(Alfred 可以直接计算时间):

是不是令人震惊地高达 50 个小时,活生生的 2 天 啊!!!受限于篇幅,如果大家觉得对这篇文章对自己有帮助的话,欢迎点赞收藏转载(怎么变成了 B 站三连了)哈哈,如果后续有时间的话,我再和大家一起分享一下我是如何做信息管理和知识管理的,希望能够给大家带来一些真正帮助。

文章分类
前端