🚀 在 VS Code 中免費取得

在 VS Code 中使用 GitHub

GitHub 是一個雲端服務,用於儲存和分享原始碼。在 Visual Studio Code 中使用 GitHub,您可以直接在編輯器中分享您的原始碼並與他人協作。與 GitHub 互動的方式有很多種,例如透過其網站 https://github.comGit 命令列介面 (CLI),但在 VS Code 中,豐富的 GitHub 整合是由 GitHub Pull Requests 和 Issues 擴充功能提供的。

安裝 GitHub Pull Requests 和 Issues 擴充功能

若要開始在 VS Code 中使用 GitHub,您需要安裝 Git建立 GitHub 帳戶,並安裝 GitHub Pull Requests 和 Issues 擴充功能。在本主題中,我們將示範如何在不離開 VS Code 的情況下使用您最喜歡的 GitHub 功能。

如果您是原始碼控制的新手,或想了解更多關於 VS Code 的基本 Git 支援,您可以從「原始碼控制」主題開始。

GitHub Pull Requests 和 Issues 入門

安裝 GitHub Pull Requests 和 Issues 擴充功能後,您需要登入。按照提示在瀏覽器中驗證 GitHub 身分,然後返回 VS Code。

Extension Sign In

如果您沒有被重新導向到 VS Code,您可以手動新增授權權杖。在瀏覽器視窗中,您將收到您的授權權杖。複製權杖,然後切換回 VS Code。在狀態列中選取 [正在登入 github.com...],貼上權杖,然後按下 Enter 鍵。

設定儲存庫

複製儲存庫

您可以使用命令面板中的 [Git: 複製] 命令 (⇧⌘P (Windows、Linux Ctrl+Shift+P)),或使用 [原始碼控制] 檢視中的 [複製儲存庫] 按鈕 (當您沒有開啟資料夾時可用),從 GitHub 搜尋和複製儲存庫。

Clone Repository button in the Source Control view

從 GitHub 儲存庫下拉式選單中,您可以篩選並選取您想要在本機複製的儲存庫。

GitHub repository dropdown filtered on microsoft/vscode

使用現有儲存庫進行驗證

當您在 VS Code 中執行任何需要 GitHub 驗證的 Git 動作時,例如推送至您是成員的儲存庫或複製私人儲存庫,就會啟用透過 GitHub 進行驗證。您不需要安裝任何特殊的擴充功能即可進行驗證;它已內建於 VS Code 中,讓您可以有效率地管理您的儲存庫。

當您執行需要 GitHub 驗證的操作時,您會看到登入提示

Authentication Prompt

按照步驟登入 GitHub 並返回 VS Code。僅 GitHub Enterprise Server 支援使用個人存取權杖 (PAT) 登入。如果您使用的是 GitHub Enterprise Server 且想要使用 PAT,您可以點擊登入提示中的「取消」,直到系統提示您輸入 PAT。

請注意,有多種方式可以驗證 GitHub 身分,包括使用您的使用者名稱和密碼搭配雙重驗證 (2FA)、個人存取權杖或 SSH 金鑰。請參閱「關於 GitHub 身分驗證」以取得更多資訊和每個選項的詳細資訊。

注意:如果您想要在不將內容複製到本機電腦的情況下處理儲存庫,您可以安裝 GitHub Repositories 擴充功能,直接在 GitHub 上瀏覽和編輯。您可以在下方的「GitHub Repositories 擴充功能」章節中了解更多資訊。

編輯器整合

懸停

當您開啟儲存庫且使用者被 @ 提及時,您可以將滑鼠懸停在該使用者名稱上,以查看 GitHub 風格的懸停效果。

User Hover

對於 # 提及的 Issue 編號、完整的 GitHub Issue URL 和儲存庫指定的 Issue,也有類似的懸停效果。

Issue Hover

建議

使用者建議由 "@" 字元觸發,而 Issue 建議由 "#" 字元觸發。建議在編輯器和 [原始碼控制] 檢視的輸入框中可用。

User and Issue suggestions

建議中顯示的 Issue 可以使用 githubIssues.queries 設定進行設定。查詢使用 GitHub 搜尋語法

您也可以使用 githubIssues.ignoreCompletionTrigger) 和 githubIssues.ignoreUserCompletionTrigger 設定,設定哪些檔案顯示這些建議。這些設定會採用語言識別碼陣列來指定檔案類型。

// Languages that the '#' character should not be used to trigger issue completion suggestions.
"githubIssues.ignoreCompletionTrigger": [
  "python"
]

Pull Requests (提取請求)

從 [Pull Requests] 檢視中,您可以檢視、管理和建立 Pull Requests。

Pull Request View

用於顯示 Pull Requests 的查詢可以使用 githubPullRequests.queries 設定進行設定,並使用 GitHub 搜尋語法

"githubPullRequests.queries": [
    {
        "label": "Assigned To Me",
        "query": "is:open assignee:${user}"
    },

建立 Pull Requests (提取請求)

將變更提交到您的 Fork 或分支後,您可以使用 [GitHub Pull Requests: 建立 Pull Request] 命令或 [Pull Requests] 檢視中的 [建立 Pull Request] 按鈕來建立 Pull Request。

Create Pull Request button in the Pull Request view

將顯示新的 [建立] 檢視,您可以在其中選取您希望 Pull Request 目標的基礎儲存庫和基礎分支,並填寫標題和描述。如果您的儲存庫有 Pull Request 範本,則會自動用於描述。

使用頂部動作列中的按鈕來新增 [指派對象]、[檢閱者]、[標籤] 和 [里程碑]。

Create Pull Request view

[建立] 按鈕選單可讓您選取替代的建立選項,例如 [建立草稿] 或啟用 [自動合併] 方法。

選取 [建立] 後,如果您尚未將分支推送至 GitHub 遠端,擴充功能會詢問您是否要發佈分支,並提供下拉式選單以選取特定的遠端。

[建立 Pull Request] 檢視現在進入 [檢閱模式],您可以在其中檢閱 PR 的詳細資訊、新增註解,並在 PR 準備就緒後合併 PR。合併 PR 後,您可以選擇刪除遠端和本機分支。

提示

使用 GitHub Copilot 根據 PR 中包含的提交來產生 PR 標題和描述。選取 PR 標題欄位旁邊的 *sparkle* 圖示,以產生 PR 標題和描述。

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

檢閱

Pull Requests 可以從 [Pull Requests] 檢視中檢閱。您可以從 Pull Request 的 [描述] 中指派檢閱者和標籤、新增註解、核准、關閉和合併所有內容。

Pull Request Description editor

從 [描述] 頁面,您也可以使用 [簽出] 按鈕輕鬆地在本機簽出 Pull Request。這會將 VS Code 切換為在 [檢閱模式] 中開啟 Pull Request 的 Fork 和分支 (在狀態列中可見),並新增 [Pull Request 中的變更] 檢視,您可以在其中檢視目前變更的差異,以及所有提交和這些提交中的變更。已註解的檔案會以菱形圖示裝飾。若要檢視磁碟上的檔案,您可以使用 [開啟檔案] 行內動作。

Changes in Pull Request view

此檢視中的差異編輯器使用本機檔案,因此檔案導覽、IntelliSense 和編輯功能皆可正常運作。您可以在編輯器中針對這些差異新增註解。支援新增單一註解和建立完整檢閱。

當您完成檢閱 Pull Request 變更後,您可以合併 PR 或選取 [結束檢閱模式] 以返回您先前正在處理的分支。

提示

您也可以讓 Copilot 在您建立 PR 之前執行程式碼檢閱。選取 GitHub Pull Request 檢視中的 [Copilot 程式碼檢閱] 按鈕。

Issues (議題)

建立 Issues (議題)

可以從 [Issues] 檢視中的 + 按鈕,以及使用 [GitHub Issues: 從選取範圍建立 Issue] 和 [GitHub Issues: 從剪貼簿建立 Issue] 命令來建立 Issue。它們也可以使用 "TODO" 註解的程式碼動作來建立。建立 Issue 時,您可以採用預設描述,或選取右上角的 [編輯描述] 鉛筆圖示以開啟 Issue 本文的編輯器。

Create Issue from TODO

您可以使用 githubIssues.createIssueTriggers 設定來設定程式碼動作的觸發字元。

預設 Issue 觸發字元為

"githubIssues.createIssueTriggers": [
  "TODO",
  "todo",
  "BUG",
  "FIXME",
  "ISSUE",
  "HACK"
]

處理 Issues (議題)

從 [Issues] 檢視中,您可以查看您的 Issue 並處理它們。

Issue view with hover

預設情況下,當您開始處理 Issue (「開始處理 Issue」內容選單項目) 時,會為您建立一個分支,如下圖狀態列所示。

Work on Issue

狀態列也會顯示作用中的 Issue,如果您選取該項目,則會顯示 Issue 動作清單,例如在 GitHub 網站上開啟 Issue 或建立 Pull Request。

Issue Status bar actions

您可以使用 githubIssues.issueBranchTitle 設定來設定分支名稱。如果您的工作流程不涉及建立分支,或者您希望每次都提示您輸入分支名稱,您可以關閉 githubIssues.useBranchForIssues 設定來跳過該步驟。

當您完成 Issue 的處理並想要提交變更時,[原始碼控制] 檢視中的提交訊息輸入框將會填入訊息,該訊息可以使用 githubIssues.workingIssueFormatScm 進行設定。

GitHub Repositories 擴充功能

GitHub Repositories 擴充功能可讓您直接從 Visual Studio Code 快速瀏覽、搜尋、編輯和提交至任何遠端 GitHub 儲存庫,而無需在本機複製儲存庫。對於許多只需要檢閱原始碼或對檔案或資產進行小幅變更的情況來說,這可能快速且方便。

GitHub Repositories extension

開啟儲存庫

安裝 GitHub Repositories 擴充功能後,您可以使用命令面板中的 [GitHub Repositories: 開啟儲存庫...] 命令 (⇧⌘P (Windows、Linux Ctrl+Shift+P)),或按一下狀態列左下角的 [遠端] 指示器來開啟儲存庫。

Remote indicator in the Status bar

當您執行 [開啟儲存庫] 命令時,您可以選擇從 GitHub 開啟儲存庫、從 GitHub 開啟 Pull Request,或重新開啟您先前連線的儲存庫。

如果您之前未從 VS Code 登入 GitHub,系統會提示您驗證您的 GitHub 帳戶。

GitHub Repository extension open repository dropdown

您可以直接提供儲存庫 URL,或在文字方塊中輸入以在 GitHub 上搜尋您想要的儲存庫。

選取儲存庫或 Pull Request 後,VS Code 視窗將會重新載入,您將在檔案總管中看到儲存庫內容。然後,您可以開啟檔案 (具有完整的語法醒目提示和括號比對)、進行編輯和提交變更,就像在本機複製的儲存庫上工作一樣。

與使用本機儲存庫工作的一個差異是,當您使用 GitHub Repository 擴充功能提交變更時,變更會直接推送至遠端儲存庫,類似於您在 GitHub 網頁介面中工作。

GitHub Repositories 擴充功能的另一個功能是,每次您開啟儲存庫或分支時,都會從 GitHub 取得最新的來源。您不需要像使用本機儲存庫一樣記住提取以重新整理。

GitHub Repositories 擴充功能支援檢視甚至提交 LFS 追蹤的檔案,而無需在本機安裝 Git LFS (大型檔案系統)。將您想要使用 LFS 追蹤的檔案類型新增至 .gitattributes 檔案,然後使用 [原始碼控制] 檢視直接將變更提交至 GitHub。

切換分支

您可以透過按一下狀態列中的分支指示器,輕鬆地在分支之間切換。GitHub Repositories 擴充功能的一個很棒的功能是,您可以切換分支,而無需暫存未提交的變更。擴充功能會記住您的變更,並在您切換分支時重新套用它們。

Branch indicator on the Status bar

遠端瀏覽器

您可以使用活動列上提供的 [遠端瀏覽器] 快速重新開啟遠端儲存庫。此檢視會顯示您先前開啟的儲存庫和分支。

Remote Explorer view

建立 Pull Requests (提取請求)

如果您的工作流程使用 Pull Requests,而不是直接提交至儲存庫,您可以從 [原始碼控制] 檢視建立新的 PR。系統會提示您提供標題並建立新的分支。

Create a Pull Request button in the Source Control view

建立 Pull Request 後,您可以使用 GitHub Pull Request 和 Issues 擴充功能來檢閱、編輯和合併您的 PR,如本主題稍早所述

虛擬檔案系統

在本機電腦上沒有儲存庫檔案的情況下,GitHub Repositories 擴充功能會在記憶體中建立虛擬檔案系統,讓您可以檢視檔案內容並進行編輯。使用虛擬檔案系統表示某些假設本機檔案的操作和擴充功能未啟用或功能有限。工作、偵錯和整合式終端機等功能未啟用,您可以透過 [遠端] 指示器懸停中的 [功能不可用] 連結,了解虛擬檔案系統的支援程度。

Remote indicator hover with features are not available link

擴充功能作者可以在「虛擬工作區擴充功能作者指南」中了解更多關於在虛擬檔案系統和工作區中執行的資訊。

繼續在...上工作

有時您會想要切換到在支援本機檔案系統和完整語言與開發工具的開發環境中處理儲存庫。GitHub Repositories 擴充功能讓您可以輕鬆地

若要切換開發環境,請使用 [繼續在...上工作] 命令,可從命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 或按一下狀態列中的 [遠端] 指示器取得。

Continue Working On command in Remote dropdown

如果您使用的是瀏覽器型編輯器,[繼續在...上工作] 命令具有在本機或 GitHub Codespaces 中的雲端託管環境中開啟儲存庫的選項。

Continue Working On from web-based editor

第一次使用 [繼續在...上工作] 且有未提交的變更時,您可以選擇使用 [雲端變更] 將您的編輯帶到您選取的開發環境,[雲端變更] 會將您的擱置變更儲存在與設定同步使用的相同 VS Code 服務上。

這些變更在套用至您的目標開發環境後,會從我們的服務中刪除。如果您選擇在沒有未提交變更的情況下繼續,您可以隨時透過設定 "workbench.cloudChanges.continueOn": "prompt" 來變更此偏好設定。

如果您的擱置變更未自動套用至您的目標開發環境,您可以使用 [雲端變更: 顯示雲端變更] 命令來檢視、管理和刪除您儲存的變更。

後續步驟