How to use Git inside of VSCode - 2020

hi there it's better here again the guy who hates tomatoes but loves for and development in today's video you will learn how to use get inside of vs code this video is suited for someone who knows what git is but is not really comfortable in the terminal and would like to use the git integration inside of vs code we'll start from scratch I've got a blank vs code window and now I will drag one of my empty folders into it to create a project or working directory to make it a git repository we would need to first check whether we have a git installed okay so try it get version on your computer and if something gets output it then you have get installed if not then you would need to go to the GUID website and download gate for your operating system [Music] now you have to set your name an email in the git config the command is get config - - global and then use a dot name to set your name and use a dot email to set your email if you've already configured get in the past and you probably don't have to do this step but I'm just stating it here for the people that are starting really from scratch to check whether you have your name and email already set up in the git config simply type in - - list you should be able to see the email and name in the config and to quit the view type in colon and queue and hit enter to initialize the get Kotori we can go to the git tab click on initialize repository I'll delete the default commit message or we could go to the terminal and type in git init okay so both of them do the same thing and if you go to the terminal and type in git init and a folder name then this would create a subfolder with a new git repository okay so if I bring this inside of my finder you'll see that it creates a new folder my project so you can either create repository in the root or in the subfolder I will delete my project I will need it for this tutorial and then I'll open the get start folder again by default when you initialize git repository it creates a first branch calls it a master and that's what you find on most project so you can see it in the terminal you can see it in the bottom left corner of vs code and that's how you also are able to switch between branches so clicking on the master I would be able to create a new branch or switch to another branch before we start interacting with branches let's create a file and make our first commit now let's review some of the UI that we have available when we want to make a comet okay so let's go back to the file you see the you over here that marks the file as untracked next to it we have the stage changes then we have the discard changes an open file okay so if I click on the plus we just staged our files and the a means the file has been added if I click on the - we did unstitch our changes okay so that's what the + - does the icon on the left from it opens the file so if I close it this would open it for me on the Left we have the get the commit button refresh and again all the other options okay so let's do the commit all go back to the message type in our first commit and hit the tick this will create the first commit you can ignore my message over here you probably don't have the same and that's how you create your first commit okay to check whether it's really committed we can type in gridlock that would give us the text output in the terminal or we could go to the timeline the new vs code timeline and we'll see the first commit over here okay so that's how you check the commit timeline inside of vs code now we can make second set of changes again staged them this time we will use the commit amend okay so this will take our changes and amend it to the previous commit instead of creating a new one we have the option to change the commit message and when we hit enter and go back to the timeline we see the commit again with the changed message and both changes saved that's how you use the commit all amend and the sign of is the same as get all but it adds little signature at the end of the commit message to see all the other options in action pushing and pulling we firstly need to make sure we push this to a remote repository okay at the moment this is only local so no one else would be able to check this out and work on this project with us and for that we will need to go to github and creating new blank repository we will call it get vs code demo and I'll leave everything empty we'll make it public and hit create okay that will create the repo give us few options how to add code to it and if we look carefully you see that we've already done some of these steps we only need to add the origin edit this URL as the origin of our repo and then push our master to the origin okay so we only need to do these two steps it's the same as in push existing repository from command line okay so these are the two steps we need to do so let's copy firstly the first line paste it in vs code this will add the remote to our repo and save it as a origin we needed to do that as a first step and the second one is we need to push our master branch and push it to this origin URL okay so we also need to do the second step and let's paste it in [Music] now we pushed the local master into the origin and we should be up and running and be in sync of what the master on remote the Hesse and what do we have locally okay now they are both connected as you can see the icon over here also changed and that is a good sign that our changes are published and they are available for someone else to pull and also if someone else pushes changes to the remote we'll be able to pull them down now if we go back to github and refresh the page we'll see that we have one branch with one commit so that's the code we had originally only on our local now it's published and let's go to the readme file and edit it locally so edit it on the server and then we'll be able to push the changes or pull the changes back to our local okay so I'm gonna add another line save the file now the file on the server is modified but our changes are currently not here we need to put them ok so that's where the pool command becomes handy if we click on it we should be pulling the changes from the server and updating them in our local repo ok so now we are now in sync we pushing changes to remote we're pulling them to our local and that's how you work with get inside of es code we've covered a workflow where you starting from scratch firstly on your local and then pushing it to remote but what if you get handed this git repository URL and you just want to clone it and run it inside of es code okay so that's what we will look at next I've got a plane window obvious code no folder open and I've got an option to open a folder or clone a repository okay so we will do the clone repository or I can press f1 and a search for git clone in the menu these will do the same and if I hit enter I will be asked for the repository URL I will need to go back to github or bitbucket whatever you use find the clone URL come back to vs code paste it in then vs code will ask you for a folder on your local where you want to store this okay I will navigate to my desktop and YouTube demos 20 20 and hit select you can see I'm doing it in the root folder of YouTube demos because it will create the GUID PS code demo folder for me okay so if I would create manually folder here it would check out the git repository inside of that folder ok so just be mindful of that that it will create folder for you and it will match the name of the repo after it's done you will be asked whether to open it or open in your window I will click on open and now we have the same code as before but this time we did clone the repo instead of starting from scratch now let's have a look how we can create new branches in vs code we can go to the left bottom label of master click on it and we get the create new branch option from the drop down menu when we click on it we can enter the name of the new branch and that will create our new local branch now let's make a simple comment hitting command and enter to speed up the committing and then we will click on this clout icon this will publish our local branch to the remote once it's done and we go back to github we will see the branch being published and someone else can check it out and work on it with us okay so that's how you publish your local branches to the remote and that's it all for today hope you've enjoyed this kit tutorial inside of vs code and what we've done we've learned how to clone repo how to initialize it manually how to push it to the remote URL and how to simply commit and how to generally work with get inside of vs code if you've enjoyed this tutorial don't forget to smash the like button subscribe to the channel for more videos like this and if you think there is something I've missed in this tutorial let me know in the comments and I'll make video about it next time until then happy coding bye [Music]

Channel: Ihatetomatoes

Views: 121,141

Rating: 4.8830318 out of 5

Keywords: ihatetomatoes, git, vscode, tutorial, how to, javascript, git clone, git init, git config, git branches, commit, push, pull, fetch, remote, origin, github

Id: F2DBSH2VoHQ

Length: 12min 13sec (733 seconds)

Published: Fri May 08 2020