基本上會以 Unix 系統（OSX, Linux）來說明
如果是 Windows 的各位大大們可以自行通靈（或左轉？
絕對不是個人不擅長 Windows 開發環境 > <

TL;DR

安裝 VSCode 與推薦插件
安裝 NVM 版本管理工具與 Node.js 執行環境
安裝 Yarn 套件管理工具
使用 Prettier 與 Organize Imports 優化程式碼
使用 Husky 與 Lint Staged 做持續整合

設定開發環境：VSCode

此篇系列文不戰編輯器（其他篇會戰？！
由於這個系列主要是寫給想要使用 TypeScript 的人
VSCode 在 TypeScript 的支援最完備
不論是語法自動檢查、內建 TS Server（用來即時編譯）等
開發者幾乎不用額外安裝任何套件即可使用，一只皮箱即可入住

前往 VSCode 官網即可輕鬆安裝：https://code.visualstudio.com/

由於 VSCode 強大之處在於插件的完整性

推薦前端開發很不錯用的插件（非必要）

VSCode Icon，讓你檔案前面有美美的 Icon：vscode-icons
括弧上色工具，讓你不會找括弧到崩潰：Bracket Pair Colorizer
程式碼拼字檢查工具，讓你不要拼錯英文單字：Code Spell Checker
顏色上色與選取工具，讓你直接看到顏色還可以使用調色盤：Color Highlight
Git 集成工具，讓你抓戰犯：GitLens — Git supercharged
JSON 工具，讓你輕鬆處理 JSON 操作：vscode-json
路徑自動補齊工具，讓你輕鬆補齊需要的檔案：Path Intellisense

安裝執行環境：nvm, Node.js

接下來我們需要安裝執行環境 - Node.js
在開始安裝之前，先稍微科普小知識（因為身旁滿多人誤會的）

Node.js 與 JavaScript 是不同的程式語言嗎？

JavaScript 是程式語言的一種，可以在瀏覽器上執行（Chrome, Firefox, Safari 等），然而伺服器一般是沒有圖形介面的，所以為了也能執行 JavaScript，於是有了 Node.js。因此，Node.js 是相對於瀏覽器的另一個 JavaScript 執行環境，也因此有些關於圖形介面的語法並不支援（window, document 等），有興趣可參考 Kuro 大大的 0陷阱！0誤解！8天重新認識JavaScript

PS. 伺服器上也可以安裝 Headless Browser 執行環境可以執行 JavaScript，常用於爬蟲與自動化

為什麼我們需要執行環境？前端不是 HTML 點開就好嗎？

首先，React 程式碼本身是需要使用 babel 編譯的
而想要執行 babel，需要有執行環境，也就是 Node.js
再來，我們使用 TypeScript 來進行開發
TypeScript 本身也需要先使用 tsc 編譯成 JavaScript
因此，實際上的運作方式為：

React TypeScript 使用 tsc 編譯成 React JavaScript
React JavaScript 使用 babel 編譯成 HTML/CSS/JS

而大家常聽到的 webpack 則是將上述動作進行整合
進而讓整個前端的開發與設定更為容易（真的嗎？）

PS. 潮潮的 Deno 執行環境可以直接執行 TypeScript 唷！

管理 Node.js 版本的工具：NVM

由於不同版本的 Node.js 對於 JavaScript 支援度不一
有時我們必須根據不同專案使用不同版本的 Node.js
例如：AWS Lambda 只支援到 v10、本地想用潮潮 V13 等等
這時候我們必須有可以妥善管理 Node.js 版本的工具

使用 NVM 可以輕鬆的管理你的 Node.js 版本
竟然系列文標題說要想要「優美地」開發，那這邊我們也不能馬乎

安裝 NVM
從官方下載安裝腳本並且使用 bash 來執行安裝
如果不知道這段要打在哪邊的可以參照此連結
```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
```
將 nvm 放到系統執行設定
由於 NVM 預設會安裝到 ~/.nvm，為了讓系統可以抓到（以後可以直接執行 nvm 指令）
如果有安裝 zsh 的要把底下這段放在 ~/.zshrc
如果沒有的則是放到 ~/.bashrc 或是 ~/.bash_profile（有哪個就放哪個）
```
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
```
科普小知識：xxxrc 指的是 Runtime Config，也就是執行環境設定檔，而 bash 或是 zsh 是常用的系統執行環境，主要是用來執行 shell script 語言
使用 nvm 安裝 Node.js
使用 nvm 安裝 Node.js 的方式相當簡單
只要直接在後面加上版本號即可，NVM 就會自行去安裝該版本
若是只有寫主版本號則會裝該主版本號的最新版
```
# 安裝 Node.js v8
nvm install v8
```
```
# 安裝 Node.js 最新穩定版(Latest Stable)
nvm install --lts
```
使用 nvm 切換 Node.js 版本
切換的方式跟安裝非常類似，直接在後面指定要切換的版本即可
不過如果尚未安裝該版本的話則無法切換，需要先用上一步安裝
```
# 列出所有安裝過的 Node.js 版本
nvm ls
```
```
# 使用 Node.js v8
nvm use v8
```
```
# 使用 Node.js 最新穩定版
nvm use --lts
```
如果不知道裝哪一個版本就裝 LTS 吧！
更多 NVM 使用方式可參照官方 Github Repo

PS. n! 是另外一套很多人在用的，跪求其他大大們分享

建立專案: yarn, create-react-app

雖然有看到一些大神們建立專案不用任何現成腳手架（用來產專案的腳本）
不過有鑒於「優美地」進行開發，我們就不用髒自己的手了

在使用 Facebook 官方推薦的 create-react-app 建立專案之前
我們需要先了解 create-react-app 是透過 Node.js 執行的套件
既然是套件，我們就必須要安裝，也就自然需要進行管理
目前常用的套件管理工具為 npm 以及 yarn
這邊推薦使用 yarn，因為安裝速度神快，完全碾壓 npm
而且到現在為止所需要使用的功能他都有提供，也支援 node_modules 與 package.json
完全可以稱作優美！

Node.js 套件管理工具：Yarn

這邊要提醒大家，因為叫 Yarn 的太多了（菜市場名啊！）
所以在搜尋時記得使用 yarn package
不然可能會不小心地往分散式架構 Hadoop 的方向跑去（Yarn 也是他們的管理工具）

安裝 yarn
安裝方式跟 nvm 大同小異，可以直接使用終端機安裝
```
curl -o- -L https://yarnpkg.com/install.sh | bash
```
將 yarn 放到系統執行設定
跟 nvm 一樣，由於 Yarn 預設會安裝的位置可能無法讓系統抓到
為了讓系統可以抓到，以後可以直接執行 yarn 指令
如果有安裝 zsh 的要把底下這段放在 ~/.zshrc
如果沒有的則是放到 ~/.bashrc 或是 ~/.bash_profile（有哪個就放哪個）
```
export PATH="$PATH:`yarn global bin`"
```

PS. 這邊不推薦使用 Homebrew 來安裝 Yarn，因為用 Homebrew 安裝的 Yarn 版本並不支援 nvm，意即你使用 nvm 切換 Node.js 版本後，Yarn 安裝套件時不會吃到你所切換的版本。詳見此篇文章與相關 Issue

使用 React 腳手架：create-react-app

我們主要使用最新版(v3)的 create-react-app
由於最新版的有內建 TypeScript 版本，還支援到 v3.7
裡面有非常多好用的語法（個人最愛 optional chaining）

官方使用 create-react-app 的方式有非常多種
在以前，會將 create-react-app 安裝到系統上，然後使用 create-react-app 作為執行檔來建立
然而，現在的腳手架越來越多，不止 React、Vue、Angular 等等都有對應的腳手架
所以現今常用的方式已經不是安裝到系統上，而是直接使用套件管理工具來執行

以 Yarn 來說，我們會使用 yarn create 指令
如此一來，Yarn 便會去找 Node.js 套件中是 create- 開頭的腳手架

# 建立專案名稱為 demo-app 的 React TypeScript 專案
yarn create react-app demo-app --template typescript

PS. 以 NPM 來說，我們會使用 npx create-react-app 指令，如此一來 NPM 便會執行該腳本

統一程式碼風格：prettier, organize-imports

這步驟大概是我最喜歡的地方，優美再優美！
由於專案可能由多人維護，為了不要讓程式碼風格破壞感情
在專案前大家可以統一程式碼的撰寫風格
這邊推薦兩個我們常用的 VSCode 插件1
請注意，這些工具只需要在開發環境安裝，不需要安裝到正式環境

程式碼排版工具：Prettier - Code formatter

Prettier 是目前我最喜歡的排版工具，支援多數程式語言
而且排版的規範非常完整，包含括弧的位置也都有規範
當然也像其他工具一樣可以調整設定

安裝完之後，VSCode 會直接綁定 Formatter 為 Prettier
因此使用方式很簡單，就是 VSCode 的 Format Document - Shift+Option+F
或是使用 Command+Shift+P 選擇 Format Document
如果沒有正常綁定，可以按 Command+Shift+P 選擇 Format Document With...
裡面會有 Prettier 選項可以選擇

Prettier 預設的設定檔滿完整的，不過如果要客製的話
可以建立 .prettierrc 或是 prettier.config.js 放在專案根目錄即可
如果是 .prettierrc 是使用 JSON 格式
而 prettier.config.js 則是使用 JavaScript
優美地開發就是要統一，JavaScript 格式可以讓我們容易調整與註解
所以這類型的設定檔我們都統一使用 JavaScript 格式
這邊提供我們常用的設定檔：

module.exports = {
      trailingComma: 'all',
      tabWidth: 2,
      semi: false,
      singleQuote: true,
      printWidth: 120
}

PS. 想要設定更多可以參考這裡

套件引入優化工具：organize-imports

VSCode 內建提供套件引入的優化
像是一些我們 import 後沒有使用到的套件，或是套件引入順序不相同等等
我們可以使用此功能來優化我們的 imports

使用方式也是直接使用快捷鍵：Shift+Option+O
或是使用 Command+Shift+P 選擇 Organize Imports 即可

持續整合：husky, lint-staged

為了維持程式碼的一致性（常常有人忘記 prettier 啊！！
所以我們希望能在 commit 的時候自動做完

Git Hook 工具：Husky

~~Husky 是一隻哈士奇~~
Husky 是一隻會跟著你的 git 的狗
牠可以讓你在 git commit 或是 push 前執行腳本
我們只要讓他在 commit 之前執行我們的 prettier 和 organize-imports 即可

安裝方式：

# 加上 --dev 參數，僅安裝在開發環境
yarn add --dev husky

Lint Stage 工具：lint-staged

如果每次 commit 都讓整個 codebase 都重新 prettier 的話
那 commit 的時間會拉得非常常，就不夠優美了！！
所以我們需要此工具來限定只會關注 staged 的檔案（也就是有改動的檔案）

安裝方式：

# 加上 --dev 參數，僅安裝在開發環境
yarn add --dev lint-staged

整合 Husky 和 lint-staged

因為要執行腳本，所以無法使用 VSCode 上面的插件
於是需要額外安裝 prettier 和 organize-imports-cli

安裝方式：

# 加上 --dev 參數，僅安裝在開發環境
yarn add --dev prettier organize-imports-cli

為了能夠讓 commit 前執行腳本
我們還需要在 package.json 裡面進行設定

{
      ...
      "husky": {
            "hooks": {
                  "pre-commit": "lint-staged"
            }
      },
      "lint-staged": {
            "*.ts*": [
                  "organize-imports-cli",
                  "prettier --write"
            ]
      }
}

如此一來，在 commit 之前就會先執行 organize-imports 然後 prettier
大家 pull 下來的程式碼也都會是漂漂亮亮的！