一个优秀前端的工具素养

做者介绍

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

💎 前言

工欲善其事必先利其器。

👆 这句话，想然你们道理都懂 ~

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

须要注意的是：我这里主要以 Mac Apple 生态做为基调，但我相信工具和效率提高的思想是不变的，Win 下也有具体的工具能够替代，因此 Win 的同窗也能够认真找一找，评论回复一下 Win 下的替代方案吧 🙏🏻

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

因此准备好了么？Here we go ~

🛠 前端工做中的那些工具

在开始聊前端的主流工具以前，先强调一下做为的 Coder，熟练，及其熟练，飞通常熟练快捷键的重要性！

成为快捷键爱好者

使用工具软件的时候，我都是下意识地要求本身记住至少 Top 20 操做的「快捷键」。虽然不至于要求必定要成为 vim 编辑者这种级别的「纯金键盘侠」，但至少对 VSCode 主流快捷键要造成「肌肉记忆」。这就问你们一个问题，若是可以回答上，说明你们对 VSCode 快捷键掌握仍是不错的 ~ 来：

问：VSCode 中 RenameSymbol 的快捷键是什么？（P.S. 若 Rename Symbol 都不知道是什么做用的话，去打板子吧 😄）

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

捷键没有速成之法，仍是在不断重复练习，因此 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。

---

扩展阅读：

• VSCode 插件推荐：B 乎上有不少这类文章，你们自取。
• 编写 VSCode 插件指南：知其然，知其因此然，我以前写过一个 VSCode Plugin，对 VSCode 的架构略知一二，感受很 NX。

用好 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 站三连了）哈哈，若是后续有时间的话，我再和你们一块儿分享一下我是如何作信息管理和知识管理的，但愿可以给你们带来一些真正帮助。