前言

如同在 Day 02: 為什麼我會想要推薦 vs code 所提及的，VS Code 在開發階段時，已經將 git 的功能納入開發需求內，因此 vs code 天生對 git 的支援特別好，是有根本原因的。

今天將介紹一下 git 的基本操作外，會推薦幾款大家都說不錯用的 extension 給大家認識認識。

前置作業

首先，開發者的電腦要安裝 git，沒有的話請去 git 官網下載，mac 推薦使用 Homebrew 下載，Windows & Linux 參考官網說明即可完成。

如果需要複習 git 的知識，可以去看這裡複習

接著來到專案的資料夾，進行 git 初始化。

git init # 初始化完成
code . # 使用 vs code 開啟資料夾

將檔案加入 git 追蹤

首先，讓我們先編輯一份檔案，完成後，活動列的 git 圖示會亮燈，表示有一個檔案已經變動。

點擊圖示後，提要欄位會列出目前變動的檔案。

將滑鼠移動到變動的檔案上，會出現兩個圖示，分別是：開啟檔案、暫存變更（git add）。最右邊的綠色 U，表示該檔案尚未被 git 追蹤（Untracked）。

將滑鼠稍微向上移動到變更，會出現兩個圖示，分別是：Stash 所有變更、暫存所有變更。

點擊任意一個 ＋，將這份檔案變成 staged 狀態，接著將滑鼠移動到檔案名稱上，會出現兩個圖示，分別是：開啟檔案、取消暫存變更。最右邊的橄欖綠 A，表示該檔案目前已經加入 Index。

接著我們在上方空格欄位，輸入 commit 的訊息，接著點擊上方的✔，完成一筆 commit。

已追蹤的檔案，進行修改

繼續同一份檔案，這次來修改幾行後，git 的圖示一樣亮燈，告知有變動過的檔案。

接著我們點擊變動的檔案名稱，vs code 會自動進行比對，告知變動的地方。

變更的地方，顏色深淺有不同的含義，深色表示該行所新增的部分；淺色表示該行沒有變動的部分。

檢查完成後，一樣在上方空白欄位上輸入 commit 的訊息，接著點擊上方的✔，完成一筆 commit。

git 狀態提醒

現在我們將注意力挪到左下角，會看到 master，表示目前有啟動 git。

如果推上 Repository，將顯示箭頭循環的圖示。

如果本機端的 commit 領先遠端，會顯示 ↑，數字表示領先的 commit 數。

如果本機端的 commit 落後遠端，會顯示 ↓，數字表示落後的 commit 數。

點擊兩個箭頭循環的圖示，將會跳出提醒。

確定後會執行 git pull + git push，這邊給建議是：

如果是一個人開發，請盡量使用這個功能。

如果是多人開發，請小心，這可能會破壞 git 的開發線圖。

git conflict 時

首先模擬情況：

分支 utc 的開發狀態。

master 的開發狀態。

現在嘗試將分支 utc 合入 master 內，衝突就產生了。

可以看到 vs code 貼心地用兩種不同的顏色表示：

• 綠色表示當下分支（master）的記錄
• 藍色表示要合入的分支（utc）的記錄。

上方四個灰字可以點擊的，vs code 將會加速處理衝突。

衝突處理完成後，一樣在空格欄位，輸入 commit 的訊息，接著點擊上方的✔，完成這筆 conflict 的 commit。

推薦 Extension

GitLens

連結

安裝完成後，會在活動列，新增專用圖示。

點擊提要欄位後，可以看到四個區塊，以不同的角度檢視 git 的記錄。

隨意點擊任何一筆 commit，會自動進行比對，告知在這筆 commit 內，進行哪些變動。

現在開啟剛剛編輯的檔案，接著將滑鼠移動到右上角，點擊此圖示。

會開啟由 git blame 組成的介面，可以清楚了解每一行是在哪筆 commit 生成的。

右上方的另一組圖示的功能是，可以檢視這份檔案的前後筆 commit。

Git History

連結

安裝完成後，點擊右上方的專用圖示。

會開啟 git 的線圖，方便檢視 git 的開發狀態。

總結

今天介紹如何使用 vs code 進行 git 的操作。

基本上，可以取代過往使用終端機、Git GUI 等方式來紀錄 commit，vs code 在這方面快方便許多了
而其他 git 的操作，則見仁見智，Git GUI 在這方面的操作較為簡單、易懂。

內建 git 功能，是我最愛 vs code 的地方。