開發效率提高之工具篇

時間 2019-11-16

標籤開發效率提高工具简体版

原文原文鏈接

關於

個人博客：louis blog
SF專欄：路易斯前端深度課
原文連接：開發效率提高之工具篇

導讀

工欲善其事必先利其器!html

還記得: 剛參加工做的時候, 有位開發的同事軟件使用效率奇高. 我曾親眼目擊他在幾秒以內打開開發軟件, 優雅地調出隱藏的功能, 輸入數據輸出結果的過程行雲流水, 一鼓作氣, 而手指卻始終未曾離開鍵盤. 吃驚的同時, 不只發現提升開發效率是多麼的重要! 這便有了本篇文字.前端

本文側重開發且兼顧PM同窗, 工具分享會涉及到:react

PM或博客撰寫者markdown編輯器推薦
mac重度依賴者應用推薦
終端便捷工具推薦
Chrome Extension及擴展插件開發
Alfred workflow 自制及開源的推薦

隨時記下閃現的靈感

人的一天中大腦會產生大約6萬個想法, 其中不乏有許多優秀的 idea. 若是咱們能學會捕捉哪怕是部分靈感, 也將會收穫巨大. 所以工做中須要及時地記下閃現的靈感, 以方便閒暇時溫故而知新. 這裏推薦兩個筆記應用: ① Evernote ② OneNote . (注: Evernote速記快捷鍵Control+Command+N)git

Markdown編輯器

目前可供選擇的markdown編輯器至少如下有六種:github

Typora, 簡潔輕便免費, 獨有的所見即所得, 可在預覽狀態下編輯, 快捷鍵豐富, 腳本高亮功能出彩, 導出爲pdf後, 排版一樣正常, 這點很是可貴, 筆者使用的就是該款.
Ulysses, 功能強大, 快捷鍵豐富, 支持目錄導入, 支持多終端同步.
MWeb Lite, MWeb的微型版, 不收費, 支持目錄導入.
macdown, 基於mou開發, 輕量, 不支持目錄導入.
mou 歷史悠久, 聽說有少許的bug, 具體請參考 Mac 下兩款 Markdown 編輯器 Mou/MacDown 大 PK - 簡書 .
markeditor, 新出的markdown編輯器, 注重視覺感覺, 界面不錯, 但運行較慢.

以上, 推薦開發使用 Typora, PM等使用 Ulysses.web

Mac重度依賴者

開發工具

Charles 網絡封包分析應用, mac必備.
aText 輸入加強應用, 比 TextExpander 要人性化許多，而且對中文和第三方輸入法的支持都要更好.
Dash mac上api集合應用, 幾乎包含各類語言的api文檔.
SnippetsLab 優秀的代碼片斷管理工具, 輕量, 可基於菜單欄操做.

提升效率

Alfred 3 神奇的魔法帽, 支持 ① 快速打開application; ② 支持Finder, Calculator, Contacts, Clipboard, iTunes, System, Terminal 等原生應用的各類便捷功能; ③ 支持workflow(工做流).
iterm2 加強版的終端應用, 功能強大, 支持分屏, 歷史記錄, 選中即複製等.
Sip 全屏取色應用, 支持快捷鍵調出(前端福音, 尋找多年, 終於發掘出來了).
Keka 壓縮或解壓縮應用, 開源免費, 壓縮比高, 操做便捷, 支持rar等解壓, 壓縮中文目錄後, 在windows下打開不會存在亂碼等現象.
SwitchHosts 域名host解析必備神器, 支持 windows和Mac的開源工具, mac下只有幾百K大小.
Scroll Reverser mac滾動方向自定義應用, 可分別設置鼠標和觸摸板的上下左右的滾動效果.
Size up 分屏應用, 相似Moon的一款應用, 支持上下左右居中、4個角落快速分屏及多屏幕切換.
Divvy 另外一款分屏應用, 可將屏幕分紅多宮格的形式, 而後爲每一個格子定義快捷鍵, 遺憾的是不支持多屏幕切換.
Graphviz 貝爾實驗室開發的有向圖/無向圖自動佈局應用, 支持dot腳本繪製結構圖, 流程圖等. 可參考教程利用Graphviz 畫結構圖及使用graphviz繪製流程圖 .
XMind 思惟導圖應用, 適合業務及思路梳理.
iThoughtsX 另外一款思惟導圖應用, 更加簡潔和輕量.
Pomodoro One 番茄工做法的一款應用.

博主必備

ScreenFlow 這或許是mac上最好用的屏幕錄製應用.
Annotate 屏幕截圖批註應用, 使人驚喜的是, 支持劃區域gif製做, 教程以及動圖製做者必備.
Licecap mac上超強大的且極簡的gif錄製應用, 使用免費, 支持FPS幀率調整且無錄製時間限制(筆者用它錄製了不少gif動圖).

Mac定製化

Bartender 2 菜單欄管理應用, 支持隱藏全部菜單欄圖標, 還您一個乾淨的菜單欄.
CDock 任務欄定製應用, 可設置Dock全透明, 還您一個清爽的任務欄.
TextBar 自定義菜單欄輸出, 支持script運行, 支持H5渲染.
Growl 自定義通知樣式, 支持多種主題以及顏色, 大小, 漸隱時間等各項參數的自定義.
Karabiner 鍵盤映射修改神器.
Keyboard Maestro 鍵盤大師, mac下功能最爲豐富的鍵盤加強應用.
BetterTouchTool mac觸摸板加強神器.
Übersicht 華麗的桌面自定義應用, 相似於windows的 rainmeter. 支持H5.
Today Scripts 個性化通知欄插件, 支持bash腳本(最新的OSX系統不支持).
Mountain Tweaks mac隱藏功能開啓應用.

折騰黨玩轉Mac

TripMode 移動熱點流量管家, 出差達人的福音.
Caffeine 點亮mac, 避免長時間演示ppt而進入到休眠狀態.
Tickeys 鍵盤打字風格模擬應用, 支持 Cherry軸等多種風格.
keycue 快捷鍵輔助應用, 幫助記憶快捷鍵.
AirServer IOS鏈接mac必備.
Beyond Compare 文件比較應用, 支持文件, 目錄, FTP遠程地址比較等.
Debookee 網絡抓包及數據分析應用.
EasyFind 小而強大的文件搜索應用, 媲美windows下的Everything.
FileZilla 免費開源的FTP應用.
OmniDiskSweeper 硬盤空間掃描應用, 幫助mac減肥.
Kaleidoscope 文件和圖像比較應用, 支持圖片比較, 能與 git, svn 等版本控制工具完美結合.
AppCleaner mac應用卸載工具, 結合 AppCleaner 的workflow, 使用效果更佳.
TeamViewer 遠程開發或協助必備應用.
Script Debugger 強大的AppleScript編輯器.
Reeder 界面優美的RSS訂閱應用.
HyperSwitch 帶有預覽圖的快速切換, 做用同Command+Tab.
Cool retro term 終端變身復古顯示器.
Fruit Juice 電池管理應用, 幫助延遲電池的使用時間.

終端命令

ohmyzsh shell有不少種, 經常使用的bash就是之一. 而zsh是shell中目前最強大的, 沒有之一. ohmyzsh屏蔽了zsh複雜的配置, 真正達到了一鍵上手zsh的目的.chrome

# Mac下自動安裝&設置
wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh
# 設置 shell 默認使用 zsh
chsh -s /bin/zsh
#在 dock 欄右鍵退出終端, 而後重啓終端~安裝完成複製代碼

autojump 支持快速跳轉到曾經打開過的目錄下,安裝方法: brew install autojump .shell
tmux 終端複用工具, 支持在終端中建立不依賴於終端的窗口, 安裝方法: brew install tmux .json

Chrome Extension篇

前端有關

React Developer Tools React開發者工具.
Redux DevTools Redux開發者工具.
FE助手百度推出的前端助手, 具備不少便捷的小功能.
YSlow 雅虎性能分析工具.
Postman 接口調試工具, 幾乎支持全部類型的http(s)請求.
EditThisCookie cookie編輯工具, 可用於獲取或設置http only等cookie的值.
JSONView json預覽工具, 接口調試必備.
Page Ruler 頁面尺子, 頁面重構或者嚴格按照設計圖開發頁面時, 將會很是有用.
Alexa Traffic Rank 網站Alexa排名查看工具.

工做效率有關

OneTab 快速關閉並存儲瀏覽器當前窗口全部Tab頁, 可用於下次一鍵所有恢復.
Merge Windows 合併全部瀏覽器窗口爲同一個窗口.
Vimium 鍵盤黨必備, 使用vim命令管理頁面.
Vysor mac上直接操做 Android 手機, 且可遠程共享手機操做界面.

網站有關

Octotree Github重度依賴者必備, 提供左側邊欄, 快速瀏覽倉庫內容.
AdBlock 超強去廣告工具, 最受歡迎的Chrome擴展, 擁有超過4000萬用戶.
閱讀模式快速開啓閱讀模式, 進入沉浸式閱讀, 並不是支持全部網頁.
Blipshot 全網頁截圖工具, 支持自動垂直滾動, 截取網頁的全部內容爲一張圖片.

Chrome Extension開發

相關文章redux

Alfred workflow

我曾經耗費巨大的精力, 試圖在計算機的使用效率上找到一條優化的策略, 一直以來都收效甚微. 直到趕上Alfred, 它強大的工做流機制, 才讓我明白原來計算機能夠這麼玩. 由於它完全解決了輸入輸出的痛點, 極大的減小了程序之間的切換成本以及按鍵成本.

傳統意義上, 使用mac時, 爲了查詢一個單詞, 或者翻譯一個單詞, 咱們要麼經歷五步: ① 手動打開瀏覽器 ② 進入谷歌首頁 ③ 選中輸入框 ④ 輸入或粘貼查詢單詞, 而後空格並加上"翻譯" 兩個字, 而後再回車 ⑤ 等待瀏覽器展現查詢結果; 要麼經歷四步: ① 打開翻譯應用(好比自帶詞典) ② 輸入或粘貼查詢單詞 ③ 翻譯應用輸出查詢結果 ④ 查詢事後, 通常都須要Command+Q退出應用(不然Dock欄將會全是未關閉的應用).

查詢單詞這個場景中, 咱們至少須要興師動衆, 切換或打開一個應用兩次, 定位輸入框一次, 輸入或複製粘貼一次. 且查詢結果頁也會擋住當前的工做區, 使得咱們分心, 甚至忘記本身剛剛在作啥. 五個字 — 體驗不流暢.

而 Alfred 的工做流正是爲了解決這個問題而設計的. 若是咱們使用網友開發的 有道詞典 的 workflow, 最快只需經過兩次按鍵即可獲取單詞的查詢結果. 假如: 爲了查詢單詞"workflow", 我會選中單詞所在區域, 而後按住 Option+Y 鍵(我已將有道翻譯的快捷鍵設置爲 Option+Y), 單詞查詢結果就出來了, 並且不須要切換應用, 同時查詢結果也較少的擋住工做區了. 以下: