一個優秀前端的工具素養

做者介紹

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 站三連了）哈哈，若是後續有時間的話，我再和你們一塊兒分享一下我是如何作信息管理和知識管理的，但願可以給你們帶來一些真正幫助。