Welcome back to GitHub for Beginners. We’ve covered a lot this season, so make sure to check out our other episodes. Our most recent one was all about open source, what it is and how to contribute to the community.
This time, we’re going to take a look at VS Code, a free popular source code editor provided by Microsoft. It has a fair amount of functionality built in that integrates with GitHub, which is what we’ll be taking a look at today. Using GitHub in VS Code reduces context switching, streamlines your workflow, and boosts your productivity. By the end of this post, you’ll understand how to use VS Code to initialize a repository, switch branches, as well as stage, commit, and push your changes. And the best part is, you’ll be able to do all this without leaving the editor.
Note that if you want to follow along with this blog post (or the video), you will need to install both Git and VS Code. If you need a refresher on how to install Git, you can check out one of our earlier GitHub for Beginners episodes.
As always, if you prefer to watch the video or want to reference it, we have all of our GitHub for Beginners episodes available on YouTube.
You probably already know that GitHub is a resource that hosts only copies of your code in repositories. So what is Git? Git is the program for managing that source code, and it can be used in multiple different ways (e.g., from the command line, through VS Code, etc.). Visual Studio Code, often abbreviated as VS Code, leverages Git to enable you to manage your code in GitHub.
The first step to using Git with VS Code is initializing a folder to reflect your repository on GitHub.
At this point, a few things will change in your UI. First, you can see the branch name in the bottom bar on the left-hand side. The default is main. You can rename your branch by using the Command Palette.
Shift-Command-P on Mac or Ctrl-Shift-P on PC.Enter.At this point, you can see that the name of the branch in the bottom-left corner has been updated to the new name. You can rename it back to main by following the same steps.
Another change you’ll see after initializing your repository is that each of the files in the Source Control Panel have a “U” next to them. “U” stands for untracked, meaning that these files are new or changed, but have not been added to the repository. To track a file, you just need to click the plus sign adjacent to the file name. If you want to track all of the files, you can click the top plus next to the word CHANGES.
When you do this, the file(s) that you select will be staged, and the letter next to them will change to “A”. This means the file is staged, but not yet uploaded to GitHub. In order to upload the changes, you’ll need to commit the files.
It’s that simple!
Right now, you’re likely on the main branch. Remember that you can check the branch by looking in the bottom-left corner of your window. If this were a major app and you were adding new code or features, you’d want to create a new branch and use that for your work.
Shift-Command-P on Mac or Ctrl-Shift-P on PC.Enter.Once you do this, VS Code will create the new branch and automatically transfer you to this branch. You can verify this by looking at the branch name in the bottom-left corner.
Now that you’re in your working branch, go ahead and enter a line of code in a file. When you do this, you’ll notice that a thin green line appears on the right side of your editor next to the code you added. This section of the editor is called the gutter, and this green line reflects a new line of code that you added.
Move to a different line and make some changes in the line of code that already exists. When you do this, you’ll see a blue line with a pattern across it in the gutter. This line indicates that you’ve made changes to an existing line of code.
Finally, move to an unchanged line in the file and delete it. Notice that the gutter adds a red arrow. This indicates that a line of code was removed from the file.
When you modify this file, you can see that the file appeared in your Source Control window under the CHANGES header. If you hover over the filename, you’ll see several buttons appear. There are buttons to open a file, discard your changes, and stage your changes. Similar to before, if you have multiple files with changes, you can hover over the CHANGES header and see buttons that will let you review unstaged changes, open the changes, discard all the changes, and stage all the changes.
Sometimes you want to see the changes that you made in a file. VS Code lets you do this by performing side-by-side diffs without needing another tool. To see the changes on a file, click on the name of the file you want to see in the Source Control window. From here you can see the changes in the file and compare the differences.
Depending on your preferences, you can also view your diffs in what is called an inline view.
This lets you see all of the changes in a single window without splitting it up over two separate views. From this view, you can even make edits inside of the diff view.
Once you’ve made any changes you want to make to the file, it’s time to upload them to GitHub. Following the steps we went over before, go ahead and stage your changes, and then commit your staged changes. Once you finish these steps, you shouldn’t have any files displayed in the Source Control window.
Note that changes you’ve uploaded will still be in your working branch. If you navigate back to the main branch, you’ll see the original code before the changes you made.
main branch.In order to get these changes into your main branch, you’ll need to merge branches.
main.Congratulations! Now your main branch has incorporated the changes!
Let’s say you want to take your project and publish it up to GitHub. To do so, click the Publish Branch button in the Source Control window. VS Code will prompt you with whether you want to publish it as a private or as a public repository. Select the option you want, and then VS Code handles the rest.
Once VS Code finishes the publishing process, it will notify you that the project has been published to a repository on GitHub. You can click the Open on GitHub button to visit your project on GitHub and see it online.
Now let’s say you want to clone a repository so that you can work on it on your machine. This creates a local copy that you can use and sync the changes between the two locations. There are multiple ways that you can clone a repository, and this is an easy way to do it in VS Code.
Shift-Command-P on Mac or Ctrl-Shift-P on PC.Congratulations! You’ve just cloned the repository to your machine and can start to work on it in your local environment!
Did you know that you don’t have to do everything manually in VS Code? You could leverage Model Context Protocol (MCP) to safely let AI tools access external tools and data. The first step is to add the GitHub MCP extension.
At this point, the GitHub MCP server is installed. You can verify this by looking at the bottom of the Extensions view and seeing the section for installed MCP servers. With the MCP server installed, you can use Copilot chat to create some code for you, and it will do so by leveraging external tools where necessary.
For an example of how this works, check out the video version of this episode which walks through asking Copilot to create several issues to improve a flash card application.
And that’s it! We covered some of the most common ways developers use VS Code to interact with Git. We’ve gone over everything from creating repositories, to publishing on GitHub, and even threw in a little bit of using AI at the end. There are more advanced tips, but these elements are what you’ll use most frequently.
Happy coding!
Kedasha is a Developer Advocate at GitHub where she enjoys sharing the lessons she's learned with the wider developer community. She finds joy in helping others learn about the tech industry and loves sharing her experience as a software developer. Find her online @itsthatladydev.
Build what’s next on GitHub, the place for anyone from anywhere to build anything.
Catch up on the GitHub podcast, a show dedicated to the topics, trends, stories and culture in and around the open source developer community on GitHub.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。
