在 VS Code 中使用 GitHub
GitHub 是一種雲端服務,用於儲存和共用原始碼。將 GitHub 與 Visual Studio Code 搭配使用,可讓您在編輯器中直接共用原始碼並與他人協作。與 GitHub 互動的方式有很多種,例如透過他們的網站 https://github.com 或 Git 命令列介面 (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。
如果您未重新導向至 VS Code,您可以手動新增授權權杖。在瀏覽器視窗中,您將收到您的授權權杖。複製權杖,然後切換回 VS Code。在狀態列中選取 [正在登入 github.com...],貼上權杖,然後按下 Enter。
設定儲存庫
複製儲存庫
您可以使用命令面板中的 [Git: 複製] 命令 (⇧⌘P (Windows、Linux Ctrl+Shift+P)),或使用原始檔控制檢視中的 [複製儲存庫] 按鈕 (當您未開啟任何資料夾時可用),從 GitHub 搜尋並複製儲存庫。
從 GitHub 儲存庫下拉式清單中,您可以篩選並選取您想要在本機複製的儲存庫。
使用現有儲存庫進行驗證
當您在 VS Code 中執行任何需要 GitHub 驗證的 Git 動作時,例如推送至您是成員的儲存庫或複製私有儲存庫時,就會啟用透過 GitHub 進行驗證。您不需要安裝任何特殊的擴充功能即可進行驗證;它已內建於 VS Code 中,讓您可以有效率地管理儲存庫。
當您執行需要 GitHub 驗證的操作時,您會看到登入提示
依照步驟登入 GitHub 並返回 VS Code。僅 GitHub Enterprise Server 支援使用個人存取權杖 (PAT) 登入。如果您使用的是 GitHub Enterprise Server 且想要使用 PAT,您可以點擊登入提示上的 [取消],直到系統提示您輸入 PAT 為止。
請注意,有多種方式可以驗證 GitHub,包括使用您的使用者名稱和密碼搭配雙因素驗證 (2FA)、個人存取權杖或 SSH 金鑰。請參閱 關於 GitHub 驗證 以取得更多資訊和每個選項的詳細資訊。
注意:如果您想要在不將內容複製到本機電腦的情況下處理儲存庫,您可以安裝 GitHub Repositories 擴充功能,以直接在 GitHub 上瀏覽和編輯。您可以在下方的 GitHub Repositories 擴充功能 章節中瞭解更多資訊。
編輯器整合
浮動提示
當您開啟儲存庫且有使用者被 @ 提及時,您可以將滑鼠游標停留在該使用者名稱上方,以查看 GitHub 樣式的浮動提示。
對於 # 提及的問題編號、完整的 GitHub 問題 URL 和儲存庫指定的 issue,也有類似的浮動提示。
建議
使用者建議由 "@" 字元觸發,問題建議由 "#" 字元觸發。建議在編輯器和 [原始檔控制] 檢視的輸入方塊中可用。
建議中出現的問題可以使用 [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"
]
提取要求
您可以從 [提取要求] 檢視中檢視、管理和建立提取要求。
用於顯示提取要求的查詢可以使用 [GitHub Pull Requests: 查詢] (githubPullRequests.queries) 設定進行設定,並使用 GitHub 搜尋語法。
"githubPullRequests.queries": [
{
"label": "Assigned To Me",
"query": "is:open assignee:${user}"
},
建立提取要求
將變更提交至您的 fork 或分支後,您可以使用 [GitHub Pull Requests: 建立提取要求] 命令或 [提取要求] 檢視中的 [建立提取要求] 按鈕來建立提取要求。
將顯示新的 [建立] 檢視,您可以在其中選取您希望提取要求以哪個基底儲存庫和基底分支為目標,並填寫標題和描述。如果您的儲存庫有提取要求範本,則會自動用於描述。
使用頂部動作列中的按鈕來新增 [受託人]、[檢閱者]、[標籤] 和 [里程碑]。
[建立] 按鈕選單可讓您選取其他建立選項,例如 [建立草稿] 或啟用 [自動合併] 方法。
選取 [建立] 後,如果您尚未將分支推送至 GitHub 遠端,擴充功能會詢問您是否要發佈分支,並提供下拉式清單以選取特定遠端。
[建立提取要求] 檢視現在進入 [檢閱模式],您可以在其中檢閱 PR 的詳細資訊、新增註解,並在 PR 準備就緒後合併 PR。PR 合併後,您可以選擇刪除遠端和本機分支。
使用 GitHub Copilot 根據 PR 中包含的提交產生 PR 標題和描述。選取 PR 標題欄位旁邊的火花圖示,以產生 PR 標題和描述。
檢閱
可以從 [提取要求] 檢視中檢閱提取要求。您可以從提取要求 [描述] 中指派檢閱者和標籤、新增註解、核准、關閉和合併所有項目。
從 [描述] 頁面,您也可以使用 [簽出] 按鈕在本機輕鬆簽出提取要求。這會將 VS Code 切換為在檢閱模式中開啟提取要求的 fork 和分支 (在狀態列中可見),並新增一個新的 [提取要求中的變更] 檢視,您可以在其中檢視目前變更的差異,以及所有提交和這些提交中的變更。已加上註解的檔案會以菱形圖示裝飾。若要在磁碟上檢視檔案,您可以使用 [開啟檔案] 行內動作。
此檢視中的差異編輯器使用本機檔案,因此檔案導覽、IntelliSense 和編輯功能都可正常運作。您可以在這些差異的編輯器中新增註解。支援新增單一註解和建立完整檢閱。
當您完成檢閱提取要求變更時,您可以合併 PR 或選取 [結束檢閱模式] 以返回您先前正在處理的分支。
您也可以在建立 PR 之前,讓 Copilot 執行 PR 的程式碼檢閱。在 GitHub 提取要求檢視中選取 [Copilot 程式碼檢閱] 按鈕。
問題
建立問題
可以使用 [問題] 檢視中的 [+] 按鈕,以及使用 [GitHub Issues: 從選取範圍建立問題] 和 [GitHub Issues: 從剪貼簿建立問題] 命令來建立問題。也可以使用 "TODO" 註解的程式碼動作來建立問題。建立問題時,您可以採用預設描述,或選取右上角的 [編輯描述] 鉛筆圖示,以開啟問題內文的編輯器。
您可以使用 [GitHub Issues: 建立問題觸發字元] (githubIssues.createIssueTriggers) 設定,設定程式碼動作的觸發字元。
預設問題觸發字元為
"githubIssues.createIssueTriggers": [
"TODO",
"todo",
"BUG",
"FIXME",
"ISSUE",
"HACK"
]
處理問題
您可以從 [問題] 檢視中查看您的問題並加以處理。
預設情況下,當您開始處理問題 ([開始處理問題] 內容選單項目) 時,會為您建立一個分支,如下圖狀態列所示。
狀態列也會顯示作用中問題,如果您選取該項目,則會提供問題動作清單,例如在 GitHub 網站上開啟問題或建立提取要求。
您可以使用 [GitHub Issues: 問題分支標題] (githubIssues.issueBranchTitle) 設定,設定分支的名稱。如果您的工作流程不涉及建立分支,或者您希望每次都提示您輸入分支名稱,您可以關閉 [GitHub Issues: 將分支用於問題] (githubIssues.useBranchForIssues) 設定,以略過該步驟。
完成問題處理並想要提交變更後,[原始檔控制] 檢視中的提交訊息輸入方塊將會填入訊息,該訊息可以使用 [GitHub Issues: 工作中問題格式 SCM] (githubIssues.workingIssueFormatScm) 進行設定。
GitHub Repositories 擴充功能
GitHub Repositories 擴充功能可讓您直接從 Visual Studio Code 內快速瀏覽、搜尋、編輯和提交至任何遠端 GitHub 儲存庫,而無需在本機複製儲存庫。對於許多只需要檢閱原始碼或對檔案或資產進行少量變更的情況來說,這可能既快速又方便。
開啟儲存庫
安裝 GitHub Repositories 擴充功能後,您可以使用命令面板中的 [GitHub Repositories: 開啟儲存庫...] 命令 (⇧⌘P (Windows、Linux Ctrl+Shift+P)),或按一下狀態列左下角的遠端指示器來開啟儲存庫。
當您執行 [開啟儲存庫] 命令時,您可以選擇從 GitHub 開啟儲存庫、從 GitHub 開啟提取要求,或重新開啟您先前連線的儲存庫。
如果您之前未從 VS Code 登入 GitHub,系統會提示您使用 GitHub 帳戶進行驗證。
您可以直接提供儲存庫 URL,或在文字方塊中輸入以在 GitHub 上搜尋您想要的儲存庫。
選取儲存庫或提取要求後,VS Code 視窗將重新載入,您將在檔案總管中看到儲存庫內容。然後,您可以開啟檔案 (具有完整的語法醒目提示和括號比對)、進行編輯和提交變更,就像您在本機複製的儲存庫上工作一樣。
與使用本機儲存庫工作的一個不同之處在於,當您使用 GitHub Repository 擴充功能提交變更時,變更會直接推送至遠端儲存庫,類似於您在 GitHub Web 介面中工作的情況。
GitHub Repositories 擴充功能的另一個功能是,每次您開啟儲存庫或分支時,都會從 GitHub 取得最新的來源。您無需像使用本機儲存庫一樣記住提取以重新整理。
GitHub Repositories 擴充功能支援檢視甚至提交 LFS 追蹤的檔案,而無需在本機安裝 Git LFS (大型檔案系統)。將您想要使用 LFS 追蹤的檔案類型新增至 .gitattributes
檔案,然後使用原始檔控制檢視將您的變更直接提交至 GitHub。
切換分支
您可以按一下狀態列中的分支指示器,輕鬆地在分支之間切換。GitHub Repositories 擴充功能的一個很棒的功能是,您可以在無需暫存未提交變更的情況下切換分支。擴充功能會記住您的變更,並在您切換分支時重新套用它們。
遠端總管
您可以使用活動列上的遠端總管快速重新開啟遠端儲存庫。此檢視會顯示您先前開啟的儲存庫和分支。
建立提取要求
如果您的工作流程使用提取要求,而不是直接提交至儲存庫,您可以從原始檔控制檢視建立新的 PR。系統會提示您提供標題並建立新的分支。
建立提取要求後,您可以使用 GitHub Pull Request and Issues 擴充功能來檢閱、編輯和合併您的 PR,如本主題稍早的 說明。
虛擬檔案系統
在您的本機電腦上沒有儲存庫檔案的情況下,GitHub Repositories 擴充功能會在記憶體中建立虛擬檔案系統,讓您可以檢視檔案內容並進行編輯。使用虛擬檔案系統表示某些假設本機檔案的操作和擴充功能無法啟用或功能有限。工作、偵錯和整合式終端機等功能無法啟用,您可以透過遠端指示器浮動提示中的 [功能無法使用] 連結,瞭解虛擬檔案系統的支援層級。
擴充功能作者可以在 虛擬工作區擴充功能作者指南 中瞭解更多關於在虛擬檔案系統和工作區中執行的資訊。
繼續在...上工作
有時您會想要切換到在開發環境中處理儲存庫,該環境支援本機檔案系統以及完整的語言和開發工具。GitHub Repositories 擴充功能可讓您輕鬆地
- 建立 GitHub codespace (如果您有 GitHub Codespaces 擴充功能)。
- 在本機複製儲存庫。
- 將儲存庫複製到 Docker 容器 (如果您有 Docker 和 Microsoft Docker 擴充功能)。
若要切換開發環境,請使用 [繼續在...上工作] 命令,該命令可從命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 或按一下狀態列中的遠端指示器取得。
如果您使用的是 以瀏覽器為基礎的編輯器,[「繼續在...上工作」] 命令具有在本機或雲端託管環境中 GitHub Codespaces 中開啟儲存庫的選項。
當您第一次使用 [繼續在...上工作] 且有未提交的變更時,您可以選擇使用 [雲端變更] 將您的編輯帶到您選取的開發環境,這會將您的擱置變更儲存在用於設定同步的相同 VS Code 服務上。
這些變更會在套用至您的目標開發環境後,從我們的服務中刪除。如果您選擇在沒有未提交變更的情況下繼續,您可以隨時透過設定 "workbench.cloudChanges.continueOn": "prompt"
來變更此偏好設定。
如果您的擱置變更未自動套用至您的目標開發環境,您可以使用 [雲端變更: 顯示雲端變更] 命令來檢視、管理和刪除您儲存的變更。
後續步驟
- 深入瞭解 Copilot VS Code - 瞭解 VS Code 中的 Copilot。