[VSCode] 在 Visual Studio Code 使用 Git 版本控制 - KnucklesNote板

首頁(home) 上頁(↑) 下頁(↓) 末頁(end)

看板 KnucklesNote

作者 Knuckles (站長那克斯)
標題 [VSCode] 在 Visual Studio Code 使用 Git 版本控制
時間 2023-11-12 Sun. 21:16:12

在 Visual Studio Code 使用 Git 版本控制，安裝環境 Windows 10

以下說明會以 VS Code 中文化的界面來操作 Git 的功能，再附上等同於 Git 的指令。

會提到這些 Git 的基本功能：
初始化存放庫 (Repository)
提交變更的檔案 (Commit)
複原上個提交 (Reset)
擱置變更 (Stash)
忽略檔案 (gitignore)
推送到 GitHub (push)
推送到自訂主機的存放庫
建立分支 (Branch)

最後介紹三個最熱門的 Git 延伸模組：
Git Graph、Git History、GitLens

# 安裝 Git for Windows

執行 VS Code 後，開啟一個專案資料夾，例如 vscode-test
點左邊的「原始檔控制」(Ctrl+Shift+G)

點「下載適用於 Windows 的 Git」會連到 https://git-scm.com/
點「Downloads」，點「Download for Windows」

點「Click here to download」

選項都照預設值點 Next 就好

安裝好 Git 後，在開始功能表裡可以看到有 Git CMD 和 Git Bash，其中 Git CMD 是給習慣用 Windows CMD 指令用的，Git Bash 是給習慣用 Linux Bash 指令用的

Git Bash 開啟的預設路徑是使用者的家目錄，想改成專案目錄的話
在開始功能表對 Git Bash 點右鍵/「更多」/「開啟檔案位置」

在總案總管對 Git Bash 的捷徑點右鍵/「內容」
在捷徑頁的「目標」，刪除「--cd-to-home」
「開始位置」設為自己的專案目錄

之後開啟 Git Bash 就會預設路徑為專案目錄了

執行 Git Bash，設定 Git 用戶的名稱和 E-mail
$ git config --global user.name "Knuckles"
$ git config --global user.email "knuckles@xxxx.xxx"

之後提交時會記錄提交者為這個使用者

檢查設定結果
$ git config --list
user.name=Knuckles
user.email=knuckles@xxxx.xxx

# 初始化存放庫 (Repository)

回到 VS Code，在原始檔控制選「將存放庫初始化」
等於在專案目錄裡執行指令 $ git init

會在專案目錄中產生一個隱藏的 .git 資料夾，用來做 Git 存放庫 (Repository)
而專案目錄中其他的檔案與資料夾就叫工作目錄 (Working directory)

在原始檔控制頁，可以看到預設的分支名稱為 main

若要加入已經開啟的專案，點「⋯」/「複製」
等於指令 $ git clone {存放庫的.git網址}

接著輸入存放庫的 .git 連結，或是點「從GitHub複製」

若是新開啟的專案的話，新增一個 test.php 檔
原始檔控制的「變更」裡會出現一個新增的檔案

檔名會顯示為綠色，後面被標了個 U，
代表是新增的檔案，尚未被 Git 追蹤 (Untracked)

此時點「✔ 提交」的話會說沒有暫存變更(Staged changes)的檔案，是否要將所有變更的檔案都設為暫存變更並提交，點取消

# 提交變更的檔案 (Commit)

想要提交變更的檔案，可以點旁邊的加號「✚」

或是對檔案按右鍵選「暫存變更」(Stage Changes)

等於指令 $ git add test.php

可以看到 test.php 被移動到了「暫存的變更」區 (Staged Changes)
檔案後面的狀態也從 U (Untracked) 變成 A (Added)

後悔的話也可以點旁邊的減號「─」取消暫存變更
等於指令 $ git reset test.php

要查看檔案變更狀態與暫存的變更，也可以用指令 $ git status

接著要將暫存的變更提交，在上方的訊息輸入提交的說明，例如「建立新檔案」
點「✔ 提交」(Commit)

等於指令 $ git commit -m "建立新檔案 test"
若前面沒有設定 Git 使用者的話，這邊會跳出錯誤訊息

沒有輸入提交說明的話，會跳出編輯器，在開頭加上說明後存檔關閉即可
下面每行開頭為 # 的註解會被忽略，未輸入說明的話會取消提交

成功提交後，回到檔案總管查看 test.php，檔名變成白色了
點開左下角的「時間表」，可以看到有一個提交記錄了

提交後再修改程式，修改的地方在左邊會有不同的顏色標記(藍色修改、綠色新增、紅色刪除)
檔名會顯示為橘色，狀態會被標記為 M (Modified)
在原始檔控制會看到被加入到「變更」的檔案

若檔案中有多處修改，但只想提交某部份的程式時，也可以點修改處左邊的標記，
然後點此處修改的✚暫存變更，這樣就可以只提交這部份的修改

點暫存變更後，輸入提交說明，點「✔ 提交」

在時間表可以看到已記錄了第二個提交

要查看提交記錄，也可以用指令 $ git log

如果想要再補充一些更新，但不想再新增一個提交，或是只是想更改提交說明的話
提交時可改用下拉選單的「認可(修改)」英文是 Commit (Amend)
或是點存放庫選單的「⋯」/「提交」/「認可(修改)」

等於指令 $ git commit --amend
會將此次修改併入上一次的提交

# 復原上個提交 (Reset)

要是想直接取消上一次的提交，點存放庫右邊的選單「⋯」/「提交」/「複原上個提交」
英文是 Commit / Undo Last Commit

要回到前幾次的提交就再復原幾次即可

存放庫選單的功能也可以用 Ctrl+Shift+P 輸入 git commit 後選擇想要的指令

例如新增了一行程式並提交，用來測試看看復原上個提交

執行「復原上個提交」後，可以看到剛剛的提交取消了，但新增的程式還在，程式被放回到「暫存的變更」區

點存放庫選單「⋯」/「顯示 Git 輸出」，可以看到實際上是執行了
$ git reset --soft HEAD~

使用 reset 重置目前的版本到指定的提交記錄
其中 --soft 代表不回復工作目錄的檔案，也不回復暫存的變更
HEAD~ 代表目前分支最新版本的上一個提交記錄

若是「回復上個提交」後再點一下「取消所有的暫存變更」
就相當於執行了 $ git reset HEAD~

若是「回復上個提交」、「取消所有的暫存變更」，再點「捨棄所有變更」
就相當於執行了 $ git reset --hard HEAD~

代表完全回復到上次提交時的狀態，工作目錄變更的程式碼都會回復

# 擱置變更 (Stash)

如果想要把目前已變更的檔案全部先存起來放著不處理，可以使用擱置變更(Stash)
例如在程式加了一行註解，所以有一個變更的檔案

點選存放庫選單「⋯」/「隱藏」/「擱置變更(Stash)」，英文是 Stash / Stash

接著輸入 Stash 的說明，例如「加上註解」

等於指令 $ git stash push -m 加上註解

會看到 test.php 沒有在變更的檔案裡了，檔案裡加上的註解也消失了

想要把未追蹤(標記 U )的檔案也隱藏的話，要選擇「⋯」/「隱藏」/「擱置變更(包含未被追蹤的檔案)」，但要注意這樣檔案會從工作目錄移除

想要回復隱藏的變更，選「⋯」/「隱藏」/「套用擱置… (Apply Stash)」，
選擇要套用的 Stash 即可

等於指令 $ git stash apply stash@{0}

要套用並刪除這個 Stash 的話，選「取回擱置…(Pop Stash)」
$ git stash pop stash@{0}

# 忽略檔案 (gitignore)
若有檔案不想加入 Git 追蹤，例如專案的設定值、含有隱密資料的檔案
可以按右鍵選「新增到 .gitignore」

會在專案目錄新增一個 .gitignore 檔案，並加入要忽略的檔案
若要忽略整個資料夾的內容，例如 .vscode，要修改 .gitignore 檔案，
加入 .vscode/*

# 推送到 GitHub (push)

要讓程式可以與其他人共同開放的話，可以使用發佈(Public)上傳到 GitHub

當所有變更的檔案都提交後，提交按鈕就會變成「發佈 Branch」
或是在原始檔控制的分支 main 旁點發佈的圖示

出現需要 GitHub 登入權限的話，輸入 GitHub 帳號密碼登入

輸入要在 GitHub 上建立的存放庫名稱，選擇要私人還是公開
現在免付費帳號也可以使用私人存放庫了

選好後就會自動在 GitHub 建好新的存放庫，不用自己登入建立

然後會推送(Push)本機分支 main 至遠端分支 origin/main，並設定了追蹤，
等於以下指令
$ git remote add origin https://github.com/KnucklesHuang/vscode-test.git
新增一個遠端分支，其中 orgin 為預設的遠端分支名稱
$ git push -u origin main
推送分支 main 到遠端 origin
其中 -u 等於 --set-upstream 設定分支開始追蹤指定的遠端分支

發佈成功後，分支名稱旁的圖示就會變成「同步處理」

此時已設定分支 main 要追蹤遠端分支 orgin/main
可以直接使用「推送」「提取」，不需要選擇遠端

登入 GitHub 可以看到上傳好的程式

點「Add a README」在 GitHub 新增一個說明檔
編輯完說明後，點「Commit changes」

在 Commit message 輸入提交的說明後點「Commit changes」

這樣會在 GitHub 這邊也建立了一次提交

要把 GitHub 存放庫的提交提取(Pull)回來並合併至本機的分支 main
可以點分支 main 旁的同步處理圖示，或是選擇「⋯」/「提取、推送」/「同步處理」
同步處理就是先提取再推送，等於指令 $ git pull 接著 $ git push

同步處理成功的話，在檔案總管就可以看到新增的 README.md 檔

若提取時出現錯誤訊息：There is no tracking information for the current branch.
Please specify which branch you want to merge with.
代表目前分支沒有追蹤的遠端分支，改為使用「提取自...」就可以指定遠端分支，再使用發佈分支即可追蹤遠端分支

注意若已將提交推送出去，就不能再用 Commit (Amend) 修改已推送的提交

# 推送到自訂主機的存放庫

如果不想使用 GitHub 當遠端存放庫的話，也可以使用自己的主機

使用 Git Bash 切換到存放專案的目錄，例如
$ cd /e/wamp/www
產生一個給遠端主機用的存放庫 vscode-test.git
$ git clone --bare vscode-test vscode-test.git
然後將 vscode-test.git 資料夾傳送至遠端主機
例如放在 my-host.com 的 /home/knuckles/git/

在 VS Code 新增一個遠端存放庫
在存放庫選單，選擇「⋯」/「遠端」/「新增遠端存放庫」
或是 Ctrl+Shift+P，搜尋「add remote」

輸入遠端存放庫的 URL 例如 ssh://knuckles@my-host.com:1234/home/knuckles/git/vscode-test.git
其中 knuckles 為登入的帳號，my-host為自己的主機位址，1234 為 ssh 的 port

為這個新增的遠端存放庫取個名稱，例如「my-host」

等於指令 $ git remote add my-host {遠端存放庫的URL}

要把本機的分支 main 推送(push)到遠端存放庫
可以點存放庫選單「⋯」/「提取、推送」/「推送至…」
或是用 Ctrl+Shift+P，搜尋「push to」然後選取要推送到遠端 my-host

等於指令 $ git push my-host main

要把遠端存放庫的提交提取(Pull)回來並合併至本機的分支 main
可以點存放庫選單「⋯」/「提取、推送」/「從…提取」
或是用 Ctrl+Shift+P，搜尋「pull from」然後選取要從遠端分支 my-host/main 提取

等於指令 $ git pull my-host main

要讓本機分支改為追蹤遠端分支 my-host/main 的話，可以使用指令
$ git branch -u my-host/main
-u 等於 --set-upstream 設定分支開始追蹤指定的遠端分支
更改追蹤後，就可以直接點提取、推送或同步處理了

# 建立分支 (Branch)

想要開發一個新功能，但又不想在開發過程影響到本來的程式，這時就可以開一個新的分支，等功能寫好後再合併回原本的分支

在存放庫選單，點「⋯」/「分支」/「建立分支...」

輸入分支名稱

等於指令 $ git checkout -b test1
其中 checkout 是移動到分支，加上 -b 代表建立分支後移動過去，也可以使用
$ git branch test1
$ git checkout test1
先建立好分支 test1，再移動過去

在存放庫可以看到目前分支變成 test1 了，在程式加上修改後提交