💡 前言

進入第三週 Week 3：Git 版本控制與團隊協同，我們要來談談所有工程師都必須掌握的核心技能——Git 版本控制。

過去在沒有版控工具的年代，我們常常把程式碼複製成 index_final.js、index_final_v2.js，結果改到最後自己也搞不清楚哪個版本才是正確的。而 Git 能精準記錄每一次程式碼的修改歷史。雖然透過終端機 (CLI) 輸入指令是標準作法，但 VS Code 內建了極其強大的 Source Control（原始碼控制面板），讓你不用背指令也能輕鬆搞定日常的版控操作！

🎯 本篇重點

1. 認識 VS Code 內建的 Git 面板 (Ctrl + Shift + G)
2. 基礎 Git 三部曲：修改 ➔ 暫存 (Stage) ➔ 提交 (Commit)
3. 視覺化程式碼差異比對 (Visual Diff Viewer)
4. 與遠端 GitHub 儲存庫同步 (Push / Pull)

🛠️ 1. 快速認識 VS Code 內建 Git 面板

在 VS Code 左側工具列點擊 「原始碼控制」 圖示（或按下快捷鍵 Ctrl + Shift + G / Mac 為 Cmd + Shift + G）。

面板中主要會分為幾個區域：
• 變更：顯示你目前檔案中被修改過、但尚未加入版控的檔案。
• 已暫存的變更：準備好要被打包提交的檔案清單。

⚡ 2. 基礎版控三步驟：Stage ➔ Message ➔ Commit

當你在專案中修改或新增了檔案後，只需簡單三個步驟就能完成提交：

Step 1：將檔案加入暫存

將滑鼠游標移到欲提交的檔案名稱上，點擊出現的 + 號（Stage Changes）。該檔案會移動到上方的「已暫存的變更」區塊。

(小技巧：如果要一次將所有修改過的檔案全部暫存，直接點擊「變更 (Changes)」右側的 + 號即可。)

Step 2：填寫提交訊息

在上方文字輸入框中，簡短說明這次修改了什麼（例如：feat: 新增首頁導覽列樣式 或 fix: 修復登入按鈕點擊失效問題）。

Step 3：執行提交

點擊藍色的 「認可 (Commit)」 按鈕。這樣就成功將這一版的修改記錄安全存入本地端的 Git 資料庫了！

🔍 3. 視覺化程式碼差異比對

在修改程式碼的過程中，想知道自己到底改了哪些內容？

• 操作方式：在「原始碼控制」面板中，直接點擊任何一個被修改的檔案名稱。
• 畫面呈現：VS Code 會開啟左右對比視窗。左側是修改前的原始碼（紅色標示刪除），右側是修改後的程式碼（綠色標示新增）。這種視覺化比對能讓你一眼看出每行程式碼的變動，檢查有無誤刪或寫錯。

🚀 4. 與遠端儲存庫同步

當本地端 Commit 完成後，如何上傳到 GitHub 或 GitLab 讓其他人看到？

1. 首次發布專案：
   如果這是全新的本地專案，面板上方會出現 「發布分支 (Publish Branch)」 按鈕，點擊後 VS Code 會自動引導你在 GitHub 上建立一個同名遠端倉庫並完成推送。
2. 日常同步 (Push / Pull)：
   • Push (推送到遠端)：當你累積了幾個 Commit 後，點擊底部的 「同步變更」 按鈕（或點擊右下角分支名稱旁的向上箭頭），就能將本地程式碼上傳到雲端。
   • Pull (拉取遠端更新)：如果團隊其他人修改了雲端程式碼，點擊向下箭頭就能將最新程式碼同步到本地電腦。