GitHub with Visual Studio Code Guide
Last Updated on March 15, 2024
Efficiency, simplicity, and team collaboration capabilities are some of the most in-demand qualities, in the modern working environment. Visual Studio Code as a code editor brings a lot of useful features for developers of all kinds. Pair that with the in-program use of the git version control system, and you have yourself an all-around go-to program for your developers to work on.
In this article, we will talk about the Visual Studio Code GitHub integration, from the basics of how to configure github vscode, to the detailed description of all of the useful features that comes with Visual Studio Code and GitHub working together. We will discuss
How to add GitHub extension to Visual Studio Code
To start the Visual Studio Code GitHub setup, you need to have a GitHub account and have downloaded, GitHub Pull Requests and Issues extension.
To use this tool properly, you need to know how to use git itself, or at least it won’t harm you to know how to use it. If you need a quick git summary check our detailed Git and GitHub Guide.
Once you install the extension, you will need to sign in to your GitHub account and authorize Visual Studio Code, simply follow the instructions provided.
How to set Git Repository for Visual Studio Code
Now that you have the Visual Studio Code GitHub extension installed, you can add a new repository to your editor. The simplest and fastest way to do that is by cloning a repository from your GitHub account.
Go to the Source Control panel, and click on the “Clone Repository” button. Then, when you select the Clone from GitHub, you’ll be asked to enable a sign-in attempt. Click on “Allow” to this git commands and proceed with authentication.
After that, in Visual Studio Code, you should be able to see all the repositories from that GitHub account. How to clone github repository vscode? Choose which one you want to clone, and click on it. VS Code will ask you to specify a location where the repository will be stored locally on your computer.
When the cloning process is complete, a pop-up window will show up in the lower right corner, with a choice of what do you want to with the cloned repository. You can choose to open it or open it in the new window.
All contents of that repository should be imported into the Visual Studio Code. Now you can freely work on your imported project with all command palette.
Staging, Commits, and Pushes with Visual Studio Code
Let’s say that you made some changes to your repository using Visual Studio Code. The editor knows which files were changed, and you can see that on the Source Control page.
You have two options when it comes to staging your changes. You can either choose to pick specific files you want to include in the commit, or you can add all of them.
To add specific files, you hover over the one you want to add (on the Source Control page) and click on the plus icon.
And if you want to add all of them, click on the More actions button (the “…” button), and in the dropdown menu, on the changes, choose “Stage all changes”.
To create a commit, you still need to be on the Source Control page, simply add the message you want, and click on the checkmark button, above the file list. This will create a commit in your local repository.
To push it to your remote GitHub repository, click on the “More actions” button, and choose “Push”. That is it. Your commit should be pushed to the remote repository. If you want to make sure it happened, you can always check it by logging into your GitHub account.
Ready to start working with GitHub right from VSC? Do the next best thing and secure your code with the first professional GitHub backup.
How to create branches from Visual Studio Code
Visual Studio Code and GitHub integration allow you to create branches directly from the editor. To do that click on the current HEAD from the git status bar, located at the bottom of the window. From the dropdown menu choose “Create new branch”.
Doing this creates a branch from the current working branch. You can name this new branch, and after that, it will set it as a current HEAD.
You can also create a new branch from any branch in the repository. To do that, from the dropdown menu choose “Create new branch from…”, then choose from where you want to branch, name the new one, and that is it.
How to create Pull Request from Visual Studio Code GitHub Extension
VS Code allows you to do Pull Requests directly from the editor. To do that you need to be on the GitHub Pull Request page. Click on the create new pull request button. Then choose a target branch to which you want to pull, and from which you want to pull.
When you click “Create”, if the branch is not yet pushed to the GitHub remote repository, the extension will ask whether you want to publish the branch and provide a dropdown menu for you to choose from.
The Create Pull Request, automatically allows you to review details in the pull request, in the Review Mode. You can add comments, reviewers, labels, and finally merge the pull request when it is ready to go.
Review a Pull Request
From the description page of the pull request, you can checkout the pull request by clicking on the Checkout button. Doing this switches VS Code into Review Mode, it will open the fork and branch of the pull request, and open Changes in Pull Request view, which allows you to see all the commits, and changes made within them, as well as providing you with the view of the diffs.
The diff editor, allows you to work as usual with the editor. You can add single comments, but also create a full review. After you are done with working on the pull request, you can either merge it or exit preview mode and go back to your previous branch.
Issues in Visual Studio Code
There are a few ways you can create issues in Visual Studio Code. You can do it directly from the Issues view, by clicking on the plus button. By using GitHub Issues: Create issue from selection, and GitHub Issues: Create issue from clipboard commands. You can also create them using a Code Action for “TODO” comments.
When creating issues, you have the option of using the default description or selecting the Edit Description pencil icon in the upper right to open an issue body editor.
You can work on existing issues, from the Issues page. By default VS Code will create a branch for the issue you are working on. After you are done working on the issue you can create a new commit.
Visual Studio Code GitHub extension allows you to customize many things around issues, for example, you can choose not to create a new branch when working on the issue, or generate a specific commit comment.
Visual Studio Code Git extensions
When working in Visual Studio Code using Gi or GitHub, there can be many more useful extensions other than GitHub Pull Requests and Issues.
GitHub Repositories extension
Without requiring you to clone the repository locally, the GitHub Repositories extension allows you to browse, search, edit, and commit to any remote GitHub repository right from Visual Studio Code. For many scenarios when you only need to review source code or make a little update to a file or asset, this can be a quick and efficient solution.
Git Blame extension
This extension allows you to see Git Blame information for the currently selected line in the status bar. This plugin displays a discreet note in the bottom toolbar relevant to the current line of code you’re working on, explaining who made the modification and when they made it.
Git History extension
This extension allows you to dig deep into the history of a file, a certain author, a branch, and so on. You may also compare branches and commits, as well as construct branches from commits.
Git Lens extension
Git Lens enhances the built-in Git features in Visual Studio Code. It allows you to see code authorship at a glance using Git blame annotations and code lens, access and explore Git repositories with ease, and obtain useful insights using powerful comparison tools, among other things.
Conclusion
Throughout this article, we presented unique features allowing you to integrate GitHub with Visual Studio Code to bring you efficiency, simplicity, and tools to empower team collaboration. We also showed you how to use them in your day-to-day work. Now is the very best time to start and test your new knowledge. So open your VSC and step into the fascinating world of GitHub.
Before you go:
✍️ Subscribe to GitProtect DevSecOps X-Ray Newsletter and always stay up-to-date with the latest DevSecOps insights
📚 Discover the top reasons why it’s worth considering to start backing up your GitHub environment
🔎 Check out which threats and incidents GitHub users faced in 2023.
📚 Find out which GitHub backup best practices to implement into your security strategy to have peace of mind that your source code is safe and sound
📅 Schedule a live custom demo and learn more about GitProtect backups for your GitHub repositories and metadata
📌 Or try GitProtect backups for the GitHub environment and start protecting your critical GitHub data in a click
