安裝 Phoenix

確定一下 elixir 有沒有裝好了

elixir -v
#=> Elixir 1.14.0 (compiled with Erlang/OTP 25)

有了之後就可以裝 Phoenix 專案產生器了

mix archive.install hex phx_new

安裝 Postgresql 資料庫

Ubuntu(Windows WSL)

安裝

sudo apt install postgresql

啟動

sudo service postgresql start

使用預設的 postgres 帳號進入資料庫

sudo -u postgres psql

進去之後幫預設的 postgres 帳號建立密碼

alter user postgres password 'postgres';

離開 psql

exit

Mac(homebrew)

安裝

brew install postgresql@14

設定自動啟動

brew services start postgresql@14

VSCode 套件設定

當然，任何編輯器都能開發 Phoenix，但是最多人用也最容易設定就是 VSCode 了，在這邊帶大家裝上幾個 Phoenix 與 Elixir 相關的套件與 VSCode 的設定。

ElixirLS (必裝)

ElixirLS 套件連結
這個由 Elixir 團隊維護的 ElixirLS 提供 Elixir LSP 給 VSCode 顯示語法檢查，自動完成等完整的 Elixir 開發功能。

Phoenix Framework (必裝)

Phoenix Framework 套件連結
讓 VSCode 看得懂 Phoenix 使用的 .heex 與 ~H 並提供語法上色。

另外如果常常用 emmet 寫 HTML 的朋友可以在 VSCode 設定裡搜尋 emmet.includeLanguages 幫 emmet 加上 phoenix-heex html，讓 emmet 在 Phoenix 的 heex 裡面也可以使用。

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense 套件連結
Tailwind CSS 用的檢查與自動完成套件，寫文章的前幾天 Phoenix 的作者剛宣布下一個版本的 Phoenix(1.18) 要內建 Tailwind CSS，這個系列也是會在 Phoenix 裡面裝上 Tailwind CSS (當然如果自己要換也是可以啦)。

裝好之後在 VSCode 的設定裡搜尋 tailwindCSS.includeLanguages 來為他加上 elixir 與 phoenix-heex 如下圖：