GitHub with Visual Studio Code Guide
Last Updated on December 3, 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.
Frequently Asked Questions:
How to use GitHub Copilot in VS Code?
To use GitHub Copilot in VS Code you should have the GitHub Copilot extension installed. The GitHub Copilot Chat is automatically installed during this process. For this to work you need to have an active GitHub Copilot subscription for your personal account.
Make sure you approve the necessary permission requests and click Authorize Visual Studio Code.
After you’ve signed up for GitHub Copilot and activated the extension, you can verify that it works. Open up your VS Code and check if the GitHub Copilot icon is next to the Command Center. If so, this will give you quick access to Copilot functionalities in VS Code.
To open the chat view, select the Copilot icon and then Open Chat. Your Copilot Chat should be available on another Secondary Side Bar, there, you can chat with Copilot!
What is the difference between VS Code and GitHub?
The main difference between Visual Studio Code and GitHub is that the former is a code hosting platform, whereas the latter is a code editor. Furthermore, VS Code is actually a desktop application and GitHub is accessed through the web. That permits users to code using any of their devices connected to the internet.
Another difference is that GitHub has a lot of features that support collaboration while Visual Studio Code is better for solo work. Moreover, with Visual Studio Code you do not get native CI/CD capabilities, and with GitHub, you do.
How to add a GitHub token in VS Code?
To add a GitHub token to VS Code, first generate a personal access token from github.com. Save your access token and then open your project with Visual Studio Code.
Then, in your Visual Studio code terminal, write:
git remote set-url origin https://<personal_access_token>@github.com/<your_username or organization_name>/<repo_name>.git
Then you can try git push, keep in mind that you need to enable workflow when generating a personal access token.
How to set up GitHub for Visual Studio?
To set up GitHub for VS Code you need to have a GitHub account and also download and install Git along with the GitHub Pull Requests and Issues extension.
- Go through the authentication process with GitHub in the browser and then return to VS Code.
- You may need to add your authorization token manually if you are not redirected to VS Code. Copy the token from the browser window and, in VS Code, select Signing in to github.com from the Status bar. There, paste the token and press enter.
- Use the git clone command in the Command Palette to search for and clone a repo from GitHub. You can also use the Clone Repository button in the Source Control view (it’s available when there is no open folder).
- In the repository use the dropdown menu to choose a repo that you want to clone locally. You can also use filters to simplify the search.
- You will be asked to sign in whenever you do something that requires GitHub authentication. Go through the signing-in process and return to VS Code. Bear in mind, that only GitHub Enterprise Server Supports using PATs to log in. There are various methods of authentication for GitHub. These include your username and password with 2FA, a personal access token (PAT), or an SSH key pair.
How do I run a Visual Studio Code from GitHub?
There is a quick way to open a GitHub repository in VS Code in your browser:
- To start off, open your GitHub repo in any browser.
- Locate your repository’s URL and next to “github” paste 1s. For example, change this:
“https://github.com/Makamaka63/teams-clone-main/blob/main/client/src/state/settings/renderDimensions.js”
into this:
“https://github1s.com/Makamaka63/teams-clone-main/blob/main/client/src/state/settings/renderDimensions.js”
- Now, just hit enter – this should take you to a screen where the repo actually gets opened in VS Code in your browser.
How do I open VS Code in the GitHub shortcut?
There is a shortcut to open VS Code in the browser from GitHub. Navigate to your GitHub repo and press “windows icon” with “.” on your keyboard. Alternatively, for Mac it is “option”, “command” and “.”.
You can also select the url of your desired GitHub repository and change “.com” to “.dev”. However, for this to work you need to be logged in.
How do I pull a file from GitHub to Visual Studio Code?
To pull a file from GitHub to VS Code, you need to either open your existing local repo or initialize and create a new repository.
- Create a new branch to capture changes so that they are isolated from the main branch.
- After you make any changes on your branch you should commit the changes locally.
- Then, push the local branch to GitHub. You take advantage of the Source control extension. This helps debugging if any commands fail.
- Go to the Source Control icon in the activity bar. Click on the ellipsis and select Show Git Output.
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
