在 VS Code 中使用 GitHub

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

在本主題中,我們將示範如何在不離開 VS Code 的情況下使用您最喜愛的 GitHub 功能。

提示

如果您對原始碼控制還不熟悉,或想進一步了解 VS Code 的基本 Git 支援,可以從原始碼控制主題開始。

先決條件

若要開始在 VS Code 中使用 GitHub,您需要具備以下條件:

  • 電腦已安裝 Git。請在您的機器上安裝 Git 2.0.0 或更新版本

  • 一個 GitHub 帳戶

  • 在 VS Code 中安裝 GitHub Pull Requests and Issues 擴充功能。

  • 當您提交變更時,Git 會使用您設定的使用者名稱和電子郵件。您可以透過以下方式設定這些值:

    git config --global user.name "Your Name"
    git config --global user.email "your.email@example.com"
    

GitHub Pull Requests 與 Issues 入門

安裝完 GitHub Pull Requests and Issues 擴充功能後,您需要登入。

  1. 選取活動列中的 GitHub 圖示

  2. 選取 Sign In 並依照提示在瀏覽器中進行 GitHub 驗證

    Screenshot of the GitHub view, showing the sign in button.

  3. 您應該會被重新導向回 VS Code

如果沒有自動重新導向至 VS Code,您可以手動新增授權權杖

  1. 在瀏覽器視窗中複製您的授權權杖
  2. 在 VS Code 中,選取狀態列中的 Signing in to github.com...
  3. 貼上權杖並按下 Enter 以完成登入程序

設定儲存庫

複製儲存庫

您可以使用命令選擇區 (⇧⌘P (Windows、Linux 需按 Ctrl+Shift+P)) 中的 Git: Clone 命令來搜尋並複製 GitHub 上的儲存庫,或是使用「原始碼控制」檢視中的 Clone Repository 按鈕 (當您未開啟任何資料夾時可用)。

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

Screenshot showing the GitHub repository Quick Pick filtered on microsoft/vscode.

進一步了解複製儲存庫與使用遠端儲存庫

使用現有的儲存庫進行驗證

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

當您執行需要 GitHub 驗證的動作時,VS Code 會提示您登入。請依照步驟登入 GitHub 並返回 VS Code。

Screenshot showing the GitHub authentication dialog.

透過個人存取權杖 (PAT) 登入僅支援 GitHub Enterprise Server。如果您使用的是 GitHub Enterprise Server 且想要使用 PAT,可以在登入提示中選取取消 (Cancel),直到出現輸入 PAT 的提示為止。

請注意,向 GitHub 進行驗證有幾種方式,包括使用使用者名稱和密碼配合雙因素驗證 (2FA)、個人存取權杖或 SSH 金鑰。請參閱關於 GitHub 驗證以取得更多資訊和各選項的詳細資料。

注意

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

編輯器整合

懸停提示(Hovers)

當您開啟儲存庫且有人遭到 @ 提及(例如在程式碼註解中)時,您可以將滑鼠游標懸停在該使用者名稱上,即可看到顯示使用者詳細資料的 GitHub 風格懸停提示。

Screenshot showing a user hover for a @-mentioned user in a code comment.

對於以 # 提及的 Issue 編號、完整的 GitHub Issue 網址以及儲存庫指定的 Issue,也有類似的懸停提示。

Screenshot showing a hover for a #-mentioned issue number in a code comment.

建議

輸入「@」字元會觸發使用者建議,輸入「#」字元則會觸發 Issue 建議。這些建議可在編輯器以及「原始碼控制」提交訊息輸入方塊中使用。

GIF showing User and Issue suggestions in the editor.

出現在建議中的 Issue 可以透過 GitHub Issues: Queries ( githubIssues.queries 在 VS Code 中開啟 在 VS Code Insiders 中開啟 ) 設定進行設定。這些查詢會使用 GitHub 搜尋語法

您也可以使用 GitHub Issues: Ignore Completion Trigger ( githubIssues.ignoreCompletionTrigger 在 VS Code 中開啟 在 VS Code Insiders 中開啟 ) 與 GitHub Issues: Ignore User Completion Trigger ( githubIssues.ignoreUserCompletionTrigger 在 VS Code 中開啟 在 VS Code Insiders 中開啟 ) 設定來設定哪些檔案類型要顯示這些建議。這些設定接受一組語言識別項來指定檔案類型。

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

提取要求 (Pull requests)

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

Screenshot showing the Pull Request view.

用來顯示 Pull Requests 的查詢可以使用 GitHub Pull Requests: Queries ( githubPullRequests.queries 在 VS Code 中開啟 在 VS Code Insiders 中開啟 ) 設定來設定,並且會使用 GitHub 搜尋語法

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

建立 Pull Requests

當您將變更提交至您的分岔 (Fork) 或分支後,您可以使用 GitHub Pull Requests: Create Pull Request 命令,或 Pull Requests 檢視中的 Create Pull Request 按鈕來建立 Pull Request。

Screenshot showing the Create Pull Request button in the Pull Request view.

系統會顯示一個新的 Create 檢視,您可以在其中選取 Pull Request 要針對的基礎儲存庫與基礎分支,並填寫標題與描述。如果您的儲存庫包含 Pull Request 範本,系統會自動將其用於描述。

使用上方動作列中的按鈕來新增 Assignees (指派人員)、Reviewers (審查人員)、Labels (標籤) 與 Milestone (里程碑)。

Screenshot showing the Create Pull Request view.

Create 按鈕功能表允許您選取其他建立選項,例如 Create Draft (建立草稿) 或啟用 Auto-Merge (自動合併) 方法。

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

Create Pull Request 檢視現在會進入 Review Mode (審查模式),您可以在其中檢閱 PR 的詳細資料、新增註解,並在 PR 準備好時進行合併。合併 PR 後,您將可以選擇刪除遠端和本機分支。

提示

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

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

審查

可以從 Pull Requests 檢視中審查 Pull Requests。您可以指派審查人員與標籤、新增註解、核准、關閉以及合併,這一切都可以直接在 Pull Request Description (描述) 中完成。

Pull Request Description editor

Description 頁面中,您也可以使用 Checkout 按鈕輕鬆地在本機簽出 (Checkout) 該 Pull Request。這會將 VS Code 切換為在審查模式下開啟該 Pull Request 的分岔與分支(顯示在狀態列中),並新增一個 Changes in Pull Request 檢視,您可以從中檢視目前變更的差異 (Diffs)、所有提交以及這些提交中的變更。已被加上註解的檔案會標示菱形圖示。若要檢視磁碟上的檔案,您可以使用 Open File 內嵌動作。

Changes in Pull Request view

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

當您完成 Pull Request 變更的審查後,可以合併該 PR,或選取 Exit Review Mode (結束審查模式) 返回您之前正在處理的分支。

提示

您也可以在建立 PR 之前,使用 AI 對 PR 進行程式碼審查。請在 GitHub Pull Request 檢視中選取 Code Review 按鈕。

Issues

建立 Issue

可以從 Issues 檢視中的 + 按鈕,以及透過 GitHub Issues: Create Issue from SelectionGitHub Issues: Create Issue from Clipboard 命令來建立 Issue。它們也可以使用針對 "TODO" 註解的程式碼動作 (Code Action) 來建立。建立 Issue 時,您可以使用預設描述,或是選取右上角的 Edit Description 鉛筆圖示來叫出 Issue 本文的編輯器。

Create Issue from TODO

您可以使用 GitHub Issues: Create Issue Triggers ( githubIssues.createIssueTriggers 在 VS Code 中開啟 在 VS Code Insiders 中開啟 ) 設定來設定程式碼動作的觸發條件。

預設的 Issue 觸發條件為:

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

處理 Issue

Issues 檢視中,您可以查看您的 Issue 並進行處理。

Issue view with hover

根據預設,當您開始處理 Issue(Start Working on Issue 快顯功能表項目)時,系統會為您建立一個分支,如下圖中的狀態列所示。

Work on Issue

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

Issue Status Bar actions

您可以使用 GitHub Issues: Issue Branch Title ( githubIssues.issueBranchTitle 在 VS Code 中開啟 在 VS Code Insiders 中開啟 ) 設定來設定分支的名稱。如果您的工作流程不涉及建立分支,或者如果您希望每次都提示輸入分支名稱,可以透過關閉 GitHub Issues: Use Branch For Issues ( githubIssues.useBranchForIssues 在 VS Code 中開啟 在 VS Code Insiders 中開啟 ) 設定來略過該步驟。

提示

進一步了解處理分支,以了解分支管理、在分支之間切換以及組織您的開發工作。

當您完成 Issue 的處理並想要提交變更時,Source Control 檢視中的提交訊息輸入方塊將會自動填入一段訊息,這段訊息可以透過 GitHub Issues: Working Issue Format SCM ( githubIssues.workingIssueFormatScm 在 VS Code 中開啟 在 VS Code Insiders 中開啟 ) 進行設定。

GitHub Repositories 擴充功能

GitHub Repositories 擴充功能讓您可以直接在 Visual Studio Code 內快速瀏覽、搜尋、編輯任何遠端 GitHub 儲存庫並提交至該儲存庫,而不需要在本機複製儲存庫。對於許多只需要檢閱原始程式碼或對檔案或資產進行小幅修改的情境而言,這會非常快速且方便。

GitHub Repositories extension

開啟儲存庫

安裝 GitHub Repositories 擴充功能後,您可以使用命令選擇區 (⇧⌘P (Windows、Linux 需按 Ctrl+Shift+P)) 中的 GitHub Repositories: Open Repository... 命令來開啟儲存庫,或是按一下狀態列左下角的「遠端 (Remote)」指示器。

Remote indicator in the Status Bar

當您執行 Open Repository 命令時,您可以選擇是從 GitHub 開啟儲存庫、從 GitHub 開啟 Pull Request,還是重新開啟您先前連線過的儲存庫。

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

GitHub Repository extension open repository dropdown

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

選取儲存庫或 Pull Request 後,VS Code 視窗將會重新載入,您將會在檔案總管中看到儲存庫內容。接著,您可以開啟檔案(具備完整的語法突顯和括號對應)、進行編輯並提交變更,就像處理本機複製的儲存庫一樣。

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

GitHub Repositories 擴充功能的另一項特色是,每次您開啟儲存庫或分支時,都會取得 GitHub 上可用的最新原始程式碼。您不需要像處理本機儲存庫那樣記得執行 pull 來重新整理。

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

切換分支

您可以按一下狀態列中的分支指示器來輕鬆切換分支。GitHub Repositories 擴充功能的其中一項優異功能是,您不需要儲存 (Stash) 未提交的變更即可切換分支。擴充功能會記住您的變更,並在您切換分支時重新套用它們。

Branch indicator on the Status Bar

遠端總管

您可以使用活動列上提供的「遠端總管 (Remote Explorer)」快速重新開啟遠端儲存庫。這個檢視會向您顯示先前開啟過的儲存庫與分支。

Remote Explorer view

建立 Pull Requests

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

Create a Pull Request button in the Source Control view

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

虛擬檔案系統

由於本機電腦上沒有儲存庫的檔案,GitHub Repositories 擴充功能會在記憶體中建立虛擬檔案系統,以便您檢視檔案內容並進行編輯。使用虛擬檔案系統意味著某些假設存在本機檔案的操作和擴充功能將不會啟用,或是功能受限。諸如工作 (Tasks)、偵錯和整合終端機等功能將不會啟用,您可以透過遠端指示器懸停提示中的 features are not available 連結,來了解虛擬檔案系統的支援層級。

Remote indicator hover with features are not available link

擴充功能作者可以在 Virtual Workspaces extension author's guide 中深入了解如何在虛擬檔案系統和工作區中執行。

繼續處理

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

若要切換開發環境,請使用命令選擇區 (⇧⌘P (Windows、Linux 需按 Ctrl+Shift+P)) 中提供的 Continue Working On 命令,或是按一下狀態列中的遠端指示器。

Continue Working On command in Remote dropdown

如果您使用的是瀏覽器型編輯器"Continue Working On" 命令會提供選項,讓您在本機或在 GitHub Codespaces 的雲端主機環境中開啟儲存庫。

Continue Working On from web-based editor

第一次在有未提交變更的情況下使用 Continue Working On 時,您可以選擇使用 Cloud Changes 將您的編輯帶入所選的開發環境中,這會將您的暫停變更儲存在用於「設定同步 (Settings Sync)」的相同 VS Code 服務上。

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

萬一您的暫停變更沒有自動套用到目標開發環境,您可以使用 Cloud Changes: Show Cloud Changes 命令來檢視、管理和刪除您儲存的變更。

後續步驟

English 한국어 中文(简体) 中文(繁體)
© . This website operates independently and is not affiliated with or endorsed by Microsoft. All brand names, logos, and trademarks are the property of their respective owners.