详解：如何将 GitHub 连接到 VS Code
GitHub VS Code
![](/data/attachment/album/202304/24/160055gt5d5u6dk5f4f5e7.jpg)


VS Code 无疑是最受欢迎的代码编辑器之一。同样，GitHub 是编码人员中最受欢迎的平台。


两种微软产品可以很好地融合在一起。你可以在 VS Code 中无缝编码并将更改推送到你的 GitHub 仓库。从同一个应用界面完成所有这些工作让生活变得如此轻松。


如何将 GitHub 添加到 VS Code？ 其实很容易。


在本教程中，我将展示：


* 如何将你的 GitHub 帐户集成到 VS Code 中
* 如何将仓库从 GitHub 克隆到 VS Code 中
* 如何将你的更改从 VS Code 推送到 GitHub


听起来不错？让我们看看如何去做。


### 先决条件


请确保你的计算机上安装了 Git。怎么做？


一种方法是转到 VS Code 中的源代码管理视图。如果未安装 Git，它会要求你下载它。


![Checking if Git is installed via VS Code](/data/attachment/album/202304/24/160059e1qgm4u1qxy4yj1x.png)


另一件事是你**需要配置 Git 用户名和电子邮件**。


### 将 GitHub 添加到 VS Code


VS Code 内置了 GitHub 集成。你不需要安装任何扩展来克隆仓库和推送你的更改。


从左侧边栏转到源代码选项卡。你应该看到 “<ruby> 克隆仓库 <rt>  Clone Repository </rt></ruby>” 或 “<ruby> 发布到 GitHub <rt>  Publish to GitHub </rt></ruby>”（如果你已经打开了一个文件夹）选项。单击 “<ruby> 克隆仓库 <rt>  Clone Repository </rt></ruby>” 并为其提供 GitHub 仓库链接或单击 “<ruby> 从 GitHub 克隆 <rt>  Clone from GitHub </rt></ruby>”。


![Cloning GitHub repo in VS Code](/data/attachment/album/202304/24/160059mwmumgyyypwplzym.png)


然后它会显示一条消息，要求你登录 GitHub。


![VS Code asking to sign in to GitHub](/data/attachment/album/202304/24/160100ndlghrdduycgdzch.png)


你单击“<ruby> 允许 <rt>  Allow </rt></ruby>”按钮，它将打开 GitHub 登录页面。


![Connect GitHub to VS Code](/data/attachment/album/202304/24/160100gv6nn4v4q70rnwnx.png)


如果你尝试克隆一个仓库，你应该会看到这样的消息并单击 “<ruby> 打开 <rt>  Open </rt></ruby>”。


![Opening GitHub repo in VS Code](/data/attachment/album/202304/24/160100qewnme0735mzmoxm.png)


这应该需要几秒钟，你就会登录到你的 GitHub 帐户。


#### 你怎么知道你已经使用 VS Code 登录到 GitHub？


好吧，它将开始在顶部视图中显示你的 GitHub 仓库（如果有的话）（如果你之前按下了“克隆存储库”）。


![GitHub repos accessible from VS Code](/data/attachment/album/202304/24/160100x9lz08r90kswne49.png)


或者，你可以单击左下角的配置文件图标，查看它是否显示你已登录到你的 GitHub 帐户。


![Checking if VS Code logged into GitHub account](/data/attachment/album/202304/24/160101b00jggzdmjqmjg8f.png)


### 在 GitHub 中克隆一个 GitHub 仓库


如果你已经在 GitHub 中打开了一个项目，想要克隆另一个 GitHub 仓库，有几种方法可以做到。


你可以**使用 Git 命令将仓库克隆到磁盘上**，然后在 VS Code 中打开此仓库文件夹。


或者，如果你不想使用命令行，则可以坚持使用 VS Code。


这很简单。在 VS Code 中打开一个新窗口。


![Open a new window in VS Code](/data/attachment/album/202304/24/160101tcypczphiatazhqe.png)


这将为你提供一个全新、干净的编辑器。**如果看到欢迎屏幕**，你可以从那里单击 “克隆存储库” 的快速链接。


否则，从左侧边栏转到“<ruby> 源码管理 <rt>  Source Control </rt></ruby>”选项卡，然后单击“<ruby> 克隆仓库 <rt>  Clone Repository </rt></ruby>”按钮。


它将在顶部打开一个视图。你可以**直接复制 GitHub 仓库的 URL**。它可以自动从中获取克隆链接。


![Clone a new GitHub repo in VS Code](/data/attachment/album/202304/24/160102cal8taayx6x6mlal.png)


它会问你把克隆的仓库放在哪里。


![Select a location for the cloned GitHub repo in VS Code](/data/attachment/album/202304/24/160102b8b2vbznpleriqsq.png)


它会询问你是否要将克隆的仓库在 VS Code 中打开。如果你想立即处理它，那就去做吧。


![Open the just cloned GitHub repo in VS Code](/data/attachment/album/202304/24/160102qg384edygasyc3na.png)


不仅仅是克隆的存储库，VS Code 会询问你是否信任你添加到其中的任何文件夹的作者。


![Trust author promot in VS Code](/data/attachment/album/202304/24/160103xm161mbyhmsb1yy1.png)


好了，你已经在 VS Code 中克隆了一个 GitHub 仓库。让我们看看如何修改并将更改推送到 GitHub。


### 从 VS Code 推送更改到 GitHub


现在假设你对代码进行了一些更改并希望将提交推送到你的仓库。


当你将更改保存到文件中，**VS Code 就会开始用 “M” 指示修改后的文件**。对于新文件，符号为 “U”（未跟踪）。


从左侧进入“源码控制”，输入提交消息，然后单击提交旁边的按钮并选择 “<ruby> 提交并推送 <rt>  Commit &amp; Push </rt></ruby>”。


![Push your changes to GitHub from VS Code](/data/attachment/album/202304/24/160103o9wtm9merdgcedmb.png)


如果你没有配置 Git 用户名和电子邮件，你将看到如下错误。


![Error in VS Code if Git username and email is not set](/data/attachment/album/202304/24/160103lnuarr1zsrus0ln6.png)


你可以 [在全局或仓库级别设置用户名和电子邮件](https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup?ref=itsfoss.com)。完全根据你自己的选择。



> 
> ? 对于成功的提交和推送，你不会看到任何错误。已修改文件或新文件旁边的 “M” 或 “U” 符号将消失。
> 
> 
> 


**你可以通过进入 GitHub 上的仓库来验证你的推送是否成功。**


你可以选择在本地提交更改而不推送它们。你也可以在这里使用 `git` 命令执行所有你以前使用过的操作。有用于创建拉取请求、刷新等等的选项。


![VS Code gives all kind of Git actions to perform](/data/attachment/album/202304/24/160104jqw56w9nuu2udenr.png)


### 通过 GitHub 官方扩展将其提升到一个新的水平


有一个专用的官方扩展，让你还可以**管理其他人对你的仓库的拉取请求并合并它们**。你还可以在此处查看在你的仓库中打开中的问题。这是将 GitHub 与 VS Code 集成的更好方法。


打开 VS Code，然后转到左侧栏中的扩展选项卡。在这里**搜索 “GitHub Pull Requests and Issues”**。它是 GitHub 本身的官方插件。你可以看到已验证的勾选。


单击安装按钮并在你的编辑器上安装 [扩展](https://itsfoss.com/install-vs-code-extensions/)。


![Installing GitHub extension in VS Code](/data/attachment/album/202304/24/160104uwty77cooy74wlll.png)


使用此扩展，如果其他人正在协作，你可以管理你的存储库。


在 VS Code 中完全集成 Git 和 GitHub 是件好事。不喜欢命令行的人肯定会喜欢这种集成。


我希望本教程能帮助你将 GitHub 无缝添加到 VS Code。如果你仍然遇到任何问题，请告诉我。


*（题图：MJ/GitHub VS Code develop illustration in high resolution, very detailed, 8k）*




---


via: <https://itsfoss.com/vs-code-github/>


作者：[Abhishek Prakash](https://itsfoss.com/author/abhishek/) 选题：[lkxed](https://github.com/lkxed/) 译者：[geekpi](https://github.com/geekpi) 校对：[wxy](https://github.com/wxy)


本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出


OK
![Warp Terminal](/assets/images/warp-terminal.webp)


![Warp Terminal](/assets/images/warp-terminal.webp)

VS Code is undoubtedly one of the most popular code editors. Similarly, GitHub is the most popular platform among coders.

Both Microsoft products gel quite well. You can seamlessly code in VS Code and push changes to your GitHub repo. It makes life so much easier to do all of it from the same application interface.

How to add GitHub to VS Code? It's quite easy actually.

In this tutorial, I'll show:

- How to integrate your GitHub account into VS Code
- How to clone repositories from GitHub into VS Code
- How to push your changes to GitHub from VS Code

Sounds good? Let's see how to do it.

## Prerequisite

Please ensure that Git is installed on your computer. How to do that?

One way would be to go to the Source Control view in VS Code. If Git is not installed, it will ask you to download it.

![Checking if Git is installed via VS Code](https://itsfoss.com/content/images/2023/04/check-git-vs-code.png)

Another thing is that you **should have the Git username and email configured**.

## Adding GitHub to VS Code

VS Code comes builtin with GitHub integration. You should not need to install any extension for cloning repos and pushing your changes.

Go to the source code tab from the left sidebar. You should see a '**Clone Repository**' or '**Publish to GitHub**' (if you have opened a folder already) option. Click on the **Clone Repository** and give it a GitHub repo link or click on '**Clone from GitHub**'.

![Cloning GitHub repo in VS Code](https://itsfoss.com/content/images/2023/04/integrate-github-vs-code.png)

It will then show you a message that asks you to sign in to GitHub.

![VS Code asking to sign in to GitHub](https://itsfoss.com/content/images/2023/04/vs-code-sign-in-github.png)

You click on Allow button and it will open a browser tab with a GitHub login page.

![Connect GitHub to VS Code](https://itsfoss.com/content/images/2023/04/connect-github-with-vs-code.png)

If you were trying to clone a repo, you should see a message like this and click **Open**.

![Opening GitHub repo in VS Code](https://itsfoss.com/content/images/2023/04/allowing-vs-code-extension-github.png)

It should take a couple of seconds and you should be signed into your GitHub account.

### How do you know you are logged into GitHub with VS Code?

Well, it will start showing your GitHub repositories (if you have any) in the top viewlet (if you pressed clone repository earlier).

![GitHub repos accessible from VS Code](https://itsfoss.com/content/images/2023/04/github-repos-accessible-from-vs-code.png)

Alternatively, you can click on the Profile icon at the bottom left corner to see if it says you are logged in to your GitHub account.

![Checking if VS Code logged into GitHub account](https://itsfoss.com/content/images/2023/04/check-if-vs-code-logged-in-github.png)

## Clone a GitHub repository in GitHub

If you have already opened a project in GitHub bit want to clone another GitHub repository, there are several ways to do that.

You can **use the Git commands to clone the repo on your disk** and then open this repo folder in VS Code.

Alternatively, if you don't want to use the command line, you can stick with VS Code.

It's simple. Open a new window in VS Code.

![Open a new window in VS Code](https://itsfoss.com/content/images/2023/04/open-new-window-vs-code.png)

This will give you a fresh, clean editor. **If you have the welcome screen running**, you can click on the 'Clone Git Repository' quick link from there.

Otherwise, go to the Source Control tab from the left sidebar and click the Clone Repository button.

It will open a viewlet on the top. You can **simply copy the URL of the GitHub repo**. It can automatically get the clone link from it.

![Clone a new GitHub repo in VS Code](https://itsfoss.com/content/images/2023/04/clone-new-github-repo-vs-code.png)

It will ask you where to place the cloned repo.

![Select a location for the cloned GitHub repo in VS Code](https://itsfoss.com/content/images/2023/04/location-for-cloned-repo-vs-code.png)

It will ask if you want to open the cloned repo into VS Code. Go for it if you want to work on it immediately.

![Open the just cloned GitHub repo in VS Code](https://itsfoss.com/content/images/2023/04/open-cloned-github-repo-vs-code.png)

Not just for a cloned repo, VS Code asks you if you trust the author for any folder you add to it.

![Trust author promot in VS Code](https://itsfoss.com/content/images/2023/04/open-project-trust-author-prompt-vs-code.png)

Well, you have cloned a GitHub repo in VS Code. Let's see how to modify and push your changes to GitHub.

## Push changes to GitHub from VS Code

Now let's say you made some changes to the code and want to push the commit to your repo.

As soon as you save your changes to a file, **VS Code starts indicating the modified files with an M**. For new files, the symbol is U (untracked).

Go to Source Control from the left-hand side, type a commit message and then click on the carrot button beside Commit and choose Commit & Push.

![Push your changes to GitHub from VS Code](https://itsfoss.com/content/images/2023/04/push-chnages-to-github-repo-from-vs-code.png)

*If you don't have your Git username and email configured, you'll see this error.*

![Error in VS Code if Git username and email is not set](https://itsfoss.com/content/images/2023/04/git-usernam-email-error-message.png)

You can [set username and email at global level](https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup) or repo level. Your choice, really.

**You can verify that your push was successful by going to the repo on GitHub.**

You may choose to commit your changes locally without pushing them. You can do all the things you used to do with git commands here as well. There are options for creating pull requests, refreshing and whatnot.

![VS Code gives all kind of Git actions to perform](https://itsfoss.com/content/images/2023/04/git-actions-in-vs-code.png)

## Take it to the next level with GitHub official extension

There is a dedicated, official extension that lets you also **manage pull requests to your repos from other people and merge them**. You can also see issues opened on your repository here. This is a much better way to integrate GitHub with VS Code.

Open VS Code and go to the Extensions tab from the left sidebar. Here **search for GitHub Pull Requests and Issues**. It's an official plugin from GitHub itself. You can see the verified checkmark.

Click on the Install button and have the [extension installed](https://itsfoss.com/install-vs-code-extensions/) on your editor.

![Installing GitHub extension in VS Code](https://itsfoss.com/content/images/2023/04/install-github-extension-vs-code.png)

With this extension, you can manage your repository if others are collaborating on it.

It is good to have complete Git and GitHub integration in VS Code. People who don't like the command line surely enjoy this integration.

I hope this tutorial helped you add GitHub to VS Code seamlessly. Let me know if you still face any issues.