How to use Git and GitHub in VS Code | Tutorial for beginners

Today we're going to take a look at how to use Git and GitHub in VS Code. Using GitHub in VS Code reduces context switching, streamlines your workflow, and boosts your productivity. [music] By the end of this video, you'll understand how to initialize a repo, switch branches, stage, commit, and push your changes to GitHub, all without leaving your editor. Hey, I'm Kadisha and I'm so excited [music] that you're here with me today. I have my friend Reynold from the VS Code team here to show us how to use Git [music] and GitHub in VS Code. Reynold, take it away. Thanks, Kadisha. Source control, version control, backing up, whatever you call it, it's all about keeping track of code and files over time. Git is a program for managing source code, while GitHub hosts a copy of that code in a repository online. Visual Studio Code makes the process of using Git and GitHub easy. And in this demonstration, I'm going to be showing you how. Before we get started, this video assumes you already have Git installed, which you can download from this site. The first thing in using Git with VS Code is initializing a folder to reflect your repository. So, I'm going to go ahead and open up a folder that I have some files in. Within here is a simple project that has this website. So, what we'll want to do is navigate to our source control icon and then click initialize repository. Now you'll see that the branch name at the bottom of left-hand corner is main. If I wanted to rename this, I can just bring up the command palette by hitting shift command P on a Mac and type in rename and select rename branch. And I could then change this to something like test branch and you'll see it reflected at the bottom now. But let's go ahead and bring it back to its original name, which is main, and now that's reflected there, too. After initialization, you'll notice that in the source control panel, that there are some files that have a U next to them. U stands for untracked, meaning that the file is new or changed, but not added to the repository. To track it, we just need to click the plus sign next to it, or I could go to the very top plus right next to the word changes and stage all of them. Now to commit, I can go up here and just type in a message like first commit, or even better, I could click this icon here to generate a commit message for me. It created a detailed one, which I think looks good, and I'll click commit. Right now we're on the main branch. And if this were a major app and we needed to add new code or features, we create a new branch. To do so, we can go to the command palette and just simply type in create branch and select it. And then just type in, for example, new features. Now at the bottom left corner, that reflects the new branch. Now I'll just add a line to simulate a new feature right below line 14. Now you'll notice that when I added that code, the gutter on the left tile shows a green line. That reflects a new line. But if I change a line like on 13 and added some exclamation points, you now see a blue line, which reflects the code has been modified. You'll also see some buttons in the source control view. If I hover over here, there's a button to open a file, discard changes, and stage changes. And if we had multiple files, we can go above to stage all changes or discard all changes. We also have options to open changes or to review un-staged changes. VS Code can also perform side-by-side diffs without needing another tool. To see the changes, all we need to do is click on the file in source control. And from here, you can see the changes and compare the differences. But what I want to show you also is that you can switch to what's referred to as an inline view that lets you see all the changes combined. Within here, you could even make edits inside the diff view. So, for example, I can go to the title and change that by adding the word now, change the learning to learn, and once I'm finished, I can go ahead and click the plus sign to stage my changes. And before I commit, I can just put in change title, or again, see what it could generate for me. And this also looks good. Note that we're still on the new features branch. Main hasn't changed yet. So, if we want to see our main branch, if we click on the bottom left-hand corner here, we're going to see some options. At the top, click main branch and we'll see our original code. So, in order to merge, all I need to do is go up to these three dots, go to branch, merge, and it'll prompt me where to merge from. I will choose my new features branch. And now our main branch has the reflected changes. So, now let's say that we want to publish this to GitHub. All we do is press publish branch and it's going to give us the option for either a private or public repository. I'm fine with it being public. Then it will start the publishing process. In the bottom right-hand corner, you have the option to open up GitHub to see your new repo, which is now right over here, public and ready to be seen by the world. You can learn more about using Git and GitHub in VS Code by going to gh.io/gfbvscode. Okay, let's get back to Reynold. So, now let's say we wanted to clone a repo. All we have to do is go to the repo that we're interested in. So, let's say I wanted to clone simple/card-app over here. All I need to do is go to where it says code and hit the drop-down to copy the URL. Then we can hop over to VS Code and from the command palette, type in clone, select it, we will paste the URL, and then choose clone from URL. It'll ask us for a location to save the repo and it'll prompt me to open the repository and there we go. Now, while I can appreciate what we can do from this source control section within VS Code, we don't always have to do everything manually. For example, we could leverage what's referred to as MCP, which stands for model context protocol, which lets AI tools access external tools and data safely. So, for example, if we were to click configure tools, we could see some tools that are built in by default. But if we were to go to the extension marketplace and typed in @mcp, we can find an MCP server specifically from GitHub and install this, which gives us this additional functionality. So, I hit enter to confirm and allow the MCP server permission to authenticate. I'll indicate my GitHub account. So, now towards the bottom, we could see that the GitHub MCP server is installed. And if we go back to configure tools, we now see GitHub MCP server. So, let's take a quick peek at the app we just cloned. Now I installed the dependencies to run it and this is how it looks. It's a simple flashcard app, which you can run study sessions on. Ask questions, guess the answer, and see if you are correct. But the design could look better and it could probably use some new features. So, from within VS Code, what we can do is ask Chat to give me two new features and two UX enhancements for this project and open issues for them. It will go to work and ideally know that it can use the GitHub MCP to create the issues after comes up with the features and UX enhancements. Now, while it's doing that, I could show you that there are currently no issues. And right now I will give it permission. As you can see from here that it is using the GitHub MCP server that we installed. And here we have our suggested new features in addition to UX enhancements. If we go to GitHub and refresh, here are our issues. And that's it. We covered the most common ways developers use Git. Creating a repository, creating and switching branches, staging and committing changes, merging branches, publishing to GitHub, and cloning existing repositories, along with using a little bit of AI. Now, there are more advanced topics, but these are the ones you'll most frequently use. Hope you got some value out of this demonstration, and with that, let's turn it back to Kadisha. I hope you [music] found this video helpful. Remember to subscribe to GitHub's YouTube channel so you don't miss any of our future uploads, and share with a dev friend who could use this knowledge. Happy coding.