###### tags: `tutorials` `f2e` # 前端開發環境 ## 安裝列表 - [Homebrew](https://brew.sh/) - [iterm2](https://iterm2.com/) - [Oh My Zsh](https://ohmyz.sh/) - [Node.js](https://nodejs.org/en/about) - [NPM](https://docs.npmjs.com/about-npm) - [Git](https://git-scm.com/) - [VS Code](https://code.visualstudio.com/) ## HomeBrew macOS 環境下的軟體版本管理工具，可以安裝 & 更新各種軟體工具 ## iterm2 macOS 環境用的終端機工具，功能比原本 macOS 內建的還要多元 ## Oh My Zsh 一個終端機輔助工具，輔助在終端機輸入指令的操作，還可以設定一些個性化的顯示 ## NVM Node.js 版本管理工具，可以安裝 Node.js，可以快速切換不同 Node.js 版本 ## Node.js JavaScript runtime ，讓 JavaScript 可以在瀏覽器以外的地方執行 ## NPM "Node Package Manager"，顧名思義就是 Node.js 的套件管理工具，可以安裝 & 更新專案會用到的第三方套件或工具 ## Git 專案的版本控制工具，把它想成是專案的時光機，可以隨時回到以前的儲存記錄，當然要有存擋才回得去 ## VS Code 就是編輯器 --- # 安裝 ## 打開內建的 Termainl (終端機) ![](https://i.imgur.com/RCe4jMJ.jpg) ## 安裝 HomeBrew 在 Terminal 裡輸入 ```shell= /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ``` 📌 要注意 MacOS 的版本夠不夠新，HomeBrew 有最低支援版本限制 📌 .zrhrc 要設定環境變數 ## 更新 HomeBrew 資料庫 ```shell= brew update ``` ## 安裝 iterm2 在 Terminal 輸入 ```shell= brew install --cask iterm2 ``` ## 安裝 Oh My Zsh 在 Terminal 輸入 ```shell= sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" ``` 關掉內建的 Terminal ```shell= exit ``` 使用新的 Terminal `iterm2` ## 安裝 NVM ```shell= brew install nvm ``` 📌 .zshrc 要新增環境變數 檢查 NVM 有沒有安裝好 ```shell= nvm -v ``` ## 安裝 Node.js ```shell= nvm install --lts ``` 檢查 Node.js 有沒有安裝好 ```shell= node -v ``` ## 更新 NPM 安裝 Node.js 之後也會一起安裝好 NPM 但可能版本不是最新的，所以要更新一下 ```shell= npm i -g npm ``` 檢查 NPM 版本 ```shell= npm -v ``` ## 更新 Git MacOS 其實也有內建安裝好的 Git ，但版本可能太舊了，我們透過 HomeBrew 來管理 Git 版本，透過 HomeBrew 重新安裝新版本的 Git ```shell= brew install git ``` 檢查 Git 版本 ```she= git --version ``` ## 安裝 VS Code 透過 HomeBrew 安裝 ```shell= brew install --cask visual-studio-code ```