環境建置

在開始寫程式之前我們會需要先安裝寫程式的工具。我們目前為止寫網站至少需要三個東西：

• 文字編輯器 - 打字的地方
• 終端機 - 黑底白字看起來像駭客的地方，也是把你的網頁程式跑起來的地方
• 瀏覽器 - 寫完網站要看吧

你看這樣我們就至少需要三個 APP 了，如果你有需要其他的工具或套件還需要開一堆軟體，像是檔案總管、GitHub Desktop、還有現代 Vibe Coder 必備的 Codex、Claude Code。這樣實在需要太多東西太麻煩了，這時候如果有一個整合式的開發環境不是很好嗎？

所以我們要來安裝一個…整合式開發環境（英文叫 IDE），VS Code。

就是下載…下一步…下一步…下一步…，Mac 就是拖過去，結束。

有人會吵說 VS Code 是文字編輯器不是 IDE 因為你需要裝擴充功能才有更多功能 bluh bluh bluh 但就像咖啡是不是豆漿一樣，你開心就好，不雙不要用。

如果你有你自己習慣的編輯器（Vim、噴射腦的網路風暴）可以繼續用你習慣的就好沒關係。

安裝擴充功能

按下 Ctrl + Shfit + X 或是左邊的四個正方形來安裝擴充功能，搜尋「live」來安裝 Live Server

安裝這個東西之後他就會幫你架設好一個靜態網頁，就是你打開網址跟他要檔案他就會給你，而且可以做到你點擊 Ctrl / Cmd + S 就自動完成儲存。

安裝 Git

這東西我們之後會用到，可以順手裝一下。

兩個方法，如果你平常有用兩個方法，如果你平常有用套件管理器的話推薦可以直接使用：

Windows Chocolatey: