MS Visual Studio Code - Guide To Git

Hello guys again, this is Muhammad Habib Jawady and today I will be showing you how to use MS visual Studio Code in order to work with git properly. This will be a hands on tutorial, I hope you will find this useful as the number of users of ‘Code’ has grown dramatically throughout the year and the need for a full tutorial on how to use it is became an urge to help people master its enormous number of features.

For full documentations of VS Code, I will recommend visiting the official documentation at : Docs. I will skip introducing this Code editor and I will assume that you have prior basic knowledge with code editors and IDEs . For additional info on the matter, you can visit this guide and gain a basic awareness of git concepts .



GIT CLONE

First, we will be creating our demo project, the repository name is  ‘demo-for-vs’ and initialize it with a README markdown , aka README.md



Then, we will copy the cloning .git url located in the top right corner and open MS VS Code menu to choose the option ‘clone git repository’ from the welcome page on startup window and paste that URL.



We hit enter and fill where we want our repository to be cloned and then we choose ‘Open repository’ from the next  pop up .

Making/Staging changes

Now let’s make some changes to our local version . For this, I will change the size of our title in the README file and add a new file ‘index.html’.

If you click on the ‘Source control’ tab located on the left (under the search logo), you should be able to see this,



And you can notice that on the left, there is the original version, and on the right your local version.

Now we will have to stage our changes by hitting the ‘+’ icon on the right of the files’ names.

Git commit

In order to make a commit, you will have to hit that  button on top of the files as shown below,



Git push

In order to apply changes in the original repository, we will use run the regular push command from the terminal which is integrated in Code.

For this purpose, we first go to ‘view’ >> ‘Integrated Terminal’,



Then we run - git push origin master



—-> Success ^^

I hope you learned something new today … For any inquiry, feel free to submit a comment .