參加你附近的 ，瞭解 VS Code 中的 AI 輔助開發。

在 VS Code 中使用 Git 原始碼管理

Visual Studio Code 集成了原始碼管理（SCM），並內建了對 Git 的支援。許多其他原始碼管理提供程式可以透過 Visual Studio Marketplace 上的擴充套件獲得。

透過 VS Code 中的 GitHub Copilot，你可以在提交程式碼更改之前獲得提交資訊、拉取請求的建議，並審查程式碼更改。瞭解更多關於 VS Code 中的 GitHub Copilot。

提示

如果你還沒有 Copilot 訂閱，可以透過註冊 Copilot 免費計劃來免費使用 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 indicators），以及當前分支的傳入和傳出提交數量。要檢出倉庫中的任何分支，請選擇該狀態指示器，然後從列表中選擇 Git 引用。

提示

你可以在 Git 倉庫的子目錄中開啟 VS Code。VS Code 的 Git 服務仍將照常工作，顯示倉庫內的所有更改，但作用域目錄之外的檔案更改會變暗，並帶有一個工具提示，指明它們位於當前工作區之外。

克隆倉庫

如果你還沒有開啟資料夾，“原始碼管理”檢視會為你提供從本地計算機開啟資料夾或克隆倉庫的選項。

First run Source Control experience

如果你選擇克隆倉庫，系統會要求你提供遠端倉庫的 URL（例如在 GitHub 上的倉庫）以及存放本地倉庫的父目錄。

對於 GitHub 倉庫，你可以從 GitHub 的 Code 對話方塊中找到 URL。

clone repository dialog

然後你會將該 URL 貼上到 Git: Clone 提示符中。

set repository URL

你還會看到從 GitHub 克隆的選項。一旦你在 VS Code 中使用 GitHub 賬戶進行身份驗證，你就可以按名稱搜尋倉庫，並選擇任何倉庫進行克隆。你也可以透過在命令面板 (⇧⌘P (Windows、Linux 為 Ctrl+Shift+P)) 中使用 Git: Clone 命令來開始克隆 Git 倉庫的流程。要檢視分步演練，請檢視我們的從 VS Code 克隆倉庫影片。

注意

如果你想在不將內容克隆到本地機器的情況下處理倉庫，可以安裝 GitHub Repositories 擴充套件，直接在 GitHub 上瀏覽和編輯。你可以在 GitHub Repositories 擴充套件部分了解更多資訊。

初始化倉庫

如果你的工作區在本地機器上，你可以透過初始化倉庫命令建立一個 Git 倉庫來啟用 Git 原始碼管理。當 VS Code 未檢測到現有的 Git 倉庫時，“原始碼管理”檢視會為你提供初始化倉庫或釋出到 GitHub的選項。

Git initialize repository

你還可以從命令面板 (⇧⌘P (Windows、Linux 為 Ctrl+Shift+P)) 執行 Git: Initialize Repository 和 Publish to GitHub 命令。

  • 初始化倉庫：建立必要的 Git 倉庫元資料檔案，並將你的工作區檔案顯示為準備暫存的未跟蹤更改。
  • 釋出到 GitHub：直接將你的工作區資料夾釋出到 GitHub 倉庫，允許你在私有和公共倉庫之間進行選擇。檢視我們的釋出倉庫影片，瞭解有關釋出到 GitHub 的更多資訊。

提交

暫存 (git add) 和取消暫存 (git reset) 可以透過檔案中的上下文操作或透過拖放來完成。

注意

配置你的 Git 使用者名稱和電子郵件。 當你提交時，請注意，如果你的使用者名稱和/或電子郵件沒有在你的 Git 配置中設定，Git 將會退而使用你本地機器的資訊。你可以在 Git 提交資訊中找到詳細資訊。

Stage all changes button

你可以在更改上方輸入提交資訊，然後按 Ctrl+Enter (macOS: ⌘+Enter) 來提交它們。如果有任何暫存的更改，只有這些更改會被提交。否則，你會收到一個提示，要求你選擇要提交的更改，並提供更改提交設定的選項。

我們發現這是一個很棒的工作流程。例如，在前面的截圖中，只有對 overview.png 的暫存更改會被包含在提交中。後續的暫存和提交操作可以將對 versioncontrol.md 和另外兩個 .png 影像的更改作為單獨的提交。

更具體的提交操作可以在“原始碼管理”檢視頂部的檢視和更多操作 ... 選單中找到。

views and more actions button

提示

如果你將更改提交到了錯誤的分支，可以使用命令面板 (⇧⌘P (Windows、Linux 為 Ctrl+Shift+P)) 中的 Git: Undo Last Commit 命令來撤銷你的提交。

使用 AI 生成提交資訊

VS Code 中的 GitHub Copilot 可以根據你所做的程式碼更改為你生成提交資訊。在“原始碼管理”檢視中，選擇提交資訊輸入框中的使用 Copilot 生成提交資訊按鈕 ()。

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

如果你的組織或專案對提交資訊有特定要求，你可以使用 Copilot 自定義指令來生成提交資訊。例如，提交資訊的最大長度為 60 個字元，並應以現在時態的動詞開頭。獲取更多關於使用 Copilot 自定義指令生成提交資訊的詳細資訊。

使用編輯器編寫提交資訊

如果你在提交更改時沒有輸入提交資訊，VS Code 會為 COMMIT_EDITMSG 檔案開啟一個編輯器，你可以在編輯器中編寫提交資訊。提供提交資訊後，可以關閉編輯器標籤頁，或選擇編輯器工具欄中的接受提交資訊按鈕來提交更改。

要取消提交操作，你可以清除文字編輯器的內容並關閉編輯器標籤頁，或選擇編輯器工具欄中的丟棄提交資訊按鈕。

Author commit message in a full text editor

你可以透過切換 git.useEditorAsCommitInput 設定來停用此功能。更改設定後，你必須重啟 VS Code 才能使更改生效。

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

Git Blame 資訊

VS Code 可以在編輯器內和狀態列中內聯顯示 git blame 資訊。將滑鼠懸停在狀態列項或內聯提示上，可以檢視詳細的 git blame 資訊。

要啟用或停用 git blame 資訊，請使用 Git: Toggle Git Blame Editor Decoration 和 Git: Toggle Git Blame Status Bar Item 命令，或配置這些設定

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

例如，以下模板顯示提交的主題、作者姓名以及作者相對於現在的日期

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

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

使用 AI 審查未提交的程式碼更改

VS Code 中的 GitHub Copilot 可以幫助你審查未提交的程式碼更改。

  1. 在“原始碼管理”檢視中，選擇程式碼審查按鈕，開始對未提交的更改進行程式碼審查

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

  2. Copilot 會在編輯器中以浮層形式生成程式碼審查評論和建議

    Screenshot that shows the code review comments generated by Copilot.

    你還可以在評論面板中檢視所有程式碼審查評論的列表。

  3. 你可以透過使用相應的按鈕，或在評論面板中的上下文選單操作來應用或丟棄建議

在 GitHub 文件中獲取更多關於使用 Copilot 審查程式碼更改的詳細資訊。

分支和標籤

你可以直接在 VS Code 中透過命令面板 (⇧⌘P (Windows、Linux 為 Ctrl+Shift+P)) 中的 Git: Create Branch 和 Git: Checkout to 命令來建立和檢出分支。

如果你執行 Git: Checkout to，你會看到一個下拉列表，其中包含當前倉庫中的所有分支或標籤。如果你覺得建立新分支是更好的選擇，它還會提供建立新分支的選項，或者以分離模式檢出分支。

Git checkout

Git: Create Branch 命令讓你能夠快速建立新分支。只需提供新分支的名稱，VS Code 就會建立該分支並切換到它。如果你選擇從...建立新分支，你會看到一個額外的提示，允許你指定新分支應該指向哪個提交。

提示

當你切換到另一個分支時，VS Code 可以自動儲存和恢復開啟的編輯器。使用 scm.workingSets.enabled 設定來啟用此功能。要控制首次切換到分支時開啟的編輯器，你可以使用 scm.workingSets.default 設定。

工作樹

VS Code 內建了對 Git 工作樹的支援，使其可以輕鬆地同時管理和處理多個分支。

注意

你可以透過切換 git.detectWorktrees 設定來停用自動工作樹檢測。

建立工作樹

你可以直接從原始碼管理倉庫檢視或透過命令面板 (⇧⌘P (Windows、Linux 為 Ctrl+Shift+P)) 中的 Git: Create Worktree 命令建立一個新的工作樹。

  1. 在“原始碼管理”檢視中，選擇 ... > 倉庫 來開啟“原始碼管理倉庫”檢視。

    Screenshot that shows the Repositories option in the Source Control view.

  2. 右鍵單擊一個倉庫，然後選擇工作樹 > 建立工作樹...

    Screenshot that shows the Create Worktree option in the context menu of a repository in the Source Control Repositories view.

  3. 按照提示選擇新工作樹的分支和位置。

    VS Code 會在指定位置為工作樹建立一個新資料夾，並將所選分支檢出到該資料夾中。

    “原始碼管理倉庫”檢視會在其父倉庫下顯示新建立的工作樹。VS Code 會區分倉庫、子模組和工作樹，並顯示它們之間的關係以提高畫質晰度。

開啟工作樹

有多種方式可以開啟工作樹

  • 直接在 VS Code 中開啟與工作樹關聯的資料夾。VS Code 會自動檢測到它是一個現有倉庫的工作樹。

  • 在“原始碼管理倉庫”檢視中右鍵單擊工作樹，然後選擇在新視窗中開啟工作樹或在當前視窗中開啟工作樹。

  • 在命令面板中執行 Git: Open Worktree in Current Window 或 Git: Open Worktree in New Window 命令，然後選擇所需的工作樹。

管理工作樹

所有檢測到的工作樹都顯示在“原始碼管理倉庫”檢視中，並按其父倉庫分組。

當你在列表中選擇一個工作樹時，“更改”檢視會顯示該工作樹的待處理更改。

要刪除一個工作樹，請在列表中右鍵單擊它，然後選擇刪除工作樹。或者，在命令面板中執行 Git: Delete Worktree 命令。

比較和遷移工作樹中的更改

當你在工作樹中進行更改時，你可以將這些更改與你的主工作區進行比較，並將工作樹的更改帶回到你的主倉庫中。

  1. 在原始碼管理檢視中，右鍵單擊工作樹中已更改的檔案，然後選擇與工作區比較，以並排檢視差異。

    Screenshot that shows the Compare with Workspace option in the context menu of a changed file in a worktree.

  2. 審查後，使用命令面板中的遷移工作樹更改...命令，將工作樹中的所有更改合併到你當前的工作區。

遠端倉庫

如果你的倉庫已連線到某個遠端倉庫，並且你檢出的分支與該遠端倉庫中的分支有上游連結，VS Code 會為你提供有用的操作來推送（push）、拉取（pull）和同步（sync）該分支（後者將執行一個pull命令，然後是一個push命令）。你可以在檢視和更多操作 ... 選單中找到這些操作，以及新增或移除遠端倉庫的選項。

VS Code 能夠定期從你的遠端倉庫獲取更改。這使得 VS Code 能夠顯示你的本地倉庫領先或落後遠端倉庫多少更改。此功能預設停用，你可以使用 git.autofetch 設定來啟用它。

提示

你應該設定一個憑證助手，以避免每次 VS Code 與你的 Git 遠端倉庫通訊時都被要求輸入憑證。如果你不這樣做，你可能需要考慮透過 git.autofetch 設定停用自動獲取，以減少你收到的提示次數。

原始碼管理圖

當你配置了遠端倉庫後，你可以看到你領先或落後遠端倉庫多少個提交。“原始碼管理”檢視中的圖表檢視以圖形方式顯示傳入和傳出的提交。

該圖包含當前分支、當前分支的上游分支以及一個可選的基礎分支。圖的根是這些分支的共同祖先。

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

該圖提供以下功能

  • 選擇一個條目以檢視該提交中更改的檔案。選擇開啟更改操作以在編輯器中檢視該提交的差異。
  • 右鍵單擊一個提交以執行操作，如檢出、揀選（cherry-pick）、將其新增為聊天上下文等。
  • 選擇一個檔案以在編輯器中檢視該檔案的差異。

使用圖表檢視工具欄中的操作來選擇分支、獲取、拉取、推送和同步更改。

Git 狀態列操作

噹噹前檢出的分支配置了上游分支時，狀態列中分支指示器旁邊會有一個同步更改操作。同步更改會將遠端更改拉取到你的本地倉庫，然後將本地提交推送到上游分支。

git status bar sync

如果沒有配置上游分支，並且 Git 倉庫已設定了遠端倉庫，則會啟用釋出操作。這將允許你將當前分支釋出到遠端倉庫。

git status bar publish

如果你的工作區包含多個 Git 倉庫，狀態列將顯示當前倉庫。當你選擇狀態列項時，你可以選擇哪個倉庫應該處於活動狀態的行為。

git status bar repo name

行號槽指示器

如果你開啟一個作為 Git 倉庫的資料夾並開始進行更改，VS Code 會在行號槽和概覽標尺上新增有用的註釋。

  • 紅色三角表示行被刪除
  • 綠色條表示新增的行
  • 藍色條表示修改過的行

Gutter indicators

合併衝突

Git merge

VS Code 能夠識別合併衝突。差異會被高亮顯示，並有內聯操作來接受其中一個或兩個更改。一旦衝突解決，暫存衝突檔案，以便你可以提交這些更改。

三路合併編輯器

為了幫助你解決合併衝突，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

提示

你可以透過首先在資源管理器檢視中右鍵單擊一個檔案並選擇選擇以進行比較，然後右鍵單擊要比較的第二個檔案並選擇與選定項比較來比較任意兩個檔案。或者，開啟命令面板 (⇧⌘P (Windows、Linux 為 Ctrl+Shift+P))，然後選擇任何檔案: 比較命令。瞭解更多關於在 VS Code 中比較檔案的不同選項。

無障礙差異檢視器

差異編輯器中有一個無障礙差異檢視器，它以統一的補丁格式呈現更改。你可以使用轉到下一個差異 (F7) 和轉到上一個差異 (⇧F7 (Windows、Linux 為 Shift+F7)) 在更改之間導航。可以使用箭頭鍵導航行，按 Enter 將跳回差異編輯器和所選行。

diff-review-pane

注意

這種體驗對螢幕閱讀器使用者尤其有幫助。

時間線檢視

時間線檢視，預設位於檔案資源管理器底部，是一個用於視覺化檔案時間序列事件（例如，Git 提交）的統一檢視。

Timeline view

VS Code 內建的 Git 支援提供了指定檔案的 Git 提交歷史。選擇一個提交將開啟該提交引入的更改的差異檢視。當你右鍵單擊一個提交時，你會得到複製提交 ID 和 複製提交資訊的選項。

Visual Studio Code 透過 VS Code Marketplace 上的擴充套件支援更多的 Git 歷史工作流程。

提示

點選擴充套件磁貼以在 Marketplace 中閱讀描述和評論。

Git 輸出視窗

你總是可以檢視底層，看看我們正在使用的 Git 命令。如果發生了一些奇怪的事情，或者你只是好奇，這會很有幫助。:)

要開啟 Git 輸出視窗，請執行檢視 > 輸出，然後從下拉列表中選擇 Log (Git)。

VS Code 作為 Git 編輯器

當你從命令列啟動 VS Code 時，可以傳遞 --wait 引數，使啟動命令等待直到你關閉新的 VS Code 例項。這在你將 VS Code 配置為 Git 外部編輯器時很有用，這樣 Git 會等待直到你關閉啟動的 VS Code 例項。

以下是操作步驟

  1. 確保你可以在命令列中執行 code --help 並得到幫助資訊。
    • 如果你沒有看到幫助資訊，請按照以下步驟操作
      • macOS: 從命令面板中選擇Shell 命令: 在 PATH 中安裝 '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 進行互動式變基
  • git commit 使用 VS Code 編寫提交資訊
  • git add -p 後跟 e 進行互動式新增
  • git difftool <commit>^ <commit> 使用 VS Code 作為更改的差異編輯器

處理 GitHub 拉取請求和議題

Visual Studio Code 還可以引入 GitHub 的拉取請求和議題。在 VS Code 中建立你的 PR，用評論進行審查，並在不切換上下文的情況下批准它們。瞭解更多關於在 VS Code 中處理 GitHub PR 和議題的資訊。

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

後續步驟

09/11/2025