前语

工欲善其事必先利其器。

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

但最近在暑期实习的日子里，我特意留心调查了一下身边的实习生同学运用东西的习惯。我发现自己在大学认为高功率的作业形式，他们不管在意识层面仍是在运用层面上对东西的把握都有些蹩脚。特别是有部分同学 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 能够运用方便键主动折叠代码层数么？

假如都知道，那还不错 ，假如听都没听说过，那我给咱们几个主张：

  • 把 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 DevTools

作为一个前端我就不赘述这个的重要性了。强烈主张咱们把官方文档撸一遍，你会有许多新知的。

developer.chrome.com/docs/devtoo…

这个能够写一本书，可是我仍是主张咱们用好这个东西，这是咱们前端最重要的调试器了，我经常在面试同学的时分会问关于他们怎么运用调试器处理问题的。其实看咱们调试代码的进程就知道这个同学的编程水准，真的，咱们能够有意识的看看自己是怎么去调试和排查问题的，功率高么？有没有提高空间。

  • 比方：怎么排查一个项目的烘托卡顿点？
  • 比方：怎么排查内存泄露？
  • 比方：怎么大局查找查找重复的代码？

用好 Chrome Extensions

阅览器插件，我就不多说了。我在此罗列一下我日常运用的 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 站三连了）哈哈，假如后续有时刻的话，我再和咱们一同共享一下我是怎么做信息办理和常识办理的，期望能够给咱们带来一些真实协助。

检查原文链接