兩種微軟產(chǎn)品可以很好地融合在一起。你可以在 VS Code 中無(wú)縫編碼并將更改推送到你的 GitHub 倉(cāng)庫(kù)。從同一個(gè)應(yīng)用界面完成所有這些工作讓生活變得如此輕松。

如何將 GitHub 添加到 VS Code？ 其實(shí)很容易。

在本教程中，我將展示：

• 如何將你的 GitHub 帳戶集成到 VS Code 中
• 如何將倉(cāng)庫(kù)從 GitHub 克隆到 VS Code 中
• 如何將你的更改從 VS Code 推送到 GitHub

聽起來(lái)不錯(cuò)？讓我們看看如何去做。

先決條件

請(qǐng)確保你的計(jì)算機(jī)上安裝了 Git。怎么做？

一種方法是轉(zhuǎn)到 VS Code 中的源代碼管理視圖。如果未安裝 Git，它會(huì)要求你下載它。

Checking if Git is installed via VS Code

另一件事是你需要配置 Git 用戶名和電子郵件。

將 GitHub 添加到 VS Code

VS Code 內(nèi)置了 GitHub 集成。你不需要安裝任何擴(kuò)展來(lái)克隆倉(cāng)庫(kù)和推送你的更改。

從左側(cè)邊欄轉(zhuǎn)到源代碼選項(xiàng)卡。你應(yīng)該看到 “克隆倉(cāng)庫(kù)Clone Repository” 或 “發(fā)布到 GitHubPublish to GitHub”（如果你已經(jīng)打開了一個(gè)文件夾）選項(xiàng)。單擊 “克隆倉(cāng)庫(kù)Clone Repository” 并為其提供 GitHub 倉(cāng)庫(kù)鏈接或單擊 “從 GitHub 克隆Clone from GitHub”。

Cloning GitHub repo in VS Code

然后它會(huì)顯示一條消息，要求你登錄 GitHub。

VS Code asking to sign in to GitHub

你單擊“允許Allow”按鈕，它將打開 GitHub 登錄頁(yè)面。

Connect GitHub to VS Code

如果你嘗試克隆一個(gè)倉(cāng)庫(kù)，你應(yīng)該會(huì)看到這樣的消息并單擊 “打開Open”。

Opening GitHub repo in VS Code

這應(yīng)該需要幾秒鐘，你就會(huì)登錄到你的 GitHub 帳戶。

你怎么知道你已經(jīng)使用 VS Code 登錄到 GitHub？

好吧，它將開始在頂部視圖中顯示你的 GitHub 倉(cāng)庫(kù)（如果有的話）（如果你之前按下了“克隆存儲(chǔ)庫(kù)”）。

GitHub repos accessible from VS Code

或者，你可以單擊左下角的配置文件圖標(biāo)，查看它是否顯示你已登錄到你的 GitHub 帳戶。

Checking if VS Code logged into GitHub account

在 GitHub 中克隆一個(gè) GitHub 倉(cāng)庫(kù)

如果你已經(jīng)在 GitHub 中打開了一個(gè)項(xiàng)目，想要克隆另一個(gè) GitHub 倉(cāng)庫(kù)，有幾種方法可以做到。

你可以使用 Git 命令將倉(cāng)庫(kù)克隆到磁盤上，然后在 VS Code 中打開此倉(cāng)庫(kù)文件夾。

或者，如果你不想使用命令行，則可以堅(jiān)持使用 VS Code。

這很簡(jiǎn)單。在 VS Code 中打開一個(gè)新窗口。

Open a new window in VS Code

這將為你提供一個(gè)全新、干凈的編輯器。如果看到歡迎屏幕，你可以從那里單擊 “克隆存儲(chǔ)庫(kù)” 的快速鏈接。

否則，從左側(cè)邊欄轉(zhuǎn)到“源碼管理Source Control”選項(xiàng)卡，然后單擊“克隆倉(cāng)庫(kù)Clone Repository”按鈕。

它將在頂部打開一個(gè)視圖。你可以直接復(fù)制 GitHub 倉(cāng)庫(kù)的 URL。它可以自動(dòng)從中獲取克隆鏈接。

Clone a new GitHub repo in VS Code

它會(huì)問(wèn)你把克隆的倉(cāng)庫(kù)放在哪里。

Select a location for the cloned GitHub repo in VS Code

它會(huì)詢問(wèn)你是否要將克隆的倉(cāng)庫(kù)在 VS Code 中打開。如果你想立即處理它，那就去做吧。

Open the just cloned GitHub repo in VS Code

不僅僅是克隆的存儲(chǔ)庫(kù)，VS Code 會(huì)詢問(wèn)你是否信任你添加到其中的任何文件夾的作者。

Trust author promot in VS Code

好了，你已經(jīng)在 VS Code 中克隆了一個(gè) GitHub 倉(cāng)庫(kù)。讓我們看看如何修改并將更改推送到 GitHub。

從 VS Code 推送更改到 GitHub

現(xiàn)在假設(shè)你對(duì)代碼進(jìn)行了一些更改并希望將提交推送到你的倉(cāng)庫(kù)。

當(dāng)你將更改保存到文件中，VS Code 就會(huì)開始用 “M” 指示修改后的文件。對(duì)于新文件，符號(hào)為 “U”（未跟蹤）。

從左側(cè)進(jìn)入“源碼控制”，輸入提交消息，然后單擊提交旁邊的按鈕并選擇 “提交并推送Commit & Push”。

Push your changes to GitHub from VS Code

如果你沒(méi)有配置 Git 用戶名和電子郵件，你將看到如下錯(cuò)誤。

Error in VS Code if Git username and email is not set

你可以 在全局或倉(cāng)庫(kù)級(jí)別設(shè)置用戶名和電子郵件。完全根據(jù)你自己的選擇。

?? 對(duì)于成功的提交和推送，你不會(huì)看到任何錯(cuò)誤。已修改文件或新文件旁邊的 “M” 或 “U” 符號(hào)將消失。

你可以通過(guò)進(jìn)入 GitHub 上的倉(cāng)庫(kù)來(lái)驗(yàn)證你的推送是否成功。

你可以選擇在本地提交更改而不推送它們。你也可以在這里使用 git 命令執(zhí)行所有你以前使用過(guò)的操作。有用于創(chuàng)建拉取請(qǐng)求、刷新等等的選項(xiàng)。

VS Code gives all kind of Git actions to perform

通過(guò) GitHub 官方擴(kuò)展將其提升到一個(gè)新的水平

有一個(gè)專用的官方擴(kuò)展，讓你還可以管理其他人對(duì)你的倉(cāng)庫(kù)的拉取請(qǐng)求并合并它們。你還可以在此處查看在你的倉(cāng)庫(kù)中打開中的問(wèn)題。這是將 GitHub 與 VS Code 集成的更好方法。

打開 VS Code，然后轉(zhuǎn)到左側(cè)欄中的擴(kuò)展選項(xiàng)卡。在這里搜索 “GitHub Pull Requests and Issues”。它是 GitHub 本身的官方插件。你可以看到已驗(yàn)證的勾選。

單擊安裝按鈕并在你的編輯器上安裝 擴(kuò)展。

Installing GitHub extension in VS Code

使用此擴(kuò)展，如果其他人正在協(xié)作，你可以管理你的存儲(chǔ)庫(kù)。

在 VS Code 中完全集成 Git 和 GitHub 是件好事。不喜歡命令行的人肯定會(huì)喜歡這種集成。

我希望本教程能幫助你將 GitHub 無(wú)縫添加到 VS Code。如果你仍然遇到任何問(wèn)題，請(qǐng)告訴我。

（題圖：MJ/GitHub VS Code develop illustration in high resolution, very detailed, 8k）