[Mac Setup] 讓你的開發速度大躍進的好工具們

施靜樺
13 min readApr 6, 2019

--

iTerm2, Oh My Zsh, Sublime Text

[2019/4/7 更新] zsh 的主題不用 spaceship 了,改用 common–推薦給像我一樣追求簡潔介面的使用者!

今天不講技術,來聊聊一些對於開發者們不可或缺的好資源,讓你寫程式又愉悅又有效率!經過了新手時期,不用再忙著祈禱剛剛敲出那一堆似懂非懂的指令會成功,或是擔心程式下一秒就會爆炸,就會開始有餘裕來找碴—漸漸看某些東西不順眼—並且想辦法優化,比如說一些常用但又很長的 terminal 指令(grep 我在說你)。做為一個優秀的工程師,能不冗就絕對不會冗,能用 0.1 秒就打完的指令絕對……會想辦法把它自動化完成。你說省下那 0.1 秒要做什麼?當然是拿來思索存在的本質還有人生的意義啊這還用說嗎。所以今天就來分享我一路走來覺得讓人生變得充實又完整的那些工具們,讓你寫程式有如神助而且還會看起來很厲害!

必須感謝同事 Leslie 的不間斷啟發(各種 vim 跟 terminal 的真人版 tip of the day)與主管彥廷的好榜樣(還有耐心地忍受我之前中古世紀的開發環境)。以下內容其實大部分是在進公司實習這一個多月來收集到的好東西。感恩再感恩。

分成幾個部分:

[STEP 0]

[STEP 1] iTerm2

[STEP 2] Zsh + Oh My Zsh

[STEP 2.1] AutoJump

[STEP 2.2] AutoSuggestions

[STEP 3] Sublime Text

([STEP 4] Vim)

本來有寫到 Vim 的,但是打著打著就發現事態不妙(篇幅越來越長),加上 Vim 有各種好插件必須娓娓道來,大概自己就能單獨成篇,所以就請它下篇再登場了。

開始之前

先介紹兩個集大成的網頁:Awesome MacMac OS Setup Guide。前者是各種你想得到跟想不到的工具大集合,第一次進去可能會有點迷失,要小心。後者是手把手帶你走過一些開發者常使用的設定,我今天要講的它裡面其實也都有講到,非常建議先去看看這個網站,等等會講到的也會有一部份是來自於它。

[STEP -1] Remap Your Keyboard like a Pro

如果你常常使用電腦指令,就會發現明明 Control 鍵如此常用,卻是放在鍵旁上一個很不符合人體工學的邊陲位置—每次要使用它,都要特別拐一下小拇指才能按到,這當然是不被允許的,所以請到 System Preferences → Keyboard → Modify Keys 把 Caps LockControl 的位置對調,你會發現人生突然豁然開朗。

[STEP 0] 下載 Homebrew

[網站] https://brew.sh/

[安裝方式]

# command line/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

如果你還沒有下載 Homebrew 的話,就是現在了。它是一個為 Mac 設計的套件管理工具(Package Manager),等等絕大部分的軟體都會用 homebrew 來下載。

準備好了,預備備——開始!

[STEP 1] iTerm2

[網站] https://www.iterm2.com/

[安裝方式]

brew cask install iterm2

Iterm2 取代 Mac 內建的 terminal,可以做到 terminal 可以做到的事情還有更多,比如說酷炫的 hotkey window (但功能還是有限制比如說在裡面開 vim 就不行)或是各種客製化配色—可以在 iterm2-color-scheme 這裡選一個自己看得最順眼的。我是用 Spacedust。

這邊強烈推薦去下載字型 IBM Plex Mono (14pt, Light)。前面介紹的 Mac Setup Guide 是推薦使用 Source Code Pro,可以兩個都下載來看看哪個自己比較喜歡(或是不講究的話其實也可以省略)。連結裡面都有在 Mac OS 裡面安裝的方式,裝到電腦之後到 iTerm2 → Preferences → Profile → Default → Text → Change Font 去設定。

[STEP 2] Zsh + Oh My Zsh

[安裝方式]

# Install Zsh
brew install zsh
# Make Zsh your default shell
sudo sh -c "echo $(which zsh) >> /etc/shells"
chsh -s $(which zsh)
# Install Oh My Zsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

[Oh My Zsh 網站] https://ohmyz.sh/

iTerm2 + Zsh + Oh My Zsh 是一個經典套餐。

Mac 預設的 shell 是 bash (Bourne Again Shell)。可想而知在它之前有一個 shell 叫做 Bourne Shell—說到這個就想岔開話題一下,你們知不知道一個常用的檔案格式 yaml (.yml) 的全名是什麼? Yet Another Markup Language。如此瀟灑。(注:Markup Language 叫做標記式語言–HTML 就是其中一種)至於後來他們又把自己改稱為 YAML Ain’t a Markup Language 就是另外一個故事了。

對於我(與其他許多開發者)而言,使用 Z Shell 的最大好處就是很容易客製化,而且有強大的 framework (像是 Oh My Zsh)讓你管理與設定非常方便。

裝完之後馬上可以看出差別,預設的主題 robbyrussell就已經很不錯了,主題區有超過一百種主題讓你自己挑,而換主題的方式簡單到只需要在 ~/.zshrc 中把

 ZSH_THEME="robbyrussell" # default

換成

ZSH_THEME="your-theme" 

就好了。

如果在裡面的都不喜歡,External Themes 這一區再大方加碼更多主題讓你挑,跟上面那區的差別只是這區的主題要用之前需要先下載(不在 default bundle 裡面)。

我原本用 spaceship,後來改用 common,兩個都介紹一下。

[spaceship]

它最大的好處是你可以自己決定 prompt 要呈現的內容、順序、連接詞/符號,同樣直接在 ~/.zshrc 裡面設定。

Spaceship 安裝方式:

# command line# 先把 repo 複製到資料夾
git clone https://github.com/denysdovhan/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt"
# 再 symlink
ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"

一些我自己在 .zshrc 裡面的相關設定

# PROMPT SETTINGS# Decide what are displayed in what order in the prompt.
SPACESHIP_PROMPT_ORDER=(
dir
git
)
# further tuning
SPACESHIP_TIME_SHOW=true
SPACESHIP_DIR_PREFIX=""
SPACESHIP_GIT_SUFFIX=""
SPACESHIP_GIT_SYMBOL=""
SPACESHIP_GIT_BRANCH_PREFIX=""
SPACESHIP_GIT_BRANCH_SUFFIX=" "
SPACESHIP_GIT_STATUS_SHOW=false

我的目標是乾淨整潔的 terminal,所以這邊我把很多 spaceship 預設會顯示在 prompt 裡面的項目都拿掉了,只剩下兩個我覺得最重要的,然後下面再接再厲修整(把更多東西去掉)讓顯示的項目更乾淨。結果長這樣:

interface of zsh theme “spaceship”

[common]

common 安裝方式

# command line
wget -O $ZSH_CUSTOM/themes/common.zsh-theme https://raw.githubusercontent.com/jackharrisonsherlock/common/master/common.zsh-theme

記得也要改指定主題 ZSH_THEME="common"

它不用什麼設定就跟我想要的差不多了,而且把 git 的資訊顯示在右邊:

interface of zsh theme “common”

這邊我自己有去修了一下原始碼,把 prompt 的字體改成粗體:

# $ZSH_CUSTOM/theme/common.zsh-theme:32common_current_dir() {
echo -n "%{%B%}" # set bold
echo -n "%{$fg[blue]%}%c "
echo -n "%{%b%}" # unset bold
}

我的 .zshrc 有上傳到 github,有興趣的可以自己去看。

[STEP 2.1] AutoJump

[網站] https://github.com/wting/autojump

[安裝方式]

# command line
brew install autojump
# in ~/.zshrc
[ -f /usr/local/etc/profile.d/autojump.sh ] && . /usr/local/etc/profile.d/autojump.sh

這也是一個 must-have––太方便了。裝了這個之後,從此你再也不會記得檔案的正確路徑XD 以前要進入一個資料夾,都要一層一層的 cd 過去,或是專門設一個環境變數來呼叫,裝了 Autojump 之後,你只要打

j [directory keyword] 

它就會去搜歷史紀錄,直接幫你比對找到那個你心中渴望卻懶得打出路徑的資料夾!

比如說我存放 jennycodes 網站專案的資料夾叫做 jennycodes (duh),絕對路徑是 ~/Developer/Rails/jennycodes:

autojump magic!

酷吧!

[STEP 2.2] AutoSuggestions

[網站] https://github.com/zsh-users/zsh-autosuggestions

[安裝方式]

# command line
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
# in ~/.zshrc
plugins=(zsh-autosuggestions)
# [optional] press 'Ctrl-k' to accept suggestion (default is ->)
bindkey '^k' autosuggest-accept

這也是另一個大大提升效率的小工具—同樣從你過往執行過的命令去猜你現在想要打出來的字串,非常聰明:

如果你看到它確實猜到你想打的東西,那就可以快樂地按下右方向鍵接受建議,或是更上一層樓像我一樣設定使用 Ctrl-k 來接受。(為什麼不用 ?因為 很遠啊)

[STEP 3] Sublime Text

[網站] https://www.sublimetext.com

[安裝方式] 直接點進網站下載

Sublime Text 是一個很強大的免費文字編輯器。一般現代編輯器的功能它都有,最近一版還整合了 Git,可以直接在編輯介面裡面操做 Git。除了必須定期關掉叫你買 pro 版的提示之外,使用者體驗非常良好。

基本上下載完就可以直接用了,但是很建議依照這篇文章的指示來讓你可以直接從 terminal 打開 sublime。而讓你的人生更加容易的小技巧是到你的 .zshrc 裡面加上這兩行指令:

alias sl='sublime'
alias sll='sublime .'

沒有意外的話,你會很常用到 sll,不客氣。

在 Sublime Text → Preferences → Settings 裡面可以調整一些預設值,貼出我調整的部分供參考

# Sublime Text Settings
{
"fallback_encoding": "BIG-5",
"font_size": 14,
"highlight_modified_tabs": true,
"ignored_packages":[], # default: ["Vintage"]
"tab_size": 2,
"translate_tabs_to_spaces": true
}

稍微解釋一下,第四行是「要忽略的套件」,原本預設是 [“Vintage”],那是一個讓你在 sublime text 中模擬 Vim (下一篇的主角!) 的套件。把 “ignored_packages” 的值變成空的意思就是把 Vintage Mode 打開,也就是把 Vim 模擬功能打開,這個等我們看完下一篇之後就知道為什麼要這樣做了。 “tab_size”: 2 則是把 tab 的字元數設定為 2 (預設是 4),因為開發 Ruby 習慣用 2;“translate_tabs_to_spaces”: true是把 tab 變成空白字元(而不是 tab),避免程式碼因為縮排方式不一致而出錯。

另外,sublime packages 裡面也可以找到很多很不錯的套件,像是經典的 html 產生器 Emmet 或是 Sublime Linter。Happy Hunting!

先這樣

寫這個實在是太有趣了,邊寫也順便自己重新整理了一次自己個人電腦的環境,下一篇要介紹的 Vim 更加有趣,敬請期待!

這篇會不定期更新,慢慢加入我未來將會發現的更多開發好資源,如果你有什麼你覺得值得分享的套件或是設定,歡迎來跟我說!分享讓世界更美好:)

--

--