在開始之前，這理提供了開發 Elixir 與 Phoenix 必要的工具與設定建議。

安裝 asdf

這邊使用多語言通用的版本管理工具 asdf 來安裝相關環境
網站：https://asdf-vm.com/

提供多種安裝方式，官方的安裝頁面有各種組合的詳細說明，這裡使用
git 與 MacOS 內建的 zsh 來安裝，其他的 shell
或是安裝方式其實大同小異，官方的文件也很齊全。

使用 git clone 下載 asdf

git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.13.1

將下列程式碼加入到 ~/.zshrc 中

# asdf version manager
. "$HOME/.asdf/asdf.sh"

重新開啟終端機，輸入 asdf version 應該會看到 asdf 的版本

Elixir

asdf 提供了 Elixir 的 plugin，可以使用 asdf 來安裝 Elixir

asdf plugin add elixir

完成之後我們就可以安裝最新的 Elixir 了

asdf install elixir latest

可以把最後一個 latest 替換成版本號碼，使用 asdf list all elixir
可以列出所有可以安裝的版本

安裝完成之後，使用 asdf global elixir latest 將最新的 Elixir
來設定為全域預設版本 目前寫文章的當下最新版本為 1.15.5-otp-26 意思是 Elixir
1.15.5 並且使用 OTP 26 這邊的 OTP 指的是 Erlang/OTP，Elixir 是跑在 Erlang/OTP
上的語言，所以接下來我們要安裝相對應的 Erlang/OTP 版本

Erlang/OTP

安裝方式相同，先安裝 plugin，再安裝版本，最後設定為全域預設版本 唯一不同的是
erlang 會安裝比較久，要等一下。

asdf plugin add erlang

asdf install erlang latest

asdf global erlang latest

最後可以輸入 elixir -v 來確認版本

MIX

elixir 內建了一個叫做 mix 的專案工具，可以用來建立專案、執行、測試等等

像是 mix new hello_world 就可以建立一個叫 hello_world 的 Elixir專案，
mix test 則是可以執行目前專案的測試。

HEX

hex 是預設的 Elixir 的套件庫， 我們先幫目前的 Elixir 加裝 hex

mix local.hex

hex.pm 上面可以搜尋各種 Elixir 套件

另外 hex 提供文件功能 hexdocs.pm 可以搜尋各種套件的文件， Elixir
套件通常會把說明寫在程式碼的文件區中，hexdocs 提供了所有套件產生的文件供我們查詢。

如我們要使用的 Phoenix 可以在 hexdocs.pm/phoenix
找到所有說明

另外 Elixir 本身也是，hexdocs.pm/elixir

Phoenix

雖然 Phoenix 只是其中一個 Elixir 套件，但是他提供一個 可以讓我們快速建立 Phoenix
專案的小工具 phoenix_new，

幫 mix 加入 phoenix 專案產生器

mix archive.install hex phx_new

資料庫

Phoenix 預設使用 PostgreSQL 作為資料庫，但在這個教學中我們會使用 SQLite
作為我們的 Phoenix 網站的資料庫 所以不需要另外安裝。

VSCode 設定

VSCode 天生就認識 Elixir 語法 但我們可以安裝一些套件來增加開發效率

• ElixirLS
  提供了 Elixir 語言層面的所有工具，內建 LSP

• Phoenix Framework
  為 Phoenix 使用的 heex 提供語法支援

其他建議但比較像個人偏好的設定

• 儲存時自動排版，Elixir 提供自動排版(format) 功能，執行 mix format 可以將專案排版。 在 VSCode 開啟自動排版可以在儲存時自動執行單個檔案的自動排版。 (在設定裡搜尋 FormatOnSave 設定在儲存後自動執行排版)

• Phoenix 內建 TailwindCSS 這個 CSS 套件，我推薦使用 Tailwind CSS IntelliSense 可以有自動補完 tailwind class 與提示 class 內容。 要讓這個套件認得知道我們寫 html 使用的 heex 檔案則是要在設定中加入 在設定裡搜尋 Tailwind CSS Include Languages 按 + 加入設定 key: phoenix-heex value: html