iT邦幫忙

2025 iThome 鐵人賽

DAY 3
1
生成式 AI

左手藍圖,右手魔法:DDD 與 Vibe Coding 的開發協奏曲系列 第 3

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

  • 分享至 

  • xImage
  •  

安安,我是 ChiYu!

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

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

Part 1:我們的「總工具箱」:安裝 Visual Studio Code (VS Code)

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

Step 1:安裝 VS Code

  • VS Code 官網下載連結:https://code.visualstudio.com/

請直接前往官網,網站會自動偵測你的作業系統(Windows, Mac, Linux),下載對應的版本,然後像安裝普通軟體一樣,無腦下一步到底就對了。
https://ithelp.ithome.com.tw/upload/images/20250822/20132971e2a9i4QC7G.jpg

Step 2:初次見面!認識 VS Code 的介面

當你第一次打開 VS Code,可能會看到一個歡迎畫面。別怕,我們先來認識一下它的幾個主要區域,未來它們會成為你最熟悉的朋友:
https://ithelp.ithome.com.tw/upload/images/20250822/2013297118b4xYo78a.jpg

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

Part 2:VS Code 威力升級:必備擴充功能 (Extensions)

如果說 VS Code 是一個功能強大的手機,那「擴充功能」就是上面的 App,能讓你的手機擁有各種超能力。
https://ithelp.ithome.com.tw/upload/images/20250822/20132971gPEjGWZgLw.jpg
請在左側活動列找到像「俄羅斯方塊」一樣的圖示,那就是擴充功能的市集。點擊它,然後在搜尋框裡,找到並全部安裝以下幾個我們這次旅程必備的神級外掛:

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

Part 3:後端開發的基石:安裝 Python

接下來,我們要安裝我們餐廳(專案)的「廚房核心燃料」—— Python。
https://ithelp.ithome.com.tw/upload/images/20250822/20132971RPJBxpRYwP.jpg

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

Part 4:AI 代理人的動力來源:安裝 Node.js

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

這是一個很棒的問題!我們來釐清一下:

  • 我們專案的「產品本身」(後端伺服器),是用 Python 寫的。
  • 但我們用來輔助開發的「魔法法杖 (gemini-cli)」,這個工具本身恰好是用 Node.js 開發的。

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

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

結語:萬事俱備,只待出征

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

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

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


上一篇
Day 2: 【心法篇】開發者的航海圖:什麼是文件驅動開發 (DDD)?
下一篇
Day 4: 【工具篇 #2】程式碼的時光機:Git 與 GitHub 版本控制
系列文
左手藍圖,右手魔法:DDD 與 Vibe Coding 的開發協奏曲14
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言