iT邦幫忙

2021 iThome 鐵人賽

DAY 5
2
Modern Web

MacOS新手操作指令學習紀錄,成為裝B前端工程師之路系列 第 5

[Day5] MacOS - 打造美觀的終端機畫面

程式開發的過程很難不接觸到終端機操作,原生的畫面非常"簡約",透過套件強化後不只看的開心,也對各種資訊的辨識非常有幫助。
本篇文章的目標是讓終端機能有下圖這樣的繽紛效果,有興趣的話就可以跟著以下步驟完成!

圖片來自Powerlevel10k


安裝清單

  1. Homebrew:套件管理工具。
  2. iTerm2:取代原生終端機。
  3. oh-my-zsh:zsh設定管理工具。
  4. Nerd font:萬用字碼包,把 Powerline, Font Awesome 等都包進去了。
  5. Powerlevel10k:oh-my-zsh主題包。

Homebrew

剛轉換到 MacOS 的新手一定對軟體的安裝/移除這件事情感到很困惑,Homebrew 是一個軟體套件管理工具,補足了一些缺陷(因為不是用 Homebrew 裝的就管不到),像是 Git、Node.js、MongoDB、Yarn...這些套件都可以透過 Homebrew 快速查詢、下載和更新套件。

  • 安裝
    開啟原生的終端機,輸入下面指令

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

    // 查看 Homebrew 的版本
    brew --version
    
    // 更新 Homebrew
    brew update
    
    // 查看現有哪些套件
    brew list
    
    // 查詢套件
    brew search 套件名稱
    
    // 查詢套件資訊
    brew info 套件名稱
    
    // 安裝套件
    brew install 套件名稱
    
    // 更新套件
    brew upgrade 套件名稱
    
    // 更新全部套件
    brew upgrade
    
    // 刪除套件
    brew uninstall 套件名稱
    
    // 檢查 Homebrew有沒有問題
    brew doctor
    
    // 清除安裝後留下的垃圾檔案
    brew cleanup
    
  • Homebrew-Cask
    Homebrew 把軟體分為 CLI 和 GUI 兩類,一般的 CLI 軟體使用上面介紹的指令就可以,GUI 類的軟體(例如:Chrome)就會在指令加上 --cask 的參數。
    (這套工具的英文單字使用頗具聯想力,homebrew = 自家釀酒窖, formula = 配方, cask = 木桶)

    // 安裝 GUI工具
    brew <command> --cask 套件名稱
    

    補充資訊:
    命令列介面(英語:Command-Line Interface,縮寫:CLI)維基百科
    圖形使用者介面(英語:Graphical User Interface,縮寫:GUI)維基百科


iterm2

想要各種客製化的終端機顯示配置,從根本解決問題的方式就是直接換掉終端機了,有了 iterm2 就像從記事本換到 VSCode一樣,人生馬上變彩色的,不只是為了要炫泡,把各種類型資訊設置成不同的顏色,才能快速辨識需要的資訊。

  • 安裝
    運用 Homebrew 就能迅速完成

    brew install --cask iterm2
    
  • 基本操作

    1. 開啟 iterm2(Command + 空白鍵,然後搜尋 it... 就馬上跑出來了)
    2. ⌘ + , 叫出設定視窗
    3. 檢查終端機的編碼是否調整成圖中的配置(圖中為建議設定)
      https://ithelp.ithome.com.tw/upload/images/20210930/20129729tdlLTDwMwZ.png
    4. Profiles 分頁裡面可以依自己喜好調整,調整完直接套用,無須重啟。
  • 進階操作
    iterm2 的功能非常多,本篇只針對介面優化紀錄,還有很多分頁管理的功能,有需要時再查詢官方文件即可。


oh-my-zsh

  • bash、zsh 是什麼?
    簡單來說,兩個都是讓人類跟機器溝通的指令集 (shell),可以把我們輸入的指令轉換為電腦看得懂的程式碼,MacOS 以前預設使用 bash,但是從 macOS Catalina 版開始改成使用 zsh,zsh 提供各種自定樣式調整,如果是舊版的 macbook 也可以參考蘋果的 官方文件 調整。

  • oh-my-zsh 是一套強大的框架,提供海量的功能來管理 zsh。

  • 安裝
    先在終端機(iTerm2)輸入指令確認環境有 zsh

    zsh --version
    

    環境沒問題再執行安裝指令

    sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
    
  • 基本操作
    可以透過 vi/vim 開啟設定檔來修改,但是這樣的操作太硬核了,先不急著改,直接進入下一步。

    // 編輯設定檔
    vim ~/.zshrc
    

Nerd font

終端機的美化會運用到各種符號和形狀,原始的字型未必能完美支援這些特殊字元(不支援就會出現亂碼),Nerd font 是一套完整蒐集了各種字型符號、icon的套件,有了它才能讓得到完整的介面優化。

  • 安裝
    brew tap homebrew/cask-fonts
    brew install --cask font-hack-nerd-font
    
    安裝完成就可以進入最後一步,不用做其他設定。

Powerlevel10k

一套強大的 zsh 主題套件,不需要自己編寫設定檔,一步一步帶你完成個人化設定,學習門檻低,成果超群。

  • 安裝
    使用 Homebrew 來安裝

    brew install romkatv/powerlevel10k/powerlevel10k
    echo "source $(brew --prefix)/opt/powerlevel10k/powerlevel10k.zsh-theme" >>~/.zshrc
    

    完成後重新開啟 iTerm2。

  • 設定主題樣式,重開 iTerm2 會跳出設定畫面,如果沒有出現可以輸入以下指令叫出設定程序:

    p10k configure 
    
  • 設定步驟:

    1. 檢查符號是不是正常顯示,上一步驟已經安裝字型包了,所以這邊都會是正常,如果不正常也可以協助下載字型包。
    2. 逐步選擇樣式設定,也會有顯示範例樣式可以參考,最後會生成一個設定檔就完成了,超級方便。
  • 如果覺得設定不滿意只要再下一次 p10k configure 就可以再次修改。


完成後終端機畫面已經非常厲害了,如果還想強化,可以先從 iTerm2 的設定面板(command + ,)來著手,再不夠就找其他 zsh 的主題套件來使用。

參考文章

  1. OneJar的隧道 - 手把手設定教學 iTerm2 + oh-my-zsh + Powerlevel10k
  2. 瘋先生 - macOS 終端機美化教學
  3. 代碼手工藝人 - Powerline fonts & Nerd fonts 简介

上一篇
[Day4] MacOS - 軟體安裝清單
下一篇
[Day6] Git版本控制 - 基本操作篇 (MacOS)
系列文
MacOS新手操作指令學習紀錄,成為裝B前端工程師之路33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言