Easily use Git and Github in vs code

Subscribe to my newsletter and never miss my upcoming articles

Hi there, Today I am going to show you the easy steps that you can follow to get used to Source control in vs code, it's a good feature and so why don't we use it for our daily development! Let's get started.

What is Git:

Git is a version control system which is the most popular one. It is widely used in the Industry. We manage our source code in Git. we can make changes and revert our changes easily. Learning Git is very essential for jobs because you have to use it anyway.

If you are searching for how to use Git in Visual Studio Code, then I guess you are familiar with git but if you are not, I'll be giving a brief description of using Git, won't regret reading this.

How to enable Git in VS code

Go to File>Preferences>Settings and search for Git enabled and enable it.

enable git.png

Creating a text file: for demo

I have made a folder and opened it in VS code. I have also created a text file inside it and added some text. On the left sidebar, you can see your Source-control button, where we do all our git work.

creating text file.png

Initializing Repository:

This is the first step that we do. Click on the Initialize Repository button on the side panel, which is equivalent to writing 'git init' in the bash terminal. It will create a hidden .git file in your folder/repository.

After initializing you will see this 'changes' section and 'U' written.

unstage .png which means that you have some change in hello.txt file and it is 'Untracked File'. Now you can discard that or Stage that.

Staging Changes:

The next step is staging our untracked file or in simple words adding the files. For staging, Hover over the file name under Changes and click on the '+' button to stage it. After that, you will see your file will move to the Staged changes area and U will be turned to A. You can also send the staged file to the Untracked section.

staging.png

Committing Changes:

This is the most important step, after this, your data will be stored inside Git and you revert changes or recover the code even after removing everything from the file. So to Commit Changes, we have to give some message in the Message section and click on the tick button to commit. This will store your code in the Master branch. Use some relevant message so that you can identify what changes you have made in this commit.

commit.png After that, all your changes will vanish that means, your commit is stored in Git and now you can continue your coding. And as soon as you will make any change in the file, your file will again move to the Untracked section with the 'M' sign.

This is the complete step of using Git in the VS code. Isn't it simple?

Other options in source control:

If you will go to the three dots on the top right of the source control panel, you will a whole lot of git functionalities, play with them, learn about them. It's very handy.

Interface.png

Pushing code to Github:

For this, you have to create a repository in Github.com. Give it any relevant name and click create.

create repo.png Now you will get some codes to push from the command line, but we are not touching the command line right now, we are going to do everything from VS code source control.

github push codes.png Go to three-dot in source control and click on the Push to button from the pull/push section. you will get a pop up "Your repository has no remotes", you may or may not get this. It is totally fine. Click on add remote.

add remote.png Here paste your Github repository URL that you can find on top of the Github commands, in my case, it is, https://github.com/arifimran5/gitTest.git and then give your remote name. Your remote will be saved in Vs code.

Final step:

Now again go to the Pull/push section in source control and click on 'Push to' you will get the same type of popup with a message to push your master branch. Click on that. and refresh your Github page.

final push.png and Here we go, our code is pushed in Github.

github rep.png But wait, Hold up Wait a second, we don't have to do this much if we just want to push our code. we can make our Github repository from vs code only. But you have to sign in to Vs code with your Github account, then it will be a 2 click of work.

Push your code to Github in only 2 clicks

Click on 'Publish to Github" from the bottom of source control.

directPublish.png Then you will be asked to authorize vs code to your Github account and then this option will be shown where you have to give a name to your repository and to choose whether you want to keep it public or private.

crreaterep.png Then choose the files that you want to push and it's done. It will automatically do all your work.

Isn't is AMAZING !

If you find this article useful and you have learned some good from this, please take a moment and share it with your friends and make my work to reach out to the world. Follow me on Twitter for daily development-related stuff. Thank you. Happy coding 😊

No Comments Yet