Visual Studio Code | How to use git and github

welcome I'm Jakob and today we are going to learn how to use git and github on Visual Studio code or in other words we will see how we can add our project or folder from Visual Studio code to get and then to get up and we are going to learn how to add an existing project in Visual Studio code to get an get up we will then learn how to do commit and push whenever there are any changes and push the changes to github we will also see how to clone an existing project from github to Visual Studio code and then finally how to remove the project from git so let us get started and step number one will be installed get on your system so if you go to this link this is a website for Visual Studio code and if you go here this one so you can see this is a documentation on Visual Studio code and here is the good support and it says usual studio code will leverage your machines get installation so you need to install git first before you get these features and make sure you have at least version 2.0 dot o so this is what you need and let me also copy this link and I will make this available in the notes and all these notes will be available to you so I'm adding a references section and I will add this link and you can go to your command line so you can see I am on Windows here and this is my Mac so I will show you on both you can go to your command line on Windows and say get space - - version and if you get any get version which is over - dot or that means you are good to go and in case you do not have let me also show you on my Mac I will go to terminal and say get space - - in version and I have get on my Mac as well now just in case you do not have it you can go to get SCM download so this is the site download get SCM I will also copy this and make it available in the references section and here you can just download and install it like any other software and just in case you have any issues you can go to my website which is automation step-by-step comm and then you go to online courses and scroll down you will have a section for git and github and here you will find the videos on how to set up get on your system so just in case you want to watch this you can go from here I will also copy this link and make it available in the notes so once you have git installed on your system you can do step number two which is create an account on github so here you can go to github.com and here you can create an account and login in case you do not already have an account you can give our username your email and select a password and sign up for git and I have already created an account so I will sign in i will use my username and my password to sign in to get I will also copy this here this is the link and then step number three will be create a repository on github so you can just create a new repository and here you can click on this new button or you can go to this plus drop-down and select new repository from here so I'm just going to click on this new button and you can give a repository name now in my case for the first demo I just want to upload this project or this folder which is my JavaScript project so I'm just going to name this as JavaScript and you can give some description which is optional and I will keep it public and create the repository so you can see this is created and you also have this URL you can just copy the URL of your repository so here I will say utilize repository on github and copy the URL and step number four will be now you will go to your Visual Studio code and you will open the project or folder so here in my case I am already on my Visual Studio code here and I have my project or folder open here so here you can see we have a section for source control so I will go here source control step number five will be go to source control section and before you do that there is a setting that you should check so if you go to your Visual Studio code if you are on Windows you can go to file and go to preferences and go to settings and if you are on Mac you can go to code preferences and go to settings and the shortcut is you will find the Settings icon at the bottom left here so we have a Settings icon here go to the settings and here search for you get enabled and here you should see option get enabled and this should be checked so this is something you should check so check it is enabled from settings and then step number five will be go to the source control section so I will go here source control and now click on this get icon and click on get icon so I will just click here and here it is asking to select a folder or a workspace so you can go to choose folder and select your folder browse to your folder or it is already giving me the folder which is open in visual studio code so I will select this and now you can see it is now adding to get and you can also see it is now showing this notification that there are 20 changes which are not yet committed and you can also see the icon has changed so all these are unstaged change if you go to this here you can see this is showing the icon that means all these are not yet committed so now step number six will be commit the changes and for that you can give any commit message here and either press command + Enter on Mac if you are on Windows you can just press ctrl enter after giving the message or you can give the message and then press this commit button which is a tick mark icon so I will say this is my first commit and I can either press command enter because I am on Mac or I will just click on this tick mark so now I am getting a message so here would you like to automatically staged all the changes and commit them directly I will say yes and if you say always it will not always show you the message it will do it directly so for now I will just say yes and you can see it is now committing and now if you see all the files are gone from source control and here you can see everything is committed so we have done the changes I will say give commit message and commit the changes and now step number seven is we have to push the committed changes to github repository so for that what you can do is you can just go here so when you see go to the source control you will find there are three options here this is for commit this is for refresh so it will just recheck the changes and then we have these dots and all the other options are present here so you can see we have a push here and also there is a option to show get output so when you click here it will show you all the git commands here so now if I go to here and say push here I am getting a message your repository has no remote configured to push so that means I have to add my remote repository which is this one so for here I should say add remote repository or this means the github repo and then this will be step number eight so what I will do is I will go to view and select show command palette you can also use the keyboard shortcut command shift + P or control shift NP in case of Windows so I'll go here and I will say add remote and you can see we have got this option get a dream mode I will select this you can give any name I will say this is JavaScript and press Enter and now I have to give the URL so I will just copy the URL from my github and have it here paste it here and press ENTER and now you can see it is now pushing to remote and if I go and refresh my github repository so as of now the changes are not yet come we have just added the remote we have not yet pushed now I can go here and say push or I can also see at the bottom we have this option to publish the changes so I can click here as well I will click here and now it will push to the remote repository and you can also see the commands here and now I have also got this message would you like code to periodically run git fetch if you wanted to periodically fetch from the repository you can say yes or I'll just say ask me later and now if I go and refresh my repository here on github you can see all my changes are here and this is first commit and everything is here so here step number 9 will be check changes on github repository you should have all your changes here and now whenever you make any changes for example I go to any file I create a new file or I can make any changes to any file and whenever I will save you will see this is now tracked by git and you can see it is showing me a notification that there is one change which is not yet committed I can go here and also if you go to any of the files if you do a right-click you can also add this file to get ignore now what is get ignored whatever files or whatever expressions you put in this kit ignore file those files will not be added to get so for example we have some settings files library or some result files that you do not want to push to the remote repository so you can also do this so for now I will just give some commitment message here edit newline now you should always give some meaningful commit messages so that it is easier for others to refer and I will just click this and say yes and now I will click here to synchronize the changes and I will say ok and if I go here and refresh I should have my changes here so you can see added newline it was done 18 seconds ago so similarly if I make any changes here I will just save this and it will show me and I will go here and see here and also you can see when you go to your source control and select the file it shows the changes so this is my local and this is from github and it shows the changes so you can keep on just adding the commit message do commit and then push to the remote repository so this is how you can do the first two things which was how to add an existing visual stored visual studio code project to get and get up and how to do commit and Bushman ever changes happen now how to clone from github to visual studio code now suppose somebody gives you their URL from github for example I will just take this URL that we have just added this repository URL and now I want to clone it from github so let us see this I will go to my Visual Studio code on Windows and you can see this is a new Visual Studio code and I will do the same thing I will make sure that git is enabled and then I will go to the source control here and here I will go to view and command palette and I will say git clone so here we have git clone now here I will give the repository URL so this is the URL and press enter and now I have to give the I have to select the location where I want to store so for example I will just create a new folder on my desktop and I will name this as GS project and here I will browse and select this folder and say open and I will say open in new window and now you can see I have got my entire project from github into this new location so similarly suppose I copy this URL and I will make it available in the node so that you can get it from here my JavaScript project so I will say my JavaScript project and I will add the URL here so you can just use this and you will get my entire project on your visual studio code so this is how you can do it now how to remove project from gate so here let us say this is your project and now if you go to your command palette so here you have get closed repository so you can just say get closed so that now it will close the get repository and then you can go to the location of your project physically or your folder so for example in my case on Mac this is the folder I will go to projects and JavaScript this is the folder and you will find a hidden folder called dot git available if you do not get this you can press command shift + dot on your keyboard this is for Mac command shift + dot you will see this hidden get dot git folder you can just delete this same thing if you see here on Windows if you open the project and if you save you and here if you go inside you should see hidden items you should check this and you will have the hidden folder dot git you can just delete this and then your project will be removed from yet so this is how you can remove the project from gate and this is how you can do integration of git and github with Visual Studio code I hope this session was very useful for you please do share with your knowledge with others and I will meet you in the next session of automation and related topics have a good day

Channel: Automation Step by Step

Views: 561,908

Keywords: Version Control in VS Code, How to use git in visual studio code, how to do source control in vscode, visual studio code git and github integration, git and github in vs code, vscode git integration, how to clone github repository in visual studio code, how to commit and push visual studio code project to github, vs code git integration, visual studio code how to do version control, vs code git tutorial for beginners, vs code how to do version control using git

Id: Fk12ELJ9Bww

Length: 16min 20sec (980 seconds)

Published: Thu Jul 18 2019