🚀 在 VS Code 中免費取得

在 VS Code 中使用 GitHub

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

安裝 GitHub Pull Requests and Issues 擴充功能

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

如果您是原始檔控制的新手,或想進一步瞭解 VS Code 的基本 Git 支援,您可以從 原始檔控制 主題開始。

GitHub Pull Requests 和 Issues 入門

安裝 GitHub Pull Requests and 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

對於 # 提及的問題編號、完整的 GitHub 問題 URL 和儲存庫指定的 issue,也有類似的浮動提示。

Issue Hover

建議

使用者建議由 "@" 字元觸發,問題建議由 "#" 字元觸發。建議在編輯器和 [原始檔控制] 檢視的輸入方塊中可用。

User and Issue suggestions

建議中出現的問題可以使用 [GitHub Issues: 查詢] (githubIssues.queries) 設定 進行設定。查詢使用 GitHub 搜尋語法

您也可以使用 [GitHub Issues: 忽略完成觸發字元] (githubIssues.ignoreCompletionTrigger) 和 [GitHub Issues: 忽略使用者完成觸發字元] (githubIssues.ignoreUserCompletionTrigger) 設定,設定哪些檔案顯示這些建議。這些設定採用 語言識別碼 陣列,以指定檔案類型。

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

提取要求

您可以從 [提取要求] 檢視中檢視、管理和建立提取要求。

Pull Request View

用於顯示提取要求的查詢可以使用 [GitHub Pull Requests: 查詢] (githubPullRequests.queries) 設定進行設定,並使用 GitHub 搜尋語法

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

建立提取要求

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

Create Pull Request button in the Pull Request view

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

使用頂部動作列中的按鈕來新增 [受託人]、[檢閱者]、[標籤] 和 [里程碑]。

Create Pull Request view

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

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

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

提示

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

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

檢閱

可以從 [提取要求] 檢視中檢閱提取要求。您可以從提取要求 [描述] 中指派檢閱者和標籤、新增註解、核准、關閉和合併所有項目。

Pull Request Description editor

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

Changes in Pull Request view

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

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

提示

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

問題

建立問題

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

Create Issue from TODO

您可以使用 [GitHub Issues: 建立問題觸發字元] (githubIssues.createIssueTriggers) 設定,設定程式碼動作的觸發字元。

預設問題觸發字元為

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

處理問題

您可以從 [問題] 檢視中查看您的問題並加以處理。

Issue view with hover

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

Work on Issue

狀態列也會顯示作用中問題,如果您選取該項目,則會提供問題動作清單,例如在 GitHub 網站上開啟問題或建立提取要求。

Issue Status bar actions

您可以使用 [GitHub Issues: 問題分支標題] (githubIssues.issueBranchTitle) 設定,設定分支的名稱。如果您的工作流程不涉及建立分支,或者您希望每次都提示您輸入分支名稱,您可以關閉 [GitHub Issues: 將分支用於問題] (githubIssues.useBranchForIssues) 設定,以略過該步驟。

完成問題處理並想要提交變更後,[原始檔控制] 檢視中的提交訊息輸入方塊將會填入訊息,該訊息可以使用 [GitHub Issues: 工作中問題格式 SCM] (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 開啟提取要求,或重新開啟您先前連線的儲存庫。

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

GitHub Repository extension open repository dropdown

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

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

與使用本機儲存庫工作的一個不同之處在於,當您使用 GitHub Repository 擴充功能提交變更時,變更會直接推送至遠端儲存庫,類似於您在 GitHub Web 介面中工作的情況。

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

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

切換分支

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

Branch indicator on the Status bar

遠端總管

您可以使用活動列上的遠端總管快速重新開啟遠端儲存庫。此檢視會顯示您先前開啟的儲存庫和分支。

Remote Explorer view

建立提取要求

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

Create a Pull Request button in the Source Control view

建立提取要求後,您可以使用 GitHub Pull Request and 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" 來變更此偏好設定。

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

後續步驟