🚀 在 VS Code 中免費取得

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

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

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

提示

如果您還沒有 Copilot 訂閱,請註冊 Copilot Free 方案,即可免費使用 Copilot。您將獲得每月完成次數和聊天互動的限制。

提示

如果您剛開始使用 Git,git-scm 網站是個不錯的起點,其中包含熱門的線上書籍、入門影片快速參考表。VS Code 文件假設您已熟悉 Git。

在 Git 儲存庫中工作

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

重要

請確定您的電腦上已安裝 Git。 VS Code 使用您電腦上的 Git 安裝 (至少 2.0.0 版),因此您需要先安裝 Git,才能取得這些功能。

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

原始檔控制檢視會顯示您目前儲存庫變更的詳細資訊:變更已暫存變更合併變更。您也可以檢視原始檔控制圖表,以查看您的變更與儲存庫歷程記錄的關聯性。

Overview of Git

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

提示

對於未暫存的變更,右側的編輯器仍然可讓您編輯檔案:請隨意使用!

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

提示

您可以在 Git 儲存庫的子目錄中開啟 VS Code。VS Code 的 Git 服務仍會照常運作,顯示儲存庫內的所有變更,但範圍目錄外的檔案變更會以工具提示陰影顯示,指出它們位於目前工作區之外。

複製儲存庫

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

First run Source Control experience

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

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

clone repository dialog

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

set repository URL

您也會看到從 GitHub 複製的選項。在 VS Code 中驗證您的 GitHub 帳戶後,您將能夠依名稱搜尋儲存庫,並選取任何儲存庫進行複製。您也可以使用 命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 中的 Git:複製 命令來啟動複製 Git 儲存庫的流程。若要查看逐步解說,請查看我們的 從 VS Code 複製儲存庫 影片。

注意

如果您想要在不將內容複製到本機電腦的情況下處理儲存庫,您可以安裝 GitHub 儲存庫 擴充功能,直接在 GitHub 上瀏覽和編輯。您可以在GitHub 儲存庫擴充功能章節中深入了解。

初始化儲存庫

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

Git initialize repository

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

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

Commit

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

注意

設定您的 Git 使用者名稱和電子郵件。 當您 commit 時,請注意,如果您的 Git 組態中未設定使用者名稱和/或電子郵件,Git 會回復為使用您本機電腦的資訊。您可以在 Git commit 資訊 中找到詳細資訊。

Stage all changes button

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

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

更具體的 Commit 動作可以在原始檔控制檢視頂端的 檢視和更多動作 ... 功能表中找到。

views and more actions button

提示

如果您將變更 commit 到錯誤的分支,請使用 命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 中的 Git:還原上次 Commit 命令來還原您的 commit。

使用 AI 產生 commit 訊息

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

Screenshot that shows the Generate Commit Message with Copilot button in the commit message input box.

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

使用編輯器撰寫 commit 訊息

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

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

Author commit message in a full text editor

您可以切換 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.templategit.blame.statusBarItem.template 設定來自訂編輯器和狀態列中顯示的訊息格式。您可以使用變數來取得最常見的資訊。

例如,下列範本會顯示 commit 的主旨、作者名稱和作者日期 (相對於現在)

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

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

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

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

  1. 在原始檔控制檢視中,選取 Copilot 程式碼檢閱 按鈕,以開始檢閱未 commit 的變更

    Screenshot that shows the Copilot Code Review button in the Source Control view.

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

    Screenshot that shows the code review comments generated by Copilot.

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

  3. 您可以使用對應的按鈕或註解面板中的內容相關選單動作來套用或捨棄建議

在 GitHub 文件中取得有關 使用 Copilot 檢閱程式碼變更 的更多詳細資訊。

分支和標籤

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

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

Git checkout

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

提示

當您切換到另一個分支時,VS Code 可以自動儲存和還原開啟的編輯器。使用 scm.workingSets.enabled 設定來啟用此功能。若要控制第一次切換到分支時開啟的編輯器,您可以使用 scm.workingSets.default 設定。

遠端

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

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

提示

您應設定認證協助程式,以避免每次 VS Code 與您的 Git 遠端通訊時都要求認證。如果您不這樣做,您可能會想要考慮透過 git.autofetch 設定停用自動提取,以減少您收到的提示次數。

原始檔控制圖表

當您設定遠端儲存庫時,您可以看到您領先或落後遠端多少 commit。原始檔控制檢視的 圖表 區段會顯示傳入和傳出 commit 的圖形化表示。

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

Source control view showing a graph visualization of the incoming and outgoing changes.

圖表提供下列功能

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

Git 狀態列動作

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

git status bar sync

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

git status bar publish

如果您的工作區包含多個 Git 儲存庫,狀態列會顯示目前的儲存庫。當您選取狀態列項目時,您可以選擇哪個儲存庫應為使用中的行為。

git status bar repo name

邊界指示器

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

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

Gutter indicators

合併衝突

Git merge

合併衝突會由 VS Code 辨識。差異會反白顯示,且有內嵌動作可接受其中一項或兩項變更。衝突解決後,暫存衝突檔案,以便您可以 commit 這些變更。

三向合併編輯器

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

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

3-way merge editor

解決衝突

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

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

使用 忽略 按鈕來接受傳入和目前的變更,但將衝突標示為已解決。這會將衝突區域重設為進行任何變更之前的狀態。

完成合併

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

替代版面配置和更多功能

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

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

了解衝突

如果您想要深入了解三向合併編輯器如何運作的詳細資訊,我們可以推薦下列影片

檢視差異

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

A File Diff in VS Code

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

Screenshot of the Diff editor, showing the Stage and Revert controls in the gutter

提示

您可以透過先在 Explorer 檢視中以滑鼠右鍵按一下檔案,然後選取 選取以進行比較,然後以滑鼠右鍵按一下要比較的第二個檔案,並選取 與選取的項目比較,來比較任何兩個檔案。或者,開啟 命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)),然後選取任何 檔案:比較 命令。深入了解在 VS Code 中比較檔案的不同選項。

協助工具差異檢視器

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

diff-review-pane

注意

此體驗對於螢幕閱讀器使用者特別有幫助。

時間軸檢視

時間軸檢視 (預設可在檔案總管底部存取) 是用於視覺化檔案時序事件 (例如,Git commit) 的統一檢視。

Timeline view

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

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

提示

按一下擴充功能磚以閱讀 Marketplace 中的描述和評論。

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

這會使用 --diff 選項,該選項可以傳遞至 VS Code 以並排比較兩個檔案。合併工具將在 Git 下次發現合併衝突時使用。

總之,以下是一些您可以使用 VS Code 作為編輯器的範例

  • git rebase HEAD~3 -i 使用 VS Code 執行互動式 rebase
  • git commit 使用 VS Code 進行 commit 訊息
  • git add -p 後面接著 e 以進行互動式新增
  • git difftool <commit>^ <commit> 使用 VS Code 作為變更的差異編輯器

使用 GitHub Pull Request 和 Issue

Visual Studio Code 也可以帶入 GitHub 的提取要求和 Issue。在 VS Code 中建立您的 PR、使用註解進行檢閱,並在不切換內容的情況下核准它們。深入了解 VS Code 中的 GitHub PR 和 Issue

SCM 提供者

提示

按一下擴充功能磚以閱讀 Marketplace 中的描述和評論。

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

Source Control Repositories view option in overflow menu

SCM 提供者擴充功能

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

SCM Provider category in the marketplace

後續步驟