一个优秀的前端开发的工具素养

June 12, 2022 (2y ago)

版本说明日期
v2部分内容更新，顺应时代的潮流2023-10-26
v1初版2022-06

💎 前言

工欲善其事必先利其器。

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

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

需要注意的是：我这里主要以 Mac Apple 生态作为基调，但我相信工具和效率提升的思想是不变的，Win 下也有具体的工具可以替代。后续有机会笔者也写一写如何调教家里那台玩游戏的主力 Win。

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

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

🛠 前端工作中的那些工具

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

成为快捷键爱好者

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

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

答：——————————

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

👑 Github Copilot

2023 的王者级别的工具存在。这里不赘述了，首要推荐 ~

  • Github Copilot
    • 支持 Copilot Chat，支持和你选中的代码、文件、工程，Chat 一番，就是一个内置的 mini ChatGPT
    • 支持代码各类提示、补全

笔者已经彻底离不开 Copilot 了，一天不用，浑身难受。Btw，如果你还在为它的费用而犹豫，那我告诉你，先试用一个月，这货写的代码带来的效率提升远超于它的费用，所以不要犹豫了，赶紧上车吧 ~ 实在不愿意花钱可以去社区找平替，现代编程没一个 AI 助手都不好意思说自己是个程序员了。

Github Copilot

成为 VSCode Professional

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

  1. 你知道 VSCode 是可以云同步配置的功能，且可以一键同步其它设备么？
  2. 你知道 VSCode 有一个可以自动给 Typescript 的 import 排序并自动清除无效依赖的插件么？
  3. 你知道 VSCode 可以使用快捷键自动折叠代码层数么？

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

  • 把 VSCode 的快捷键列表看一遍，摘出来自己觉得可以将来提升自己编码效率的，反复执行，直到形成肌肉记忆。
  • 把 VSCode 安装量和受欢迎度 Top200 的插件，浏览一遍，看看简介，安装自己感兴趣的插件。 👈 来一场探索宝藏的游戏吧，少读一些推荐文章，多动手自己捣鼓，找到好工具！
  • 最后把 VSCode 上一个绝美的皮肤和字体，按照我的审美，这就是我想要的效果 ~ btw，主题是 OneDarkPro 字体是：FiraCode。

扩展阅读：

这里笔者也推荐几款个人觉得特别有用的插件：

  • Pretty Typescript Error：看 ts 的错误信息，不再眼花缭乱，一目了然。
  • Code Spell Checker：代码拼写检查，不再担心写错单词，强烈建议身边的同事也都安装上[狗头]。
  • Document This: 一键生成 JSDoc 注释，不再为写注释而烦恼。
  • Github Copilot：这个不用多说了，强烈建议大家使用，不要再为写代码而烦恼。
  • JSON to TS: 一键将 JSON 转换为 TS 类型，不再为写类型而烦恼。
  • One Dark Pro: 一个好看的主题，个人常用。
  • Plant UML: 一个可以在 VSCode 中直接画 UML 图的插件，VSCode 里面直接写代码，就可以画出 UML 图，非常好用。
  • Todo Highlight: 一个可以在代码中直接标记 TODO 的插件。
  • Typescript Class Orgranizer: 强迫症的终极奥义。
  • WSL: windows 的开发者秒懂。

用好 Terminal

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

  • 下载 iTerm 安装（你用 VSCode 的也行，但我还是推荐独立终端 App，因为 VSCode 这货有时候会假死，然后把 iTerm 一下整没了，所以还是术业有专攻才行 🙈），有了这货，分屏幕上 👇 就是常规操作了。
    • 但 2023 时代更推荐一个创业产品 Warp，这款 Terminal 是面向未来的模式，有诸多优秀的功能，比如直接在 terminal 中区域选择编辑等等，把 terminal 搞得跟富文本编辑器一样，同时支持了一些 AI 驱动的功能，把 oh-my-zsh 的功能都集成进去了，也支持类似 Alfred 的风格调用，非常好用，强烈推。

Warp

  • 下载 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 是神器，现在看来依旧值得传火 🧎‍♂️ 大神收下我的膝盖
  • Warp Documentation Have a try ~

用好 Chrome DevTools

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

https://developer.chrome.com/docs/devtools/

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

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

用好 Chrome Extensions

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

  • JSONFormatter：对于日常直接请求的 JSON 数据格式化
  • XSwitch：我前 TL 手撸的浏览器网络请求代理工具，帮他打个广告 😛
  • ReactDeveloerTools 👈 这个就不多解释了，强烈建议大家打开 HighlightRerender 功能，看看自己的代码写得多烂，多多批判一下自己 🙈

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

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

🔍 搜索！搜索！！搜索！！！

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

  • 入门级：很少整理自己的磁盘和桌面，典型特征就是桌面什么奇葩的命名文件都堆在一起
  • 新手级：开始有意识整理了，文件分级分层，重视文件命名，建立标签等机制
  • 熟练级：开始有意识建立数据库索引，在 OS 层面做文件索引，有数据意识
  • 大师级：开始关注数据，将个人数据，集体数据，系统地融入日常，甚至开始使用非结构化的数据来辅助自己做事情，比如你是否可以直接访问对比各个公司的财报中 EPS 按照历年的变化趋势，来判断这个公司的盈利能力，甚至丢给 ChatGPT，这个就是大师级的思维了。

扪心自问，你在哪一个 Level 呢？

Spotlight

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

Alfred

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

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

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

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

Alfred 效率神器全攻略

Raycast

2023 年，Raycast 作为快捷搜索和效率工具领域的后起之秀，直接挑战了 Alfred 老牌工具的地位。笔者主要是 Alfred 的终生 pack 的购买者，所以没有深入研究过，可以网上找一找 Raycast 和 Alfred 的对比文章，看看哪个更适合自己。

平心而论，Raycast 的 UI 和交互确实比 Alfred 好看，但是 Alfred 的 Workflow 社区生态确实比 Raycast 强大，所以大家可以自行选择。

🚌 自动化的魅力

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

如今，靠做自动化上市的公司也有了，所以这里重点想和大家一起聊一聊个人如何把身边的自动化做到极致。这里重点讲三个工具：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

🔗：https://ifttt.com/home

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

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

Mac 下常用软件推荐

在软件的世界里，有很多软件都是可以跨平台的，所以这里我只推荐 Mac 下的常用软件，Windows 下的同学可以自行 Google 一下。

  • Microsoft Todo：考虑到笔者有 Win 电脑，GTD 工具我选择了微软的 Todo，这个工具的优点是跨平台，设计简单，满足核心诉求，微软同步服务也免费稳定，所以我一直在用。
  • iHosts: 一个管理 Hosts 的工具，可以快速切换 Hosts，方便我们在开发时候切换 Hosts，比如我们在开发时候需要切换到测试环境，就可以直接在这个工具里面切换，不用每次都去手动修改 Hosts 文件了。
  • Notion: 笔者有专门写文章介绍过这个工具，这里就不啰嗦了，有兴趣的可以去看看。Notion Tools for Future，宇宙级笔记 & 信息管理工具。
  • Infuse: NAS 上的视频播放器，可以直接在 NAS 上面播放视频，不用下载到本地，非常方便。
  • Moon: 多窗口管理工具，可以在 Mac 上面实现 Windows 的窗口管理效果。
  • Contexts: Cmd + Tab 的增强版，可以在 Mac 上面实现 Windows 的 Alt + Tab 的效果，可以快速切换到某个 App 的某个窗口。
  • SouceTree: Git 管理工具，可以在 Mac 上面管理 Git 仓库，可以直接在工具里面看到 Git 的提交记录。
  • Bartender: Mac 的 MenuBar 管理工具，可以把 MenuBar 里面的图标隐藏起来，可以让 MenuBar 更加简洁，高效。
  • Flow: 番茄 🍅 工作法，全局的番茄工作法管理工具，可以帮助我们更好的管理时间，防止久坐，养护身体。

💻 突破次元壁の工具

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

  • 自己的 主力机，一定是要性能杠杠的，经济允许的情况下，前端我还是力挺 Mac（高配） 和 Apple 生态 ~
  • 给自己 一块 4K 屏（最好放公司），看着心情都会变好，如果财力雄厚，搞一块 Apple 的 PRO DISPLAY XDR，就给跪了。
  • 使用 iPad & ApplePencil 尝试着数字笔记的艺术，涂涂画画，发现灵感，整理思维。
  • 自动升降桌 & 人体工程学椅：对身体，脊椎好一点 🙂 就坐屁股变大，变胖，是不争的事实 😿
  • HHKB 键盘 ⌨️，最近用了一段时间，适应布局之后，觉得打字都变快了 ... 可能是金钱的力量让代码翘起来都更顺心了呢 🎶（开个玩笑）
  • ...

🎓 结语

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

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

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


Arno Crafting Apps

ELABORATION STUDIO 🦄

Elaborate your ideas and solve your problems with AI in fully boosted context way ~