How to Initialize a Git Repository using Visual Studio Code and publish the code to Git Server (Visual Studio Team Services).

In previous article we learned about how to clone a existing Git repository to a local system. Today we would learn how can you Initialize a Git Repository in your local system first and then publish it to the centralized Git repository.

Lets start ..

Step 1: Create a folder in your local system directory.


Step 2: Open Visual Studio Code.


Step 3: Click on  Left_Bar_Explorer_Icon(Explorer ) Icon displayed on the left side bar of Visual Studio Code and Click on Open Folder button

Click Open folder link, existing on the Welcome Page under Start section (Shown below)


Go to File > Menu > Open folder
Use Ctrl + K, Ctrl + O

Step 4: Select the folder created above which would start displaying in Explorer windows as shown below.


Step 5: Click on the Left_Bar_Git_Icon (Git) icon displayed on the left side bar in Visual Studio Code. This would show a button “Initialize Git Repository”

Step 6: Click on “Initialize Git Repository” button. This will create a local .git folder in the local folder. This .git folder is the folder which does the magic and keep each and every detail about local branches, remote branches, local check-ins, log history and every other information which is required from version control perspective.

Once the repository is initialized the complete folder where the Git has been initialized would start to be tracked. Now git would start tracking this folder (HelloWorld) and shows the changes made with in this folder.Initialize_Repository_6

Step 7: Let’s add a new file to “HelloWorld” folder. As soon as any file is added or modified, it would start showing on the Git Icon on the left side bar as a number. If one file is added and one file is modified then total 2 would be displayed on Git icon as shown below where only one new file has been added and Git icon shows one.Initialize_Repository_7

The file added above is shown as “U” means Untracked. This is because this file is still not tracked by Git. This is because the file is not checked-in into the local repository.

Step 8: Click on the “+” on the right side of the file and Staged it. Provide some comment in the message box and click on Commit_All_Icon(Right) icon on the top, to commit the file in the local repository. Here just note that the file would be checked-in in the default master branch.Initialize_Repository_8

Now we are done with the changes and want to push the changes on the Git Server but you can see all the options available in git menu are disabled.Initialize_Repository_8.1

Also on the left bottom, Status Bar does not show Publish_Icon (Publish) icon which publish a branch to the remote server.


This is because Visual Studio Code does not know where the files need to be pushed or in the other words the destination is still not defined. or technically it can be said that Git Remote is not defined.

Step 9: Let define a git a remote with the url of Visual Studio Team Services (VSTS). Here I would like to mention that I have a account on Visual Studio Team Services and this is free to use up to 5 users. So if you have a small team of 5 members, you should give it a try.

As I do not have any predefined repository on VSTS so first we need to create Repository in VSTS. As the scope of this article is to use an existing Git Repository so I am assuming the HelloWorld repository is already created in VSTS. Creation of repository in VSTS is very easy and after login to the VSTS, you need to create a project which internally create the Git repository. You have choices to choose either Git ot TFVC.Create_Remote_Repository

Default remote which Git refers by default is “Origin”. I would be defining a local remote using “Origin” only with “HelloWorld” repository created on Git Server. After defining a local remote Visual Studio is aware about that to which repository the code has to be published and what would be the repository name.

The command for defining a git remote is git remote add <remote name> <repository url>

Open Terminal and Run the above command.Define_Remote

Once the remote is defined, publish icon would be displayed in Status Bar.Publish_After_Remote

Step 10: Now once the remote is defined, you can push your files to the remote server. The command to push the added/modified files to the server is

git push -u origin –all


If all goes well, you would get the messages shown above which push all the objects to the specified repository and the Sync_Icon (Sync) icon would be displayed in Status Bar.


Now whenever you have any local commit to Push or any commit to Pull, it would show up in the status bar itself as shown below.


Here it shows that 1 commit is required to be Pulled from server and 1 commit is required to be Pushed to the server. After clicking on Sync icon the local branch and server branch would be Synced and both the code base will be same.

That’s it…

I hope this article would help you to setup Git for the first time where you have files in the local system and the same need to be published to the Git server for the first time.

Happy Coding!!!


Configure Git with Visual Studio Code


After a long time, today I got a chance to share my new learning with you all in which I will discuss how to Configure Git with Visual Studio Code. We  recently started working on an AngularJS application and decided to use Visual Studio Code Editor for development.

As a first step we needed the Visual Studio Code (VSC) to be configured with Team Foundation Server (TFS). VSC has inbuilt capability to be configured with any Git repository (DVCS). Here I would like to mention that VSC does not have capability to be integrated with TFS repository (CVCS).

After searching the net, I still could not make out what is the easiest & straight forward way to configure Git in VSC where the Remote Git Repository is already available because I did not find any UI Clone command under Git menu. Also there is no way to define the remote repository location which need to be cloned.

Git Context Menu

Git Context Menu

After playing with VSC for some time, I found the way to configure VSC with Git in just 5 steps which were easy and straight forward.

Let’s see what are those 5 steps.

Step 1: Install .Net Framework 4.5 from Web Installer or Offline Installer.

Step 2.a: Open Visual Studio Code

Step 2.b: Go to View > Integrated Terminal

Step 2.c: Navigate to the directory (Use DOS CD command) where the remote Git repository need to be cloned. Lets say we would like to clone under C:/Git/ and suppose the remote repository name is sg_angular.

Step 3: Before running the Clone command, we would be running the following command to Cache the Git Credentials in Windows else when ever Git Sync/Pull/Push command is triggered, it will ask for credentials. This step can be avoided, if you are OK to provide the password every time.

Cache Credentials to avoid prompt every time.

Cache Credentials to avoid prompt every time.

Step 4: Now type git clone <Your Remote Git Repository URL> like shown in the below picture. Press Enter.

Clone Command

Clone Command

Step 5: Credentials window should be opened. This would ask the credentials which would allow you to connect with remote repository.

Git Credentials Window

Git Credentials Window

Once the credentials are provided, VSC will start cloning the Remote Repository under navigated folder.

Make sure the git command is typed in small characters else you may get “fatal: cannot handle Clone.exe as a builtin“.

Clone Remote Git Repository using Integrated Terminal

Clone Remote Git Repository using Integrated Terminal

In order to use the local repository, Please Go to File > Open Folder and Select the folder from C:\Git\<Git Repository Folder> Or Your own folder. This will open all the files in explorer and you can start changing the files.

That’s All…

Happy Coding..