在 VS Code 中使用 Git 原始碼控制

Visual Studio Code 具有整合的原始碼控制管理 (SCM)，並內建支援 Git。許多其他原始碼控制提供者可透過 Visual Studio Marketplace 上的擴充功能取得。

透過 VS Code 中的 GitHub Copilot，您可以取得提交訊息、提取要求的建議，並在提交程式碼變更前進行檢閱。深入了解 VS Code 中的 GitHub Copilot。

在 Git 儲存庫中工作

當您開啟的資料夾是 Git 儲存庫時，VS Code 會辨識出來。「原始碼控制」檢視可讓您執行大多數 Git 作業，而無需使用命令列。

您可以從活動列中選取 原始碼控制 圖示，或使用 ⌃⇧G (Windows、Linux Ctrl+Shift+G) 鍵盤快速鍵，來存取「原始碼控制」檢視。如果您有變更，「原始碼控制」圖示會指出您目前在儲存庫中擁有的變更數量。

「原始碼控制」檢視會顯示您目前儲存庫變更的詳細資料：變更、已暫存變更和 合併變更。您也可以檢視原始碼控制圖表，以查看您的變更與儲存庫歷程記錄的關聯性。

當您在「原始碼控制」檢視中選取檔案時，您會在差異編輯器中看到您對該檔案所做的變更。

您也可以在 VS Code 狀態列的左下角找到儲存庫狀態的指示器：目前分支、dirty 指示器，以及目前分支的傳入和傳出提交數。若要簽出儲存庫中的任何分支，請選取狀態指示器，然後從清單中選取 Git 參考。

複製儲存庫

如果您尚未開啟資料夾，「原始碼控制」檢視會提供從本機電腦開啟資料夾或複製儲存庫的選項。

如果您選取 複製儲存庫，系統會要求您提供遠端儲存庫的 URL (例如在 GitHub 上) 和要放置本機儲存庫的父目錄。

針對 GitHub 儲存庫，您可以在 GitHub 程式碼對話方塊中找到 URL。

然後，您會將該 URL 貼到 Git：複製提示中。

您也會看到 從 GitHub 複製 的選項。在 VS Code 中使用您的 GitHub 帳戶驗證身分後，您就可以依名稱搜尋儲存庫，並選取任何儲存庫來複製它。您也可以使用命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 中的 Git：複製 命令，開始複製 Git 儲存庫的流程。如需逐步操作說明，請查看我們的 從 VS Code 複製儲存庫 影片。

初始化儲存庫

如果您的工作區在本機電腦上，您可以透過使用 初始化儲存庫 命令建立 Git 儲存庫來啟用 Git 原始碼控制。當 VS Code 未偵測到現有的 Git 儲存庫時，「原始碼控制」檢視會提供 初始化儲存庫 或 發佈至 GitHub 的選項。

您也可以從命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 執行 Git：初始化儲存庫 和 發佈至 GitHub 命令。

• 初始化儲存庫：建立必要的 Git 儲存庫中繼資料檔案，並將您的工作區檔案顯示為未追蹤的變更，準備好暫存。
• 發佈至 GitHub：直接將您的工作區資料夾發佈到 GitHub 儲存庫，讓您可以選擇私人和公開儲存庫。請查看我們的 發佈儲存庫 影片，以取得有關發佈至 GitHub 的詳細資訊。

提交

暫存 (git add) 和 取消暫存 (git reset) 可以透過檔案中的內容相關動作或拖放來完成。

您可以在變更上方輸入提交訊息，然後按 Ctrl+Enter (macOS：⌘+Enter) 來提交它們。如果有任何已暫存的變更，則只會提交這些變更。否則，系統會提示您選取您想要提交的變更，並取得變更提交設定的選項。

我們發現這是個很棒的工作流程。例如，在先前的螢幕擷取畫面中，只有對 overview.png 的已暫存變更會包含在提交中。稍後的暫存和提交動作可能會將對 versioncontrol.md 和其他兩個 .png 影像的變更包含在個別的提交中。

更具體的 提交 動作可以在「原始碼控制」檢視頂端的 檢視和更多動作 ... 功能表中找到。

使用 AI 產生提交訊息

VS Code 中的 GitHub Copilot 可以根據您所做的程式碼變更，為您產生提交訊息。在「原始碼控制」檢視中，選取提交訊息輸入方塊中的 使用 Copilot 產生提交訊息 按鈕 ()。

如果您的組織或專案對提交訊息有特定需求，您可以使用 Copilot 自訂指示來產生提交訊息。例如，提交訊息長度上限為 60 個字元，且應以現在式動詞開頭。取得關於用於產生提交訊息的 Copilot 自訂指示的更多詳細資訊。

使用編輯器撰寫提交訊息

如果您在提交變更時未輸入提交訊息，VS Code 會開啟 COMMIT_EDITMSG 檔案的編輯器，您可以在其中於編輯器中撰寫提交訊息。在您提供提交訊息之後，您可以關閉編輯器索引標籤，或選取編輯器工具列中的 接受提交訊息 按鈕來提交變更。

若要取消提交作業，您可以清除文字編輯器的內容並關閉編輯器索引標籤，或選取編輯器工具列中的 捨棄提交訊息 按鈕。

您可以切換 git.useEditorAsCommitInput 設定來停用此功能。變更設定後，您必須重新啟動 VS Code，變更才會生效。

若要將相同的流程用於在整合式終端機中執行的 git commit 命令，請啟用 git.terminalGitEditor 設定。

Git 追蹤資訊

VS Code 可以在編輯器和狀態列中內嵌顯示 git 追蹤資訊。將滑鼠游標停留在狀態列項目或內嵌提示上方，即可檢視詳細的 git 追蹤資訊。

若要啟用或停用 git 追蹤資訊，請使用 Git：切換 Git 追蹤編輯器裝飾 和 Git：切換 Git 追蹤狀態列項目 命令，或設定這些設定

• git.blame.statusBarItem.enabled (預設為啟用)
• git.blame.editorDecoration.enabled

您可以使用 git.blame.editorDecoration.template 和 git.blame.statusBarItem.template 設定，自訂在編輯器和狀態列中顯示之訊息的格式。您可以使用變數來表示最常見的資訊。

例如，下列範本會顯示提交的主旨、作者姓名，以及作者日期 (相對於現在)

{
  "git.blame.editorDecoration.template": "${subject}, ${authorName} (${authorDateAgo})"
}

若要調整編輯器裝飾的色彩，請使用 git.blame.editorDecorationForeground 主題色彩。

使用 AI 檢閱未提交的程式碼變更

VS Code 中的 GitHub Copilot 可以協助您檢閱未提交的程式碼變更。

1. 在「原始碼控制」檢視中，選取 Copilot 程式碼檢閱 按鈕，以開始檢閱未提交的變更

   

2. Copilot 會在編輯器中以覆疊方式產生程式碼檢閱註解和建議

   

   您也可以在 註解 面板中檢視所有程式碼檢閱註解的清單。

3. 您可以使用對應的按鈕，或「註解」面板中的內容相關功能表動作，來套用或捨棄建議

在 GitHub 文件中深入了解使用 Copilot 檢閱程式碼變更。

分支和標籤

您可以直接在 VS Code 中，透過命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 中的 Git：建立分支 和 Git：簽出至 命令，來建立和簽出分支。

如果您執行 Git：簽出至，您會看到一個下拉式清單，其中包含目前儲存庫中的所有分支或標籤。它也會讓您選擇建立新的分支 (如果您認為這是更好的選項)，或在 detached 模式中簽出分支。

Git：建立分支 命令可讓您快速建立新的分支。只要提供新分支的名稱，VS Code 就會建立分支並切換至該分支。如果您選擇 從...建立新分支，您會看到額外的提示，可讓您指定新分支應指向哪個提交。

遠端

假設您的儲存庫已連線到某些遠端，且您簽出的分支具有連至該遠端分支的上游連結，VS Code 會提供實用的動作，可讓您 推送、提取 和 同步 該分支 (後者會執行 提取 命令，然後執行 推送 命令)。您可以在 檢視和更多動作 ... 功能表中找到這些動作，以及 新增或移除遠端 的選項。

VS Code 能夠定期從您的遠端提取變更。這可讓 VS Code 顯示您的本機儲存庫領先或落後遠端多少變更。此功能預設為停用，您可以使用 git.autofetch 設定 來啟用它。

原始碼控制圖表

當您設定遠端儲存庫時，您可以查看您領先或落後遠端多少次提交。「原始碼控制」檢視的 原始碼控制圖表 區段會顯示傳入和傳出提交的圖形化表示法。

圖表包含目前分支、目前分支的上游分支，以及選用的基底分支。圖表的根目錄是這些分支的共同祖先。

圖表提供下列功能

• 選取項目以查看提交中的對應變更。
• 將滑鼠游標停留在 傳入/傳出 標題上方，即可執行提取、提取和推送動作。

Git 狀態列動作

當目前簽出的分支已設定上游分支時，狀態列中的分支指示器旁邊會有 同步變更 動作。同步變更 會將遠端變更提取到您的本機儲存庫，然後將本機提交推送至上游分支。

如果未設定上游分支，且 Git 儲存庫已設定遠端，則會啟用 發佈 動作。這可讓您將目前分支發佈到遠端。

邊界指示器

如果您開啟的資料夾是 Git 儲存庫，並開始進行變更，VS Code 會在邊界和概觀尺規中新增實用的註解。

• 紅色三角形表示已刪除行的位置
• 綠色長條表示新增的行
• 藍色長條表示已修改的行

合併衝突

VS Code 可辨識合併衝突。差異會反白顯示，且有內嵌動作可接受一個或兩個變更。一旦衝突解決，請暫存衝突檔案，以便您可以提交這些變更。

三向合併編輯器

為了協助您解決合併衝突，VS Code 提供三向合併編輯器，您可以在其中以互動方式接受傳入和目前的變更，並檢視和編輯產生的合併檔案。三向合併編輯器會透過選取具有 Git 合併衝突之檔案右下角的 在合併編輯器中解決 按鈕來開啟。

三向合併編輯器會針對 傳入 變更 (在左側)、目前 變更 (在右側) 和合併的 結果 (在底部) 顯示個別的檢視。衝突會反白顯示，且可以使用 CodeLens 按鈕來解決。

解決衝突

三向合併編輯器可讓您透過接受一個或兩個變更來解決衝突。您也可以手動編輯合併的結果。

針對某些衝突，合併編輯器會顯示 接受組合 按鈕。接受組合會透過智慧型合併兩個變更來解決目前的衝突。這對於同一行中未觸及相同字元的變更特別有用。

使用 忽略 按鈕，既不接受傳入變更也不接受目前變更，而是將衝突標示為已解決。這會將衝突區域重設為進行任何變更之前的狀態。

完成合併

您可以使用結果編輯器右側的衝突計數器來追蹤還剩下多少未解決的衝突。按一下計數器會跳到下一個未解決的衝突。一旦所有衝突都解決，您就可以選取右下角的 完成合併 來完成合併。這會暫存檔案並關閉合併編輯器。

其他版面配置及更多功能

選取合併編輯器右上角的三個點 (···) 會開啟內容功能表，其中包含其他選項。您可以切換到垂直版面配置，並顯示基底檢視，其中顯示檔案在進行任何變更之前的狀態。

傳入、目前 和 結果 旁邊的三個點會提供每個檢視的選項，例如顯示與基底的並排差異、接受所有變更或重設結果。

了解衝突

如果您想要深入了解三向合併編輯器如何運作的詳細資訊，我們建議您觀看下列影片

檢視差異

我們的 Git 工具支援在 VS Code 中檢視差異。

差異編輯器在中間有一個個別的邊界，可讓您 暫存 或 還原 變更程式碼區塊。如果您選取文字區塊，您可以還原或暫存選取範圍中包含的變更。

協助工具差異檢視器

差異編輯器中有一個「協助工具差異檢視器」，以統一的修補程式格式呈現變更。您可以使用 移至下一個差異 (F7) 和 移至上一個差異 (⇧F7 (Windows、Linux Shift+F7)) 在變更之間導覽。可以使用方向鍵導覽行，而按下 Enter 鍵會跳回差異編輯器和選取的行。

時間軸檢視

「時間軸」檢視預設可在 [檔案總管] 的底部存取，是視覺化檔案時間序列事件 (例如，Git 提交) 的統一檢視。

VS Code 的內建 Git 支援提供指定檔案的 Git 提交歷程記錄。選取提交將會開啟差異檢視，以顯示該提交所引入的變更。當您以滑鼠右鍵按一下提交時，您會取得 複製提交 ID 和 複製提交訊息 的選項。

Visual Studio Code 透過 VS Code Marketplace 上提供的擴充功能，支援更多 Git 歷程記錄工作流程。

Git 輸出視窗

您隨時可以深入了解我們正在使用的 Git 命令。如果發生奇怪的事情，或者您只是好奇，這會很有幫助。 :)

若要開啟 Git 輸出視窗，請執行 檢視 > 輸出，然後從下拉式清單中選取 記錄 (Git)。

將 VS Code 作為 Git 編輯器

當您從命令列啟動 VS Code 時，您可以傳遞 --wait 引數，讓啟動命令等到您關閉新的 VS Code 執行個體為止。當您將 VS Code 設定為 Git 外部編輯器時，這會很有用，如此一來，Git 會等到您關閉啟動的 VS Code 執行個體為止。

以下是執行步驟

1. 請確定您可以從命令列執行 code --help，並取得說明。
   • 如果您沒有看到說明，請依照下列步驟執行
     • macOS：從命令面板中選取 Shell 命令：在路徑中安裝 'Code' 命令。
     • Windows：請確定您在安裝期間選取了 新增至 PATH。
     • Linux：請確定您透過我們新的 .deb 或 .rpm 套件安裝了 Code。
2. 從命令列執行 git config --global core.editor "code --wait"

現在您可以執行 git config --global -e，並使用 VS Code 作為編輯器來設定 Git。

將 VS Code 作為 Git difftool 和 mergetool

即使從命令列使用 Git，您也可以使用 VS Code 的差異和合併功能。將下列內容新增至您的 Git 設定，以使用 VS Code 作為差異和合併工具

[diff]
    tool = default-difftool
[difftool "default-difftool"]
    cmd = code --wait --diff $LOCAL $REMOTE
[merge]
    tool = code
[mergetool "code"]
    cmd = code --wait --merge $REMOTE $LOCAL $BASE $MERGED

這會使用可以傳遞至 VS Code 的 --diff 選項，以並排比較兩個檔案。合併工具會在 Git 下次偵測到合併衝突時使用。

總結來說，以下是一些範例，你可以使用 VS Code 作為編輯器的地方

• git rebase HEAD~3 -i 使用 VS Code 進行互動式變基 (rebase)
• git commit 使用 VS Code 撰寫提交訊息 (commit message)
• git add -p 後接 e 進行互動式新增
• git difftool <commit>^ <commit> 使用 VS Code 作為差異編輯器來查看變更

使用 GitHub 提取要求和問題

Visual Studio Code 也能夠整合 GitHub 的 pull requests 和 issues。在 VS Code 中建立你的 PR、透過評論進行審閱，並在不切換環境的情況下批准它們。深入了解在 VS Code 中使用 GitHub PR 和 Issues。

SCM 提供者

VS Code 支援同時處理多個原始碼控制提供者。例如，你可以同時開啟多個 Git 儲存庫以及你的 Azure DevOps Server 本機工作區，並在你的專案之間無縫工作。若要開啟 原始碼控制提供者 檢視，請選取 原始碼控制 檢視中的溢位選單 (⌃⇧G (Windows, Linux Ctrl+Shift+G))，將滑鼠懸停在 檢視 上，並確保 原始碼控制儲存庫 已勾選。原始碼控制提供者 檢視會顯示偵測到的提供者和儲存庫，你可以透過選取特定的提供者來限定變更的顯示範圍。

SCM 提供者擴充功能

如果你想安裝其他的 SCM 提供者，你可以在 擴充功能 檢視中搜尋 scm providers 擴充功能類別 (⇧⌘X (Windows, Linux Ctrl+Shift+X))。開始輸入 '@ca'，你將會看到擴充功能類別的建議，例如偵錯工具 (debuggers) 和程式碼檢查工具 (linters)。選取 @category:"scm providers" 以查看可用的 SCM 提供者。

後續步驟

• 入門影片 - Git 版本控制 - 一部介紹 VS Code Git 支援概觀的入門影片。

• GitHub 協作入門 - 學習如何在 VS Code 中使用 GitHub。

• 深入了解Copilot VS Code - 了解 VS Code 中的 Copilot。

• 原始碼控制 API - 如果你想將另一個原始碼控制提供者整合到 VS Code 中，請參閱我們的原始碼控制 API。