Learn Git Clone, Commit, Sync And Push Changes Using Visual Studio Code

Introduction

In this article, I will show you how to perform GIT Clone, Commit & Push using VS Code. In my previous articles, I already described the Git operation using Git Bash. For that, we need to write commands to perform Git operations and how to manage GitHub Public Repo and Private Repo using VS Code.

Today, I will describe the below-mentioned points in detail,

1. Know about Git Clone using VS Code
2. Know about Git Commit using VS Code
3. Know about Git Push using VS Code
4. Differnce between Sync Changes and Push
5. Perform Git Clone, Add, Commit and Push changes using commands in VS Code terminal
6. Work on existing file using commands in VS Code terminal

Note
Before going through this session, please visit my below-mentioned sessions related to Git and GitHub,

1. Introduction To Git
2. Steps For Configuring Git With Details
3. Let's Know About Git Add, Git Commit, Git Status, And Git Push-In Details
4. Let's Understand How Git Maintains History Of Version Or Commit Ids With Details
5. Steps To Initialize A Git Repository And Push The Changes To GitHub In Details
6. Let's Know About Git Branches And How To Implement It
7. Let's Understand About Git Branches And Its Real-Time Uses
8. Let's Learn About Merging The Git Branches And Create Pull Request In Details
9. Steps To Ignore Files Using Gitignore In Details
10. Let's Learn About Git Default Branch In Detail
11. Steps To Create And Configure Organizations In GitHub In Details
12. Let's Learn About GitHub Projects In Detail
13. Let's Know About Team In GitHub In Details
14. Managing Files On GitHub In Real-Time - Owner Uploads Project In GitHub Repo
15. Managing Files On GitHub Using Git Bash In Real-Time Scenario - Know About GitHub Reviewer
16. Managing Files On GitHub Using Git Bash In Real-Time Scenario - Removing A Specific File From Pull Request
17. Learn Git Clone, Commit, Sync And Push Changes Using Visual Studio
18. Manage GitHub Repository Using Visual Studio Code

Know about Git Clone using VS Code

Before doing commit or push, We need to do clone the repo. For this go to GitHub repo and copy that repo URL as shown below.

Then go back to your VS code and in the section of Source Control and click on Clone Repository as shown below.

Then it will ask you, Where you want to save this repo to your local and once you select the location then select repository location as shown below,

Now, It will ask you... Would you like to open the cloned repository as shown below,

Then click on Open in New Windown. You will get one pop-up line "Do you trust the authors of the files in this folder?". You should select the check box and click on Yes, I trust the authors as shown below.

Now you can see these files in GitHub repo are now available with repo name i.e. GitProj in our clone after clone using VS Code as shown below,

The same you can compare with remore GitHub repo as shown below,

Know about Git Commit using VS Code

Let's create a new file called Satyaprakash.html.

Here I want to commit this new file to my remote GitHub repository. You can commit the changes of existing file as well as new file. So, before commiting you need to configure Git in your local. So, to do that we need to open New Terminal as shown below,

So, we need to configure our user name and email of GitHub account before commit any changes to GitHub remote repo. It is also same as push and pull operation. You can get yout user name and email from https://github.com/settings/profile of your GitHub account.

The below commands are required to configure user name and email in global as shown below,

for global : This is for all repository

1. git config --global user.email "Put your e-mail ID here"
2. git config --global user.name "Put your user name here"

for local : This is for current repository

1. git config user.email "Put your e-mail ID here"
2. git config user.name "Put your user name here"

Then you can check your user name using below command as shown below,

• git config user.name

If you select Source Control then you can see 1 peding changes with your new file name as shown here. Here U means "Untracked". We need to add this change to staging area.

Now we can see the symbol chnages from U (Untracked) to A (Added).

Before commit , We need to give commit message here and then click commit.

The changes are commited successfully as shown.

Know about Git Push using VS Code 

Once it is commited, Now it's time to push those chnages to GitHub remote repo.

You can do it in 2 ways. These are using Sync Changes and Push operation.

Sync Changes : It will first pull from your remote GitHub repository and then push it. Sync will do pull and push both.

Push: It will only push your changes to your remote GitHub repository.

Once you click on Sync Changes then you get a pop-up and click Ok. Here in origin/master, The master is the default branch in the GitHub remote repository.

Now we can see that new file Satyaprakash.html is available in GitHub remote repo with commit message.

Differnce between Sync Changes and Push

• Sync Changes : It will first pull from your remote GitHub repository and then push it. Sync will do pull and push both.
• Push: It will only push your changes to your remote GitHub repository.

Perform Git Clone, Add, Commit and Push changes using commands in VS Code terminal
 

Step-1 : Clone the repo

You can see the repository in your local path.

Step-2 : Create a new file and  perform Add and Commit operation

I created a new file called Kulu.html and add this file to staging area.

Now in Source Control we can see that file status is Untracked.

Then commit this file with message. We need to configure our user name and email of GitHub account before commit any changes to GitHub remote repo.

1. git config --global user.email "put your GitHub mail-id"
2. git config --global user.name "put your GitHub user name"

Step-3 : Perform push operation

Once the changes are commited then it's time to push changes to remote GitHub repository. Here master is the default branch.

Now we can see that file in our remote GitHub repository as shown below.

Work on existing file using commands in VS Code terminal

Let's check the content of Satyaprakash.html in GitHub repo.

We need to update Hello World !! to Hello Satyaprakash Samantaray !!. Once I updated the file content then status is updated to M means Modified.

Now add this changes to staging area.

Then commit these changes.

Once the changes are commited then it's time to push changes to remote GitHub repository. Here master is the default branch.

Now we can see the updated content of Satyaprakash.html after push changes to remote GitHub repository.

Summary

In this write-up, we have learned the below details,

1. Know about Git Clone using VS Code
2. Know about Git Commit using VS Code
3. Know about Git Push using VS Code
4. Differnce between Sync Changes and Push
5. Perform Git Clone, Commit and Push changes using commands in VS Code terminal
6. Work on existing file using commands in VS Code terminal

Thank You & Stay Tuned For More