---
# System prepended metadata

title: 前端開發環境
tags: [f2e, tutorials]

---

###### 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
```