現已釋出!閱讀關於 11 月新增功能和修復的內容。

在 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 拉取請求和議題

安裝 GitHub Pull Requests and Issues 擴充套件後,您需要登入。

  1. 在活動欄中選擇 GitHub 圖示

  2. 選擇“**登入**”並按照提示在瀏覽器中透過 GitHub 進行身份驗證

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

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

如果未重定向回 VS Code,您可以手動新增您的授權令牌

  1. 在瀏覽器視窗中,複製您的授權令牌
  2. 在 VS Code 中,選擇狀態列中的“**正在登入到 github.com...**”
  3. 貼上令牌並按 Enter 完成登入過程

設定倉庫

克隆倉庫

您可以使用命令面板中的“**Git: Clone**”命令 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 或原始碼管理檢視中的“**Clone Repository**”按鈕(當沒有開啟資料夾時可用)從 GitHub 搜尋並克隆倉庫。

從 GitHub 倉庫下拉列表中,您可以篩選並選擇要本地克隆的倉庫。

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

瞭解更多關於 克隆倉庫和使用遠端倉庫 的資訊。

對現有倉庫進行身份驗證

透過 GitHub 進行身份驗證會在您在 VS Code 中執行任何需要 GitHub 身份驗證的 Git 操作時發生,例如推送到您所屬的倉庫或克隆私有倉庫。您無需安裝任何特殊擴充套件即可進行身份驗證;VS Code 內建了此功能,以便您可以高效地管理您的倉庫。

當您執行需要 GitHub 身份驗證的操作時,VS Code 會提示您登入。按照步驟登入 GitHub 並返回 VS Code。

Screenshot showing the GitHub authentication dialog.

僅支援使用個人訪問令牌 (PAT) 登入 GitHub Enterprise Server。如果您正在使用 GitHub Enterprise Server 並想使用 PAT,您可以選擇“**取消**”登入提示,直到提示輸入 PAT。

請注意,有多種方法可以向 GitHub 進行身份驗證,包括使用您的使用者名稱和密碼以及雙因素身份驗證 (2FA)、個人訪問令牌或 SSH 金鑰。有關每種選項的更多資訊和詳細資訊,請參閱 關於 GitHub 身份驗證

注意

如果您想在不將倉庫內容克隆到本地計算機的情況下處理某個倉庫,可以安裝 GitHub Repositories 擴充套件,直接在 GitHub 上進行瀏覽和編輯。瞭解更多關於 GitHub Repositories 擴充套件 的資訊。

編輯器整合

懸停資訊

當您開啟一個倉庫並且使用者被 @-提及(例如,在程式碼註釋中)時,您可以將滑鼠懸停在該使用者名稱上,並看到一個 GitHub 樣式的懸停提示,其中包含使用者的詳細資訊。

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

對於 #-提及的議題編號、完整的 GitHub 議題 URL 和指定倉庫的議題,也有類似的懸停提示。

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

建議

使用者建議透過鍵入“@”字元觸發,議題建議透過鍵入“#”字元觸發。建議在編輯器和原始碼管理提交訊息輸入框中可用。

GIF showing User and Issue suggestions in the editor.

建議中出現的議題可以透過“**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**”檢視中,您可以檢視、管理和建立拉取請求。

Screenshot showing the 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**”按鈕來建立拉取請求。

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

將顯示一個新的“**Create**”檢視,您可以在其中選擇要將拉取請求定位到的目標基礎倉庫和基礎分支,以及填寫標題和描述。如果您的倉庫有拉取請求模板,它將自動用於描述。

使用頂部的操作欄中的按鈕新增“**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 合併後,您可以選擇刪除遠端和本地分支。

提示

使用 AI 根據 PR 中包含的提交生成 PR 標題和描述。選擇 PR 標題欄位旁邊的閃光圖示以生成 PR 標題和描述。

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

審閱

可以從“**Pull Requests**”檢視審閱拉取請求。您可以從拉取請求的“**Description**”(描述)中分配審閱者和標籤、添加註釋、批准、關閉和合並。

Pull Request Description editor

從“**Description**”頁面,您還可以使用“**Checkout**”(檢出)按鈕輕鬆地在本地檢出拉取請求。這將使 VS Code 切換到審閱模式以開啟拉取請求的 fork 和分支(在狀態列中可見),並新增一個新的“**Changes in Pull Request**”(拉取請求中的更改)檢視,您可以在其中檢視當前更改的 diff 以及所有提交及其內的更改。有註釋的檔案會用菱形圖示裝飾。要檢視磁碟上的檔案,可以使用“**Open File**”(開啟檔案)內聯操作。

Changes in Pull Request view

此檢視中的 diff 編輯器使用本地檔案,因此檔案導航、IntelliSense 和編輯均正常工作。您可以在這些 diff 的編輯器中添加註釋。支援新增單個註釋和建立完整的審閱。

審閱完拉取請求更改後,您可以合併 PR 或選擇“**Exit Review Mode**”(退出審閱模式)以返回您之前正在處理的分支。

提示

您還可以 使用 AI 在建立 PR 之前對其進行程式碼審閱。在 GitHub Pull Request 檢視中選擇“**Code Review**”(程式碼審閱)按鈕。

議題

建立議題

議題可以從“**Issues**”檢視中的“**+**”按鈕建立,以及使用“**GitHub Issues: Create Issue from Selection**”(從選區建立 GitHub 議題)和“**GitHub Issues: Create Issue from Clipboard**”(從剪貼簿建立 GitHub 議題)命令建立。它們也可以使用“TODO”註釋的程式碼操作來建立。建立議題時,您可以採用預設描述,或選擇右上角的“**Edit Description**”(編輯描述)鉛筆圖示來開啟議題正文的編輯器。

Create Issue from TODO

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

預設的議題觸發器是

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

處理議題

從“**Issues**”檢視中,您可以檢視您的議題並進行處理。

Issue view with hover

預設情況下,當您開始處理某個議題(**Start Working on Issue** - 開始處理議題上下文選單項)時,會為您建立一個分支,如下面的狀態列影像所示。

Work on Issue

狀態列還顯示當前活動的議題,如果您選擇該專案,則會出現一個議題操作列表,例如在 GitHub 網站上開啟議題或建立拉取請求。

Issue Status Bar actions

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

提示

瞭解更多關於 處理分支 的資訊,以瞭解分支管理、切換分支和組織您的開發工作。

完成議題處理並要提交更改時,**Source Control** 檢視中的提交訊息輸入框將填充一條訊息,該訊息可以透過 “**GitHub Issues: Working Issue Format SCM**”(githubIssues.workingIssueFormatScm) 進行配置。

GitHub Repositories 擴充套件

使用 GitHub Repositories 擴充套件,您可以直接在 Visual Studio Code 中快速瀏覽、搜尋、編輯和提交任何遠端 GitHub 倉庫,而無需在本地克隆倉庫。這對於許多場景來說非常快速方便,您只需要檢視原始碼或對檔案或資源進行少量更改。

GitHub Repositories extension

開啟倉庫

安裝 GitHub Repositories 擴充套件後,您可以透過命令面板中的“**GitHub Repositories: Open Repository...**”命令 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 或單擊狀態列左下角的 Remote 指示器來開啟倉庫。

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 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 擴充套件會在記憶體中建立一個虛擬檔案系統,以便您可以檢視檔案內容並進行編輯。使用虛擬檔案系統意味著某些假定本地檔案的操作和擴充套件將無法啟用或功能受限。任務、除錯和整合終端等功能將無法啟用,您可以透過遠端指示器懸停中的“**features are not available**”(功能不可用)連結瞭解虛擬檔案系統的支援級別。

Remote indicator hover with features are not available link

擴充套件作者可以在 Virtual Workspaces 擴充套件作者指南 中瞭解更多關於在虛擬檔案系統和工作區中執行的資訊。

繼續處理

有時您會想切換到在支援本地檔案系統和完整語言及開發工具的環境中處理某個倉庫。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**”(雲端更改:顯示雲端更改)命令來檢視、管理和刪除已儲存的更改。

後續步驟

© . This site is unofficial and not affiliated with Microsoft.