May 1, 2024
從零開始打造水噹噹的 Mac 前端開發環境
每次換新 Mac 都得重來一次的開發環境設定,決定記錄如何從終端機設定、Node 管理到 VSCode 外掛。
開發環境
toc
Oh My Zsh
Oh My Zsh 是一個管理 zsh 的擴充套件,打開終端機,輸入以下指令安裝 Oh My Zsh:
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
安裝完成後,可以透過 Oh My Zsh 設定檔,變更主題樣式:
vim ~/.zshrc
找到 ZSH_THEME="<theme>"
,將 theme 替換成想要的主題
個人使用 pure 主題,依照官方文件安裝即可。
Homebrew
Homebrew 是一個 macOS 上的開源套件管理系統,方便開發者安裝、更新套件。
打開終端機,輸入以下指令安裝 Homebrew:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
設定環境變數
執行 brew,可能會出現 brew command not found 的錯誤訊息。
需要輸入以下指令,將 homebrew 添加到系統的 PATH 環境變數中:
(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/<換成自己使用者名稱>/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
可以通過 Finder 找到自己的使用者名稱,左上角 Finder > 設定 > 側邊欄,圖示為一個房子的,就是你的使用者名稱。
NVM
nvm 是 node 版本管理器,在開發不同專案時,所使用的 node 版本可能不同,所以需要使用 nvm 管理不同的 node 版本。
打開終端機,輸入以下指令安裝 nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
Nvm 常用指令
nvm install <version> // 安裝指定版本的 node
nvm use <version> // 使用指定版本的 node
nvm list // 列出所有已安裝的 node 版本
nvm alias default <version> // 設定默認版本為指定版本
Git
使用 homebrew 安裝 git:
brew install git
設定使用者名稱與電子郵件地址:
git config --global user.name "帳號名稱"
git config --global user.email "帳號@email.com"
VsCode
設定 code . 快捷鍵
打開 Vscode,按下 Cmd + Shift + P
,選擇 「shell command,選擇 Install code」,之後就可以在終端機中直接用 code .
開啟 Vscode。
推薦的擴充套件
擴充套件名稱 | 說明 |
---|---|
Winter is Coming theme | VSCode 主題 |
Material Icon Theme | Icon 主題 |
Prettier | 排版工具 |
Code Spell Checker | 檢查英文拼字 |
Auto Rename Tag | 自動重新命名 HTML 標籤 |
GitLens | 快速 Git blame 神器 |
Git Graph | Git 線圖視覺化好幫手 |