In this blogpost I’m going to describe how to setup VS Code with Github repository. Hopefully this guide will save you time and you don’t run into the issues I did. So why would you us VS Code with Git? This will allow you to manage version control directly within your code editor. It provides an interface for staging changes, committing updates, and resolving merge conflicts without switching tools. This integration will help you maintain clean, trackable code especially useful for collaborative projects.
Steps
Before we get started you will need to signup for a Github account. After that a few tools like VS Code and Git need to be installed. To install these tools I will use Winget which is the Windows Package managers. This will make installations really easy. After the installation a few configurations need to be made and you should be able to start working within 15 minutes!
Install VS Code
1. To install VS Code start powershell and use winget to find the latest VS code by typing.
Winget search "visual studio code"
2. In this guide I will use the regular version of VS Code which has the id “microsoft.visualstudiocode” to install this version we need to type:
Winget install microsoft.visualstudiocode
Install Git
Now we’ve installed VS Code we will install Git. This tool is a distributed version control system designed to track changes in source code during software development.
3. For the installation of Git I will use Powershell and Winget just like with VS Code. First we will search for Git.
Winget search git
4. In this guide I will use the git.git version which is the lates stable version.
Winget install git.git
Setup Repository location and Git
Now that the software is installed, we will begin the configuration so that we can use VS Code with Git.
5. We need to create a folder to store the cloned Github repositories on the local disk. For this purpose, I create a folder named github on the C drive.
6. Now we will configure the username and email used by Git. The Username and Emailadress will be used when committing information to github. If you have not yet restarted PowerShell after installing Git, please do so before continuing. Otherwise, the git config command will not be recognized. Enter the commands with your own name and emailadress.
git config --global user.name "<name>" git config --global user.email "<email>"
Configure default clone directory in VS Code
ow we are configure the parent directory to the github folder we’ve configured in the previous step, using the setting “git.defaultCloneDirectory”. This will save you time correcting the folder each time you’re going to clone a directory.
7. In Settings search for: “git: default clone” to find the setting “git: default clone Directory” and press “Edit in settings.json”.
8. Configure adjust the setting “git.defaultCloneDirectory” in this example I configure the ” c:\github” directory and save the configuration by pressing “CTRL + S”
9. Now close the settings.json by pressing the X on the tab.
Configure default location when opening files or folders
10. In Settings search for: “path” . You should be able to see “Files -> Dialog: Default Path” in the list at the topright. Enter the same github folder location as we’ve configured in the previous step.
Clone github repositories
After completing all the previous steps, we have configured VS Code and Git. All preparations are complete, and we are ready for the final step. We will now clone a repository from GitHub and use it in VS Code.
11. Open the Explorer in VS Code and press “Clone Repository”
12. Select in the top of VS Code “Clone from Github” to clone the repository.
13. A popup will appear telling the github extension wants to sign in using GitHub. Press “Allow” to continue
14. If you haven’t logged into GitHub yet, you’ll probably see the screen below to log into the GitHub account whose repositories you want to clone.
15. You will be asked to authorize VS Code to access your GitHub account. You can approve this by clicking the green “Authorize Visual Studio Code” button.
16. After authorization you will be redericted to VS Code. Select in the top the repository you want to Clone. In this case I will select the intune repository.
17. Now select the location you want to use. In this location a folder will be created with the repository name, so you don’t need to create a subfolder. The default clone location which we configured will be opened, but you can select another location if you want to. The repository will be cloned when you press the button “Select as Repository Destination”.
18. After some time the repository is cloned. Press “Open” to open the repository in VS Code.
19. A notification will appear if you trust the authors of the files in the folder. Press the button ” Yes, I trust the authors” if you trust the authors. If you do not trust VS Code will open the folders and files in restricted mode . You can also check the box “Trust authors of all files in the parent folder” this will trust all cloned repositories in the repository location (c:\github). Only select this if you trust all cloned repositories in this folder.
20. You are now ready to start working with your new setup!
Settings file
The settings are stored in a file that can be found at the following location
C:\Users\<username>\AppData\Roaming\Code\User\settings.json
I hope this blogpost will help you. If you have any comments, if something is unclear, or if you have any questions, please let me know in the comments.