在 VS Code 中使用 GitHub
GitHub 是一項用於儲存和共享原始碼的雲服務。在 Visual Studio Code 中使用 GitHub,你可以直接在編輯器內共享原始碼並與他人協作。與 GitHub 互動的方式有很多,例如透過其網站 https://github.com 或 Git 命令列介面 (CLI),但在 VS Code 中,豐富的 GitHub 整合功能由 GitHub Pull Requests and Issues 擴充套件提供。
在本主題中,我們將演示如何無需離開 VS Code 即可使用你喜歡的 GitHub 功能。
如果你是原始碼管理方面的新手,或者想了解更多關於 VS Code 基本 Git 支援的資訊,可以從 原始碼管理 (Source Control) 主題開始。
先決條件
要在 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 擴充套件後,你需要登入。
-
在活動欄中選擇 GitHub 圖示
-
選擇 Sign In(登入) 並按照提示在瀏覽器中透過 GitHub 進行身份驗證

-
你應該會被重定向回 VS Code
如果沒有重定向到 VS Code,你可以手動新增授權令牌
- 在瀏覽器視窗中,複製你的授權令牌
- 在 VS Code 中,選擇狀態列中的 Signing in to github.com...
- 貼上令牌並按 Enter 完成登入過程
設定儲存庫
克隆儲存庫
你可以使用命令面板(⇧⌘P(Windows、Linux 為 Ctrl+Shift+P))中的 Git: Clone 命令,或者使用“原始碼管理”檢視中的 Clone Repository(克隆儲存庫) 按鈕(在未開啟資料夾時可用),搜尋並克隆 GitHub 上的儲存庫。
在 GitHub 儲存庫下拉選單中,你可以篩選並選擇想要克隆到本地的儲存庫。

詳細瞭解克隆儲存庫和使用遠端倉庫。
使用現有儲存庫進行身份驗證
當你執行任何需要 GitHub 身份驗證的 Git 操作(例如推送到你所屬的儲存庫,或克隆私有儲存庫)時,系統會自動啟用透過 GitHub 的身份驗證。你無需安裝任何特殊擴充套件即可進行身份驗證;它是 VS Code 內建的功能,以便你可以高效地管理儲存庫。
當你執行需要 GitHub 身份驗證的操作時,VS Code 會提示你登入。按照步驟登入 GitHub 並返回 VS Code 即可。

只有 GitHub Enterprise Server 支援使用個人訪問令牌 (PAT) 登入。如果你使用的是 GitHub Enterprise Server 並希望使用 PAT,則可以選擇登入提示中的 Cancel(取消),直到系統提示你輸入 PAT 為止。
請注意,有多種方式可以向 GitHub 進行身份驗證,包括使用帶有雙重驗證 (2FA) 的使用者名稱和密碼、個人訪問令牌或 SSH 金鑰。有關每個選項的更多資訊和詳細資訊,請參閱關於 GitHub 的身份驗證。
如果你想在不將內容克隆到本地機器的情況下處理儲存庫,可以安裝 GitHub Repositories 擴充套件,以直接在 GitHub 上瀏覽和編輯。詳細瞭解 GitHub Repositories 擴充套件。
編輯器整合
懸停資訊
當你開啟一個儲存庫且有使用者被 @ 提及(例如在程式碼註釋中)時,你可以將滑鼠懸停在該使用者名稱上,檢視帶有使用者詳細資訊的 GitHub 風格懸浮窗。

對於以 # 開頭的議題編號、完整的 GitHub 議題 URL 以及儲存庫指定的議題,也有類似的懸浮窗。

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

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

用於顯示拉取請求的查詢可以透過 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 命令或“拉取請求”檢視中的 Create Pull Request 按鈕來建立拉取請求。

一個新的 Create(建立) 檢視將會顯示,你可以在其中選擇目標儲存庫和基分支,並填寫標題和描述。如果你的儲存庫有拉取請求模板,它將自動用於描述。
使用頂部操作欄中的按鈕新增 Assignees(受託人)、Reviewers(審閱者)、Labels(標籤) 和 Milestone(里程碑)。

Create(建立) 按鈕選單允許你選擇其他建立選項,例如 Create Draft(建立草稿) 或啟用 Auto-Merge(自動合併) 方法。
選擇 Create 後,如果你尚未將分支推送到 GitHub 遠端倉庫,擴充套件程式將詢問你是否要釋出該分支,並提供一個下拉選單供你選擇具體的遠端倉庫。
Create Pull Request 檢視現在進入 Review Mode(審閱模式),你可以在其中審閱 PR 的詳細資訊、添加註釋,並在準備好後合併 PR。合併 PR 後,你可以選擇刪除遠端分支和本地分支。
利用 AI 根據 PR 中包含的提交生成 PR 標題和描述。選擇 PR 標題欄位旁邊的閃爍圖示即可生成。

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

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

此檢視中的差異編輯器使用本地檔案,因此檔案導航、IntelliSense 和編輯功能均可正常使用。你可以在編輯器內對這些差異添加註釋。支援新增單個註釋以及建立整個審閱。
當完成拉取請求更改的審閱後,你可以合併 PR,或選擇 Exit Review Mode(退出審閱模式) 返回之前工作所在的分支。
你也可以在建立 PR 之前 使用 AI 對 PR 進行程式碼審閱。選擇 GitHub 拉取請求檢視中的 Code Review(程式碼審閱) 按鈕。
Issues(議題)
建立議題
可以透過“議題”檢視中的 + 按鈕,或使用 GitHub Issues: Create Issue from Selection 和 GitHub Issues: Create Issue from Clipboard 命令來建立議題。它們還可以透過“TODO”註釋的程式碼操作來建立。建立議題時,你可以接受預設描述,或選擇右上角的 Edit Description(編輯描述) 鉛筆圖示來調出議題正文編輯器。

你可以使用 GitHub Issues: Create Issue Triggers( githubIssues.createIssueTriggers )設定來配置程式碼操作的觸發器。
預設的議題觸發器為:
"githubIssues.createIssueTriggers": [
"TODO",
"todo",
"BUG",
"FIXME",
"ISSUE",
"HACK"
]
處理議題
在 Issues(議題) 檢視中,你可以檢視並處理你的議題。

預設情況下,當你開始處理某個議題時(Start Working on Issue 上下文選單項),系統會為你建立一個分支,如下圖狀態列所示。

狀態列還會顯示活動議題。如果你選擇該專案,可以使用一系列議題操作,例如在 GitHub 網站上開啟該議題或建立拉取請求。

你可以使用 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 擴充套件後,你可以使用命令面板(⇧⌘P(Windows、Linux 為 Ctrl+Shift+P))中的 GitHub Repositories: Open Repository... 命令,或點選狀態列左下角的“遠端”指示器來開啟儲存庫。

當你執行 Open Repository 命令時,可以選擇是從 GitHub 開啟儲存庫、從 GitHub 開啟拉取請求,還是重新開啟之前連線過的儲存庫。
如果你之前未曾從 VS Code 登入過 GitHub,系統會提示你使用 GitHub 賬戶進行身份驗證。

你可以直接提供儲存庫 URL,或透過在文字框中輸入名稱來搜尋 GitHub 上的儲存庫。
選擇儲存庫或拉取請求後,VS Code 視窗將重新載入,你會在“檔案資源管理器”中看到儲存庫內容。然後,你可以開啟檔案(具有完整的語法高亮和括號匹配)、進行編輯並提交更改,就像處理本地克隆的儲存庫一樣。
與處理本地儲存庫的一個區別是,當你使用 GitHub Repository 擴充套件提交更改時,這些更改會直接推送到遠端儲存庫,類似於你在 GitHub Web 介面中操作的情況。
GitHub Repositories 擴充套件的另一個特性是,每次你開啟儲存庫或分支時,都會獲取 GitHub 上最新的原始碼。你無需像處理本地儲存庫那樣記得執行 pull(拉取)來重新整理。
GitHub Repositories 擴充套件支援檢視甚至提交 LFS 跟蹤的檔案,而無需在本地安裝 Git LFS(大檔案系統)。將你想要用 LFS 跟蹤的檔案型別新增到 .gitattributes 檔案中,然後使用“原始碼管理”檢視將更改直接提交到 GitHub。
切換分支
你可以透過點選狀態列中的分支指示器輕鬆切換分支。GitHub Repositories 擴充套件的一個強大功能是,你可以在不暫存(stash)未提交更改的情況下切換分支。擴充套件程式會記住你的更改,並在你切換分支時重新應用它們。

遠端資源管理器
你可以使用活動欄上提供的“遠端資源管理器”快速重新開啟遠端儲存庫。此檢視顯示了之前開啟過的儲存庫和分支。

建立拉取請求
如果你的工作流使用拉取請求而不是直接提交到儲存庫,你可以從“原始碼管理”檢視中建立新的 PR。系統會提示你提供標題並建立一個新分支。

建立拉取請求後,你可以使用 GitHub Pull Request and Issues 擴充套件來審閱、編輯和合並你的 PR,具體步驟請參考本主題前面的部分。
虛擬檔案系統
由於本地機器上沒有儲存庫的檔案,GitHub Repositories 擴充套件會在記憶體中建立一個虛擬檔案系統,以便你檢視檔案內容並進行編輯。使用虛擬檔案系統意味著某些假定本地存在檔案的操作和擴充套件將無法啟用或功能受限。任務、除錯和整合終端等功能未啟用。你可以透過“遠端”指示器懸浮窗中的 features are not available(功能不可用) 連結瞭解虛擬檔案系統的支援級別。

擴充套件開發者可以在 虛擬工作區擴充套件開發者指南 中詳細瞭解如何在虛擬檔案系統和工作區中執行。
繼續工作
有時,你可能想切換到支援本地檔案系統以及完整語言和開發工具的開發環境中處理儲存庫。GitHub Repositories 擴充套件使你可以輕鬆實現:
- 建立 GitHub Codespace(如果你有 GitHub Codespaces 擴充套件)。
- 在本地克隆儲存庫。
- 將儲存庫克隆到 Docker 容器中(如果你安裝了 Docker 和 Microsoft 容器工具擴充套件)。
要切換開發環境,請使用命令面板(⇧⌘P(Windows、Linux 為 Ctrl+Shift+P))或點選狀態列中的“遠端”指示器,使用 Continue Working On(繼續工作) 命令。

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

當你首次在存在未提交更改的情況下使用 Continue Working On 時,你可以選擇使用 Cloud Changes(雲更改) 將編輯內容帶入所選的開發環境,該功能會將待處理的更改儲存在用於“設定同步”的同一個 VS Code 服務中。
一旦這些更改應用到目標開發環境,它們就會從我們的服務中刪除。如果你選擇在不攜帶未提交更改的情況下繼續,以後可以隨時透過配置設定 "workbench.cloudChanges.continueOn": "prompt" 來更改此首選項。
如果待處理的更改沒有自動應用到目標開發環境,你可以使用 Cloud Changes: Show Cloud Changes 命令檢視、管理和刪除已儲存的更改。
後續步驟
- 瞭解更多關於 VS Code 中的 AI - 瞭解 VS Code 中的 AI 功能。