技術筆記 / 開發工具

🎓 VS Code Git 超白話入門：寫 Code 不怕爛，存檔有保佑

歡迎來到這堂課！今天我們不學複雜的程式碼，而是要學會如何用 VS Code 幫你的作業裝上「時光機」。

學會這個，就算你把程式改壞了，也能一鍵回到過去！

🛠️ 準備工作 (安裝擴充套件)

為了讓 Git 變得跟搭捷運一樣簡單，請先在 VS Code 安裝一個神級外掛：

  1. 點擊 VS Code 左側的 方塊圖示 (Extensions)。

  2. 搜尋 "Git Graph"。

  3. 點擊 Install (安裝)。

    • (這個套件會把你的存檔紀錄變成一張漂亮的彩色地圖，一定要裝！)

🚀 核心觀念：Git 就是「網購」

請把 Git 想像成你在蝦皮或是網購：

  1. 暫存 (Stage / +號) ➡️ 把商品丟進 「購物車」。

  2. 提交 (Commit / 打勾) ➡️ 去櫃台 「結帳」，並保留發票（紀錄）。

  3. 推送 (Push / 同步) ➡️ 把東西寄回家或是存到 「雲端倉庫」。

⚡ 實戰 SOP：只要三步驟

當你寫完一段程式，覺得「這裡很棒，我想存檔」時，請跟著這樣做：

第一步：打開控制中心

點擊 VS Code 左側的 Y字型圖示 (Source Control)。

(如果你看到上面有藍色數字 1 或 2，代表你有檔案修改了但還沒存！)

第二步：丟進購物車 (+號)

在 Changes (變更) 的清單中，找到你剛改好的檔案。

滑鼠移過去，按一下右邊的 「+」號。

💡 偷懶小撇步： 如果你改了很多檔案，可以直接按最上面的「+」號，全部一起丟進購物車。

第三步：結帳寫發票 (Commit)

  1. 在上面的文字框 (Message) 寫下你改了什麼。

    • 例如：「做完第一章作業」、「修正標題錯字」。(拜託一定要寫，不然以後找不到存檔點)

  2. 按下上方的 「打勾 V」 按鈕，或是藍色的 Commit 按鈕。

  3. 🎉 恭喜！你的進度已經安全儲存在電腦裡了。

☁️ 雲端備份：同步 (Sync)

做完作業、準備關電腦前，一定要做這個動作，不然電腦壞掉就沒救了。

  1. 當你 Commit 完之後，按鈕會變成藍色的 Sync Changes (同步變更)。

  2. 或者左下角的狀態列會有一個 🔄 符號。

  3. 用力按下去！

  4. 看著上面的藍色光條跑完，就代表你的檔案已經安全上傳到 GitHub 雲端了。

🕵️‍♀️ 必殺技：檢查歷史 (Git Graph)

想看你或是組員做了什麼？

  1. 點擊 VS Code 左下角的 Git Graph 按鈕。

  2. 你會看到一張像捷運路線圖的表。

    • 每一個 圓點 都是一個存檔點。

    • 點擊圓點，右邊就會顯示那一次改了哪些檔案。

  3. 點擊檔案，還能看到 左右對照圖（左邊是舊的，右邊是新的），誰改壞了一目了然！

🆘 常見問題急救包

在 GitHub 看原文