💡 前言

在團隊協同開發或進行大型功能重構時，如果所有人都在同一個主幹（main 或 master）上直接修改程式碼，一旦程式寫到一半崩潰或還沒完成，就會導致整個專案無法運作。

為了確保開發過程安全、互不干擾，我們需要使用 Git Branch（分支）。而當多人同時修改了同一行程式碼時，就會迎來每個工程師都曾頭痛過的魔王關卡——Merge Conflict（合併衝突）。今天 Day 15 我們就來看看如何在 VS Code 中輕鬆駕馭分支管理，並直覺化解開合併衝突！

🎯 本篇重點

1. 什麼是 Git Branch（分支）？平行宇宙的概念
2. 在 VS Code 中建立、切換與管理分支
3. 什麼是 Merge Conflict？衝突發生的原因
4. VS Code 視覺化解決合併衝突 (Accept Current / Incoming)

🌳 1. 什麼是 Git Branch（分支）？

你可以把 Git 分支想像成平行宇宙：
• main 主分支：代表目前線上穩定、可運作的正式版本。
• 功能分支 (feature/...)：當你要開發新功能（例如購物車、登入頁面）或修復 Bug 時，從主分支分支出一個獨立的沙盒環境。你在這裡怎麼改、怎麼玩都不會影響到主分支，直到功能開發完畢且測試無誤後，再安全地「合併（Merge）」回主分支。

🛠️ 2. 在 VS Code 中輕鬆操作分支

不需要背 git checkout -b 指令，VS Code 的底部狀態列幫你搞定一切：

步驟 A：查看與切換分支

1. 看向 VS Code 視窗的左下角藍色狀態列，你會看到目前的 Git 分支名稱（例如 main）。
2. 點擊該分支名稱，視窗上方會彈出一個選單，列出所有的本地與遠端分支。
3. 點擊你想切換的分支名稱，即可瞬間切換過去。

步驟 B：建立新分支

1. 同樣點擊左下角分支名稱。
2. 在彈出的選單上方輸入新分支的名稱（例如 feature/login-page）。
3. 點擊 「建立新分支... (Create new branch...)」，VS Code 不僅會幫你建立分支，還會自動切換過去！

⚔️ 3. 什麼是 Merge Conflict（合併衝突）？

當你把分支合併回主分支時，如果：
• 情況 A：你改了檔案 A 的第 10 行，同事改了檔案 A 的第 50 行 ➔ Git 很聰明，會自動幫你合併。
• 情況 B：你和同事同時修改了同一個檔案的「同一行」程式碼，但內容寫得不一樣 ➔ Git 慌了，不知道該聽誰的，這時就會觸發 Merge Conflict（合併衝突），並暫停合併流程。

🛠️ 4. 用 VS Code 視覺化解決衝突

當發生衝突時，VS Code 會在原始碼控制面板標示出衝突檔案，點開後，程式碼中會出現像這樣的特殊標記：

<<<<<<< HEAD
console.log("這是目前主分支寫的程式碼");
=======
console.log("這是從其他分支合併進來的程式碼");
>>>>>>> feature/login-page

別慌！VS Code 內建了極為直覺的衝突解決介面，在衝突的程式碼上方會出現四個藍色小按鈕：

1. Accept Current Change（接受目前變更）：保留你自己分支寫的版本。
2. Accept Incoming Change（接受來電變更 / 外部變更）：採用對方合併進來的版本。
3. Accept Both Changes（接受雙方變更）：把兩段程式碼同時保留下來。
4. Compare Changes（比較變更）：開啟左右對比視窗檢視差異。

解決步驟：

1. 點擊你決定保留的按鈕（例如 Accept Current Change）。
2. VS Code 會自動清除那些奇怪的 <<<<<<<、======= 標記。
3. 將修改後的檔案加入暫存（Stage），並完成 Commit，衝突就完美解決了！