換新Mac?! 一起來設定前端工程師、開發者必裝的新環境吧

Photo by Christopher Gower on Unsplash

設定 Mac

1. 三指拖移 https://support.apple.com/zh-tw/HT204609
2. Dock Magnification https://www.youtube.com/watch?v=n8U_1AjAipg
3. 其他可以閱讀底下的參考資料

安裝 Homebrew

Mac 有名的套件管理工具

1.開啟終端機 ( Terminal ) 輸入以下指令

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2.安裝 htop (optional, 系統資源即時監控工具)

brew install htop # 安裝 htop
htop # 執行 htop

安裝 iTerm2

取代原生的終端機，更漂亮的介面、更酷炫的功能

有很多種安裝方式，用指令安裝、用Homebrew安裝、去官網下載安裝，我們這次使用後者，去官網下載安裝。

iTerm2 - macOS Terminal Replacement

iTerm2 快捷鍵設定(optional)

如果想要設定跟 Mac 鍵盤配置一致的游標跳字、跳行)

可參考
1. Jump word ( ⌥ ← )
Use ⌥ ← and ⌥→ to jump forwards / backwards words in iTerm 2, on OS X

2. Delete word / line (⌥⌫ and ⌘⌫)
Word/Line deletion and navigation shortcuts in iTerm2

接著，我們就可以關閉 Mac 原生的終端機 ( Terminal )，快樂的使用 iTerm2 !

安裝 oh my zsh

zsh — 一款可用作互動式登錄的shell及指令碼編寫的命令直譯器。
oh my zsh — 協作管理 zsh config 的好工具

開啟 iTerm2 輸入以下指令

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
echo $SHELL # 檢查預設 shell 是否已更換為 zsh 
# 若不是的話，則需要透過 chsh -s /bin/zsh
# 或 GUI 的 system preference 更換
# 並且 重新啟動 iTerm2  (見參考資料)

3 個好用的 zsh plugin (Optional)

zsh-autosuggestions, zsh-syntax-highlighting, zsh-z
自動建議、語法高亮、快速導向

git clone https://github.com/agkozak/zsh-z $ZSH_CUSTOM/plugins/zsh-z  
git clone https://github.com/zsh-users/zsh-autosuggestions ~/.zsh/zsh-autosuggestions  
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

下載完後，將其加入 zsh configuration file

vim ~/.zshrc 
# 按 i 開始編輯
# 到接近檔案底部，加入三個套件
plugins=(git zsh-z zsh-autosuggestions zsh-syntax-highlighting) 
# 按 Esc
# 輸入:wq 存檔離開
# 重新啟動 iTerm2

如果對 Terminal 的主題、視覺樣式有特別偏好的話，也可以在.zshrc 的theme 設定主題（可參考以下官網提供的主題）！

ohmyzsh/ohmyzsh

安裝 NVM

身為前端工程師，除了在瀏覽器跟 JavaScript 好好相處外，也需要本地 JavaScript 執行環境，我們需要 Node.js；而 NVM (Node Version Manager) 則讓我們能很容易的切換、管理不同版本的 Node.js

接下來就來裝 nvm 吧！

Node.js 是能夠在伺服器端運行 JavaScript 的開放原始碼、跨平台 JavaScript 執行環境 by wikipedia (https://zh.wikipedia.org/wiki/Node.js)

NVM for Windows ( 給微軟使用者的 nvm )
https://github.com/coreybutler/nvm-windows#why-another-version-manager

# 下載安裝 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash  
command -v nvm  
# 確認 nvm 有安裝成功，以及現在是哪個 nvm版本
nvm --version
# 安裝 node 長期支援版本
nvm install --lts 
# 確認 node 有安裝成功，以及現在是哪個 node 版本
node -v
npm -v # 新版 node 下載後通常都有包含npm了 
npx -v # npm 5.2.0 版本之後，就有預設安裝 npx了

安裝 yarn (非必裝)

Facebook 推出想要解決 npm 下載、安裝緩慢的問題
yarn 快取所有下載的套件，使得它從不需再次下載。它同時利用平行化處理使得資源的使用最大化，所以安裝時間比以往更加快速。

curl -o- -L https://yarnpkg.com/install.sh | bash
# 確認 yarn 有安裝成功，以及現在是哪個 yarn 版本
yarn -v

參考資料

How to Set Up Your MacBook for Web Development in 2020

Mac終端機 (Terminal)設定： iTerm 2

How can I set oh my zsh to be my default shell?

如果這篇文章對你有幫助，請幫我拍手一下
你的拍手及分享是對我最大鼓勵與書寫下篇文章的動力！

1下 閱。
5–10下 你認為這篇文章還不錯。
11–20下 你認為這篇貼文對你很有幫助。
21–40下 你非常喜歡這篇貼文，覺得實用。
40–50下 希望我可以多分享關於前端、軟體工程相關的文章。