Day 3: 【工具篇 #1】萬丈高樓平地起：建置本地開發環境

發布於 2025年8月22日 (更新於 2025年8月22日) · 約 1 分鐘閱讀 · 2025iThomeIronman VibeCoding DDD

安安，我是 ChiYu！

昨天，我們在腦中畫好了宏偉的建築藍圖 (DDD)，確立了「文件驅動開發」這個核心心法。今天，理論課結束，我們要開始動手了！我們將扮演「技師與軍火官」的角色，為接下來的開發大戰，準備好我們最精良的「施工機具」與「建材」。

「工欲善其事，必先利其器」。一個乾淨、強大、順手的開發環境，是所有偉大專案的起點。今天的目標非常明確：手把手帶你完成所有必要的環境安裝，包括 Python、Node.js，以及我們的開發神器 VS Code。

在無數的程式碼編輯器中，VS Code 已經成為了現代開發的絕對主流。為什麼？原因很簡單：它免費、開源、速度快、功能強大，而且擁有全世界最豐富的「擴充功能」生態系，可以讓我們把它打造成任何我們想要的樣子。

Step 1：安裝 VS Code

請直接前往官網，網站會自動偵測你的作業系統（Windows, Mac, Linux），下載對應的版本，然後像安裝普通軟體一樣，無腦下一步到底就對了。

Step 2：初次見面！認識 VS Code 的介面

當你第一次打開 VS Code，可能會看到一個歡迎畫面。別怕，我們先來認識一下它的幾個主要區域，未來它們會成為你最熟悉的朋友：

左側活動列 (Activity Bar)：最左邊那一排圖示，是你切換不同功能的入口，例如檔案總管、搜尋、原始碼管理（就是 Git）、以及我們待會要安裝的擴充功能。
側邊欄 (Side Bar)：點擊活動列的圖示後，左邊展開的區域就是側邊欄。最常用到的就是「檔案總管」，我們專案的所有資料夾和檔案都會顯示在這裡。
編輯區 (Editor)：中間最大塊的區域，就是我們主要編寫程式碼與文件的地方。
底部面板 (Panel)：下方可以拉開的區域，這裡非常重要，因為它包含了「終端機 (Terminal)」。我們之後所有的魔法指令，都會在這裡詠唱！

如果說 VS Code 是一個功能強大的手機，那「擴充功能」就是上面的 App，能讓你的手機擁有各種超能力。

請在左側活動列找到像「俄羅斯方塊」一樣的圖示，那就是擴充功能的市集。點擊它，然後在搜尋框裡，找到並全部安裝以下幾個我們這次旅程必備的神級外掛：

Python (Microsoft)
- 這是什麼：微軟官方出品的 Python 語言支援包。
- 為什麼必裝：裝上它，你的 VS Code 才會真正「看懂」Python。它提供了智慧程式碼提示、自動補全、語法錯誤檢查、除錯等所有核心功能，直接將 VS Code 變身為一個頂級的 Python IDE。
Prettier - Code formatter
- 這是什麼：你的程式碼專屬造型師。
- 為什麼必裝：它會在每次存檔時，自動把你的程式碼整理成一個統一、乾淨、漂亮的風格。從此告別為了「兩個空格還是四個空格」而引發的聖戰！
GitLens — Git supercharged
- 這是什麼：Git 的透視眼鏡。
- 為什麼必裝：它能讓你直接在程式碼的每一行旁邊，看到這行是誰、在什麼時候修改的，極大地增強了 VS Code 的版本控制能力。
Thunder Client
- 這是什麼：內建在 VS Code 裡的 API 測試神器。
- 為什麼必裝：我們之後會用它來測試我們寫好的後端 API，不用再開別的軟體，非常方便。先裝起來放！
Markdown Preview Mermaid Support
- 這是什麼：讓你的文件活起來的魔法。
- 為什麼必裝：我們之後會用 Mermaid.js 語法來畫流程圖和架構圖，裝了這個外掛，你就能在 VS Code 裡直接預覽到漂亮的圖表！

接下來，我們要安裝我們餐廳（專案）的「廚房核心燃料」—— Python。

如何檢查：在終端機輸入 python --version 或 python3 --version。如果出現版本號，代表你已安裝。
如何安裝：如果尚未安裝，請到 Python 官網下載最新穩定版。
- Python 官方網站：https://www.python.org/
- 【Windows 使用者請注意】：在安裝時，請務必勾選「Add Python to PATH」這個選項，這會省去你未來很多麻煩。
驗證安裝：安裝完成後，重開你的 VS Code，並打開一個新的終端機，再次輸入 python --version，確保能看到正確的版本號。

等等，你可能會問：「我們不是說專案要用 Python 嗎？為什麼又要裝 Node.js？」

這是一個很棒的問題！我們來釐清一下：

所以，我們需要 Node.js 來「驅動」我們的 AI 工具。別擔心，這只是一個一次性的前置作業，就像安裝遊戲主程式一樣，裝好後我們就能盡情暢玩了。

如何檢查：在終端機輸入 node -v。
如何安裝：如果尚未安裝，或版本低於 v20，請到官方網站下載安裝。
- Node.js 官方網站：https://nodejs.org/
- 【版本建議】：請務必選擇左邊的「LTS」版本，它是「長期支援版」，代表最穩定。
驗證安裝：安裝完成後，重開你的 VS Code，並打開一個新的終端機，再次輸入 node -v，確保能看到 v20 或更高的版本號。

太棒了！今天我們沒有寫任何一行專案程式碼，但我們完成了更重要的事情：我們建立了一個專業、乾淨、功能強大的本地開發環境。

我們的施工機具全部到位、校準完成，建材也已備妥。地基，已經準備好被開挖了！

明天，我們將學習如何使用我們開發中最重要的「時光機」與「保險庫」——我們將深入 Git 與 GitHub 的世界，學習專業的版本控制，並為我們的專案建立一個安全的雲端之家。