IT大前端

一个优秀前端的工具素养

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

但最近在暑期实习的日子里，我特意留心观察了一下身边的实习生同学使用工具的习惯。我发现自己在大学认为高效率的工作模式，他们无论在意识层面还是在使用层面上对工具的掌握都有些蹩脚。特别是有部分同学 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（插件）。

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

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

把 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 的文章，如果有收获，还请给我点个赞了 👍

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

🚌 自动化的魅力

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

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

AlfredWorkflow

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