⚔️ 第三章：迎戰大魔王 (Git Merge & 衝突解決)
在上一章中，我們學會了如何在平行宇宙 (Branch) 裡面開發新功能。
當你在 feature/cart 分支把購物車寫好、測試完美後，接下來的重頭戲就是：「把購物車的功能，合併 (Merge) 回主線 main 宇宙中。」
只要你的程式碼沒有跟同事動到同一行，合併通常是一瞬間的事。
但如果...
你改了 index.html 的第 10 行。
你的同事也剛好改了 index.html 的第 10 行。
這時候你執行合併，Git 會直接崩潰跳紅字，告訴你發生了 Merge Conflict (合併衝突)！
不要害怕！處理衝突是工程師的日常，這堂課我們將教你如何用 Vibe Coding 的方式，優雅地解決這場腥風血雨。
🤝 和平的融合：最基礎的 Merge 操作
首先，我們先來學習「沒有衝突」時的完美合併流程。
💡 Vibe Prompt 實戰 1：安全的合併標準作業流程 (SOP)
不要自己亂敲指令，遇到重要的合併，直接跟 AI 討 SOP！
[!IMPORTANT] 請複製以下 Prompt 傳送給 AI：
我在 "feature/cart" 分支上完成了購物車的開發，也已經執行了 git commit。現在我想要把這個分支的程式碼，合併 (Merge) 回到 "main" 分支上。請給我一套安全的標準指令流程，並且教我合併完成後如何把 "feature/cart" 刪除。
🤖 AI 生成的真實回覆與指令：
# 步驟 1：首先，你必須先切換回到「接收者」的宇宙 (也就是主線 main)
git switch main
# 步驟 2：執行合併指令，把 feature/cart 的精華吸收過來
git merge feature/cart
# 步驟 3：(可選) 如果合併非常順利沒有紅字，你就可以把已經用不到的開發分支刪除
git branch -d feature/cart
🔍 深度解析：
合併的概念就像是「大魚吃小魚」。你必須先變成大魚 (switch main)，然後再把小魚吃掉 (merge feature/cart)。很多人順序搞反，在開發分支上執行 merge main，結果把整個專案搞得亂七八糟！
💥 災難降臨：看懂 Merge Conflict 的恐怖符號
當你執行 git merge 時，如果終端機出現了這行字：
CONFLICT (content): Merge conflict in index.html
Automatic merge failed; fix conflicts and then commit the result.
恭喜你！你中獎了。
這時候如果你打開你的 index.html，你會看到你的程式碼裡面多出了一大堆像亂碼一樣的符號：
<<<<<<< HEAD
<button class="bg-blue-500">一般登入</button>
=======
<button class="bg-red-500">Google 登入</button>
>>>>>>> feature/google-login
這不是病毒，這是 Git 在向你求救！
💡 Vibe Prompt 實戰 2：讓 AI 幫你翻譯衝突符號
[!IMPORTANT] 請複製以下 Prompt 傳送給 AI：
我剛剛執行 git merge 發生了衝突。我打開檔案，看到了 <<<<<<< HEAD, =======, >>>>>>> 這些奇怪的符號。請用最白話的方式，向我解釋這三行符號分別代表什麼意思？然後告訴我，我現在應該怎麼處理這段文字？
🤖 AI 的超白話解釋：
這三種符號是 Git 畫出來的「分隔線」，用來告訴你兩邊的意見在哪裡不合：
1. <<<<<<< HEAD 到 ======= 之間：
這代表【你目前所在的分支 (通常是 main)】的程式碼。
也就是原本這個檔案長怎樣。
2. ======= 到 >>>>>>> feature/google-login 之間：
這代表【準備被合併進來的分支 (小魚)】的程式碼。
💡 你的任務 (解決衝突)：
你必須像法官一樣做出裁決。
1. 把那些奇怪的符號 (<<<<, ====, >>>) 手動刪除。
2. 決定你要保留哪一段程式碼？或是兩段都要保留稍微修改一下？
3. 存檔，然後重新 git add 與 git commit。
🤖 AI 仲裁者：把整個檔案丟給 AI 解衝突
如果你看不懂那兩段程式碼到底差在哪，或是你想保留雙方的優點，最聰明的做法就是：「把這段充滿衝突符號的程式碼，直接複製貼上給 AI，讓它幫你重新寫一份乾淨的！」
💡 Vibe Prompt 實戰 3：直接丟給 AI 解決複雜衝突
[!IMPORTANT] 請複製以下 Prompt 傳送給 AI：
我在 index.html 遇到了 Git 衝突，以下是包含衝突符號的原始碼：
<<<<<<< HEAD<div class="header">歡迎來到 Vibe Tutor (藍色主題)</div>=======<div class="header" id="main-title">歡迎來到 Vibe Tutor - 升級版</div>>>>>>>> feature/new-title
請幫我解決這個衝突。我的需求是：我要保留 feature/new-title 裡面的 id="main-title" 屬性以及「升級版」字眼，但我同時也想保留 HEAD 裡面的「(藍色主題)」文字。請給我解決衝突後，最終乾淨的 HTML 程式碼，不要包含任何 Git 符號。
🤖 AI 完美仲裁的真實程式碼：
<!-- AI 幫你把兩邊的需求完美融合，並移除了所有醜陋的符號 -->
<div class="header" id="main-title">歡迎來到 Vibe Tutor - 升級版 (藍色主題)</div>
🔍 深度解析： 在 Vibe Coding 時代，你再也不用自己在一堆大括號和標籤中尋找刪除線。只要描述清楚「你想要保留什麼」，AI 就能在一秒內給出完美的結合體。拿到這段乾淨的程式碼後，直接貼回你的 VSCode，存檔，就大功告成了！
😅 後悔藥：如何直接中斷這場可怕的合併
有時候衝突實在太多了 (例如幾十個檔案同時衝突)，你看了眼花撩亂，覺得「我不要合併了！我要回到執行 merge 之前的狀態！」
這時候，Git 提供了一顆最強的「後悔藥」。
💡 Vibe Prompt 實戰 4：取消合併，逃離戰場
[!IMPORTANT] 請複製以下 Prompt 傳送給 AI：
我剛剛執行了 git merge，結果發生了太多檔案衝突，我不想處理了。請教我如何「取消這次的合併 (Abort)」，讓我的專案完全回到我輸入 git merge 之前的狀態？請給我對應的指令。
🤖 AI 生成的真實回覆與指令：
# 這是一顆無敵的後悔藥！
# 只要你還處於合併衝突狀態 (還沒 commit)，輸入這行指令：
git merge --abort
# 你的專案就會像時光倒流一樣，回到你輸入 git merge 之前那一秒的狀態！
# 所有的 <<<<<< HEAD 符號都會瞬間消失。
🛠️ VSCode 的神級內建功能
其實，現代的編輯器如 VSCode 或 Cursor，早就把解決衝突變成了一鍵操作的傻瓜介面。
當你用 VSCode 打開衝突的檔案時，你會發現在那些 <<<<< HEAD 的上方，會浮現四個小小的按鈕 (Code Lens)：
- Accept Current Change (保留當前修改，也就是 HEAD)
- Accept Incoming Change (保留傳入的修改，也就是你要合併進來的分支)
- Accept Both Changes (兩邊都保留，它會把兩段都貼上去讓你慢慢改)
- Compare Changes (開雙視窗讓你仔細比對兩邊差異)
💡 Vibe Prompt 實戰 5：詢問編輯器技巧
[!IMPORTANT] 請複製以下 Prompt 傳送給 AI：
我正在使用 VSCode 處理 Git Merge 衝突。我看到畫面上浮現了 "Accept Current Change" 和 "Accept Incoming Change" 的按鈕。請告訴我，在 VSCode 裡，"Current" 指的是哪邊？"Incoming" 指的又是哪邊？如果我點了按鈕之後後悔了，該怎麼還原？
🤖 AI 的專業指導：
- Current (當前)：指的就是
HEAD，也就是你**「執行 merge 時所在的那個宇宙 (通常是 main)」**。 - Incoming (傳入)：指的就是你**「準備被合併進來的那個平行宇宙」**。
- 如果點錯了，只要按下
Ctrl + Z(Mac 是Cmd + Z) 就可以立刻復原重選！
✅ 本章總結與除錯心法
經過這堂課的洗禮，遇到 Git Merge 衝突時，你應該要感到興奮而不是恐懼！
- SOP：永遠是先切換回
main，再去merge別人。 - 看懂符號：
HEAD就是原本的，另一個就是新來的。 - 終極解法：把整個衝突區塊複製丟給 AI，說出你要保留的邏輯，直接拿乾淨的程式碼貼回去。
- 逃跑策略：搞砸了就用
git merge --abort一鍵時光倒流。
學會了分支開發與解決衝突，你的本地端 (Local) 開發技能已經點滿了。 接下來，我們要準備讓全世界看到你的作品！ 下一章：第四章：免費上線！GitHub Pages 部署秘笈，我們將教你如何把寫好的程式碼推上雲端，並且免費變成一個真實的網站網址！