Menu

Virtual Geek

Tales from real IT system administrators world and non-production environment

Part 1 Git version control integration in Visual Studio Code

Part 1 Git version control integration in Visual Studio Code
Part 2 Git master branch source control integration in Visual Studio Code
Part 3 Git clone version control integration in Visual Studio Code

git github visual studio code diagram vcloud-lab vscode git version control git server version database.png

This article will get you to using GIT version control tool with Visual Studio Code. Git is a collaborative, free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.Version control is a type of system that allows you to keep track of changes made to your code over time. Git works as snapshot tool (point in time). These version controls can be used collaboratively from any other computer by multiple where Git is installed. You can download and install Git for url https://git-scm.com/download/win

I am using in house bonobo Git server for version control system and to keep all my codes central location, you can use github or bitbucket also. The steps I am performing are same on github and bitbucket, just UI is different. Create new repository online. Give repository a name , keep all other options default. Once new repository created click it to check some information.

bonobo git server repositories create new repository folder name regexe visual studio code vscode github.com github devops push codes.png

Currently online Git repository is empty, Once you click git server repository, it shows Git URL. Copy the url link, This Git URL I will use in later instructions.

visual studio code vscode repoisitory browswer  repositories git gitbub git url bonobo git server github alternative anonymous push psscripts devops.png

I have all my scripts kept on one of the local disk folder location C:\temp\PSscripts. Open Visual Studio Code, from File >> Open Folder, You will be seeing scripts files and folders in Explorer view.

visual studio code vscode open folder file, psscripts powershell pwsh how to use visual studio code with github.png

Next go to View >> Terminal and configure git first by using below commands.

git config --global user.name "UserName"
git config --global user.email "UserID@vcloud-lab.com"

Solved Visual studio Code make sure you configure your user.name and user.email in git

Powershell visual studio code vscode psscripts Terminal view command Palette, Debug Console, SCM, extensions, git, github source control code.png

Next configure git.path on vscode. Click on the left - bottom side settings icon, choose Settings from list. Search for git.path, go to Edit in settings.json or click the Icon. Add below 3 lines. First is comma put it in the end of last line (you will need to write code in json format), second line enables git and third is path to the git.exe location. Save the file with Ctrl+s button pressing in combining.

Your git location might be different, based on the 32bit or 64bit version of application installed. I have installed 64bit SCM-Git application.

,
"git.enable": true,
"git.path" : "C:\Program Files\\Git\\bin\\git.exe"

visual studio code vscode settings settings.json git.enabled git.path c program files git  bin git.exe git powershell version control debug path and filename of the git executable devops .png

Next from the left hand side go to SOURCE CONTROL tab. It will show empty and show a message No source control providers registered, Click on + icon to Initiate Repository and select the directory folder from the list (Same folder we opened on VSCode). When it initiate it will create hidden metadata .git folder under selected folder and this is local repository, We have connected to remote git server yet.

Once the folder repository is initiated successfully, As there are no files added in the local repo, All the files and folder will show as changes with U means uncommitted files/folders. Before staging/committing give them some useful name, for all my first commit I give name 'Initial Commit'. Click on the check button. It shows information message There are no staged changes to commit. Would you like to automatically stage all your changes and commit them directly. Press Yes

visual studio code source control initiate repository no source control providers registered  initial commit there are no staged chages to commit.png

Once all the files are staged and committed, go to menu View >> Command Palette or press Ctrl+Shift+P. In the popped up box Git: Add Remote and click on the selection. Provide a Remote name and press Enter. 

This is critical step, As shown earlier from Git server copy the remote Git url and paste here. Press Enter to confirm. You will be prompted for username/password. Configuration is completed but Files are still not pushed on the remote git server repository. 

visual studio code vscode command palette source control git add remote powershell provide remote name enter url for remote git press enter to confir, bamboo git server github.png

While configuring git configuration, you can also check logs on the OUTPUT tab. Next I will click on Menu icon 3 dots .. and select Push to option, Click the earlier used git url. All the files and folders will be pushed to remote git server, it will take time based on the files size to upload. In the bottom click on Yes to confirm Would you like code to periodically run 'git fetch'?.

visual studio code vscode source control changes git github pull rebase push to sync code to periodically git fetch remote repository commit all stage all changes unstage devops code control master branch.png

On the Git server under repository browser you can view the uploaded /pushed files, with given commit  messages. they are all successfully pushed/uploaded.

bonobo git server repositories browser commits master github.com visual studio code vscode git source control codes powershell devops way.png

All above step by step is for fresh start, now below demonstration shows what happens when you create, delete or modify files. On the Source Control it shows the count of changed files. U is Uncommitted or New, M means file is modified. Click on the check button to commit files with useful comment message, as below.

github visual studio code source control vscode uncommitted new modified changes terminal vscode github stage and commit git push add remote clone.png

Before committing files you can also compare what are the changes on modified files, Click commit check button if modifications are good, click on the menu 3 dots ...  and press Push to, Pick a remote git link to publish the branch 'master' to. Steps are completed here.

visual studio code vscode add a new remote powershell git server github.com changes source control devops code writing.png

To verify changes check the remote git repository. you will see the new changes with added files, new dates and comments. In next article I will write blog on how to create branches for version control using git.

bonobo git server powershell code source control vscode visual studio code devops source control desired state configuration github.com version control.png

Useful Articles
Docker Error response from daemon i\o timeout internet proxy
Cannot connect to the Docker daemon at unix:var run docker.sock. Is the docker daemon running
How to install Docker on Linux
How to install Ansible on Linux for vSphere configuration
How to Setup Passwordless SSH Login on Windows
configure remote ssh extension on visual studio code

Go Back

Comment

Blog Search

Page Views

11272878

Follow me on Blogarama