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

在 VS Code 中使用 GitHub

GitHub 是一個用於儲存和共享原始碼的雲服務。在 Visual Studio Code 中使用 GitHub,你可以直接在編輯器內分享原始碼並與他人協作。與 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 and Issues

安裝 GitHub Pull Requests and Issues 擴充套件後,你需要登入。按照提示在瀏覽器中完成 GitHub 身份驗證,然後返回 VS Code。

Extension Sign In

如果你沒有被重定向回 VS Code,可以手動新增你的授權令牌。在瀏覽器視窗中,你會收到你的授權令牌。複製該令牌,然後切換回 VS Code。在狀態列中選擇 Signing in to github.com...,貼上令牌,然後按 Enter 鍵。

設定倉庫

克隆倉庫

你可以在命令面板(⇧⌘P (Windows, Linux Ctrl+Shift+P))中使用 Git: Clone 命令,或者(在沒有開啟任何資料夾時)使用原始碼管理檢視中的 Clone Repository 按鈕來搜尋並克隆一個來自 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。使用個人訪問令牌(PAT)登入僅支援 GitHub Enterprise Server。如果你正在使用 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 可以透過 GitHub Issues: Queries (githubIssues.queries) 設定進行配置。這些查詢使用 GitHub 搜尋語法

你還可以使用設定 GitHub Issues: Ignore Completion Trigger (githubIssues.ignoreCompletionTrigger) 和 GitHub Issues: Ignore User Completion Trigger (githubIssues.ignoreUserCompletionTrigger) 來配置哪些檔案顯示這些建議。這些設定接受一個語言識別符號陣列來指定檔案型別。

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

拉取請求

Pull Requests 檢視中,你可以檢視、管理和建立拉取請求。

Pull Request View

用於顯示拉取請求的查詢可以透過 GitHub Pull Requests: Queries (githubPullRequests.queries) 設定進行配置,並使用 GitHub 搜尋語法

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

建立拉取請求

一旦你將更改提交到你的 fork 或分支,你可以使用 GitHub Pull Requests: Create Pull Request 命令或 Pull Requests 檢視中的 Create Pull Request 按鈕來建立拉取請求。

Create Pull Request button in the Pull Request view

將會顯示一個新的 Create 檢視,你可以在其中選擇你希望拉取請求目標的基礎倉庫和基礎分支,並填寫標題和描述。如果你的倉庫有拉取請求模板,它將自動用於描述。

使用頂部操作欄中的按鈕來新增 Assignees(指派人)、Reviewers(審查者)、Labels(標籤)和 Milestone(里程碑)。

Create Pull Request view

Create 按鈕選單允許你選擇替代的建立選項,例如 Create Draft(建立草稿)或啟用 Auto-Merge(自動合併)方法。

一旦你選擇 Create,如果你還沒有將你的分支推送到 GitHub 遠端倉庫,該擴充套件會詢問你是否要釋出該分支,並提供一個下拉選單來選擇特定的遠端倉庫。

Create Pull Request 檢視現在進入 Review Mode(審查模式),在這裡你可以審查 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 Requests 檢視中審查拉取請求。你可以從拉取請求的 Description(描述)中指派審查者和標籤、新增評論、批准、關閉和合並。

Pull Request Description editor

Description 頁面,你還可以使用 Checkout 按鈕輕鬆地在本地檢出該拉取請求。這會切換 VS Code 開啟拉取請求的 fork 和分支(在狀態列中可見),並進入審查模式,同時新增一個新的 Changes in Pull Request 檢視,從中你可以檢視當前更改的差異以及所有提交和這些提交內的更改。被評論過的檔案會用一個菱形圖示裝飾。要檢視磁碟上的檔案,你可以使用 Open File 內聯操作。

Changes in Pull Request view

此檢視中的差異編輯器使用本地檔案,因此檔案導航、IntelliSense 和編輯功能都正常工作。你可以在編輯器中的這些差異上新增評論。支援新增單個評論和建立整個審查。

當你完成審查拉取請求的更改後,你可以合併 PR 或選擇 Exit Review Mode 返回到你之前工作的分支。

提示

你也可以在建立 PR 之前讓 Copilot 對 PR 進行程式碼審查。在 GitHub Pull Request 檢視中選擇 Code Review 按鈕。

Issue

建立 Issue

可以透過 Issues 檢視中的 + 按鈕,以及使用 GitHub Issues: Create Issue from SelectionGitHub Issues: Create Issue from Clipboard 命令來建立 Issue。它們也可以透過“TODO”註釋的程式碼操作來建立。建立 Issue 時,你可以使用預設描述,或選擇右上角的 Edit Description 鉛筆圖示來調出 Issue 正文的編輯器。

Create Issue from TODO

你可以使用 GitHub Issues: Create Issue Triggers (githubIssues.createIssueTriggers) 設定來配置程式碼操作的觸發器。

預設的 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 或建立拉取請求。

Issue Status bar actions

你可以使用 GitHub Issues: Issue Branch Title (githubIssues.issueBranchTitle) 設定來配置分支的名稱。如果你的工作流程不涉及建立分支,或者你希望每次都被提示輸入分支名稱,可以透過關閉 GitHub Issues: Use Branch For Issues (githubIssues.useBranchForIssues) 設定來跳過這一步。

當你完成 Issue 的工作並想要提交更改時,原始碼管理檢視中的提交資訊輸入框將填充一條訊息,該訊息可以透過 GitHub Issues: Working Issue Format SCM (githubIssues.workingIssueFormatScm) 進行配置。

GitHub Repositories 擴充套件

GitHub Repositories 擴充套件讓你能夠直接在 Visual Studio Code 中快速瀏覽、搜尋、編輯和提交到任何遠端 GitHub 倉庫,而無需在本地克隆倉庫。這對於許多場景來說既快速又方便,比如你只需要審查原始碼或對檔案或資產進行小幅更改。

GitHub Repositories extension

開啟倉庫

安裝 GitHub Repositories 擴充套件後,你可以透過命令面板(⇧⌘P (Windows, Linux Ctrl+Shift+P))中的 GitHub Repositories: Open Repository... 命令,或點選狀態列左下角的遠端指示器來開啟一個倉庫。

Remote indicator in the Status bar

當你執行 Open Repository 命令時,你可以選擇是從 GitHub 開啟一個倉庫,從 GitHub 開啟一個拉取請求,還是重新開啟你之前連線過的倉庫。

如果你之前沒有在 VS Code 中登入過 GitHub,系統會提示你使用你的 GitHub 賬戶進行身份驗證。

GitHub Repository extension open repository dropdown

你可以直接提供倉庫 URL,或者在文字框中輸入來在 GitHub 上搜索你想要的倉庫。

一旦你選擇了一個倉庫或拉取請求,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

建立拉取請求

如果你的工作流程使用拉取請求,而不是直接提交到倉庫,你可以從原始碼管理檢視建立一個新的 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 擴充套件讓你能夠輕鬆地:

要切換開發環境,請使用 Continue Working On... 命令,該命令可從命令面板(⇧⌘P (Windows, Linux Ctrl+Shift+P))或點選狀態列中的遠端指示器獲得。

Continue Working On command in Remote dropdown

如果你正在使用基於瀏覽器的編輯器"Continue Working On..." 命令提供了在本地或在 GitHub Codespaces 的雲託管環境中開啟倉庫的選項。

Continue Working On from web-based editor

當你第一次使用帶有未提交更改的 Continue Working On 時,你可以選擇使用 Cloud Changes 將你的編輯帶到你選擇的開發環境中,它會將你的待處理更改儲存在與“設定同步”相同的 VS Code 服務上。

這些更改在應用到你的目標開發環境後,將從我們的服務中刪除。如果你選擇在不帶未提交更改的情況下繼續,你隨時可以透過配置設定 "workbench.cloudChanges.continueOn": "prompt" 來更改此偏好。

如果你的待處理更改沒有自動應用到你的目標開發環境,你可以使用 Cloud Changes: Show Cloud Changes 命令來檢視、管理和刪除你儲存的更改。

後續步驟

  • 瞭解更多關於 Copilot VS Code 的資訊 - 瞭解 VS Code 中的 Copilot。