有時候為了方便快速驗證想法，會先將所有的程式碼都先寫在 app.py 裡面，等到有需要做成一個正式的專案時，再將原本單一的 app.py 檔案重構為分層、分模組的專案架構（或是重新建立一個專案），這時候就有必要搭配 VS Code 或其他 IDE 來強化管理。

本日重點

• 理解程式碼格式化的重要性與最佳實踐
• VSCode 格式化工具設定與常用快捷功能
• 常見格式問題（縮排、命名、註解）教學與修正技巧
• 實際 demo：將亂碼變身專業易讀程式
• 格式化與團隊協作、程式維護的關鍵連結

一、認識「重構」

重構（refactoring）就是在不改變程式外部功能的前提下，優化程式內部結構，包括將程式拆分、分層、命名、抽離重複邏輯、提升可維護性。

專案分層就是一種重要的重構成果，常見於：

• 從單檔案粗糙的程式搬移成具有 services、models、utils 等多檔案結構。
• 讓各功能模組分工明確，減少耦合。

二、認識 VSCode

Visual Studio Code（簡稱 VSCode）是由微軟開發的跨平台原始碼編輯器。

• VS Code支援Windows、macOS、Linux三大作業系統。
• 支援多種程式語言（如Python、JavaScript、C++、HTML/CSS等），並可搭配延伸套件進一步擴充語言支援。
• 強大擴充生態系統，從Python到網頁設計，皆有專屬插件可一鍵安裝。

第一步：下載與安裝 VS Code

• step:

1. 下載 VSCode

   • 前往官方網站 Visual Studio Code 官網
   • 根據所使用的系統（Windows/Mac/Linux）下載對應安裝程式，執行並依指示「下一步」完成安裝。(VS Code 官網有基本安裝與設置教學)。

2. 安裝流程（以 Windows 為例）

   • 執行安裝檔，勾選「建立桌面捷徑」與「加入 PATH」
   • 依指示完成安裝
   • 安裝完成後，開啟 VSCode，檢查版本與語言設定

3. 初始設定與介面導覽

   • 可切換繁體中文介面：開啟VS Code後，點選「延伸模組」搜尋「Chinese」（Traditional），安裝「Chinese Language Pack」後重啟即可轉換為繁體中文。
   • 調整主題與字型大小：進入「設定」→「外觀」
   • 設定快捷鍵與工作區

4. 安裝Python與VS Code Python擴充套件

   • 至 https://www.python.org 下載並安裝Python（建議安裝時勾選「Add python.exe to PATH」）。
   • 開啟VS Code，點選左側「擴充功能」圖示，搜尋「Python」並安裝由Microsoft開發的官方Python擴充套件。
   • 安裝完成建議重啟VS Code。

第二步：建立第一個Python檔案

• step:

1. 啟動 VS Code
2. 建立Python檔案：副檔名為 .py
3. 寫入這行程式碼：

print("Hello, Python!")

4. 接著執行Python程式：右上角的「三角形按鈕」能直接執行程式碼

三、重構 app.py 檔案

1. 流程說明

使用者 (User)
    ↓ 透過網頁瀏覽器互動
Gradio UI
    ↓ 接收輸入（文字、圖片、健康資訊）
Python 後端 (app.py)
    ↓ 包含應用程式核心邏輯
核心邏輯 (Core Logic)
    ↓ API 呼叫函式
Output    

2. 重新規劃 app.py 檔案的基本架構（後續還會再做調整）

├── app.py (主應用程式)
├── services/
│   ├── ai_service.py (AI API 服務)
│   ├── db_service.py (資料庫服務)
│   └── user_service.py (使用者服務)
├── models/
│   └── nutrition_models.py (資料模型)
├── utils/
│   ├── error_handler.py (錯誤處理)
│   └── logger.py (日誌記錄)
└── config/
    └── settings.py (配置管理)

3. 重構後的專案架構

• 示意流程圖

(圖片由 Copilot 協助生成)

四、延伸閱讀

• Visual Studio Code 撰寫 Python 程式
• Visual Studio Code 官方網站
• EditorConfig 官方網站