Git & Source Control

[00:00:00]
>> Burke Holland: After ten years of working with git, here's what I know. Git clone, git ad.git commit and git push. That's it. And I know that in a worst case scenario git push-F. Now, what I've realized is that most developers are kind of like I am. They don't really understand the ins and outs of git because it's complicated.

[00:00:23]
I think there's a course here at Frontend Masters just on Git by my co-worker Nina which I should probably watch to broaden my Git knowledge. But as it stands, I'm not very functional with Git. So I say that to say that if that's you and you feel that way, that's totally fine.

[00:00:40]
Lots of us feel that way. You're in good company. And so what I wanna do in this last section is just show you how you can use VS code to work with your source control. And I wanna show you just some common workflows that you can stick to.

[00:00:52]
So you don't have to worry about rebasing and cherry picking on all this other stuff. You just sort of stick to the basics here. So the first thing we need to do is we need to clone a repo into VS code. So I have one here, just called I love lamp, it's our simple project for our exercise.

[00:01:09]
And to clone it, I'm just gonna grab it by saying Clone or Download and get the URL. In the VS code, I'm going to say Clone and Git Clone from the command palette. And then I'll enter the repository URL and then it'll ask me, where do you want it?

[00:01:26]
So I'm gonna put it inside the Start folder here. That's the wrong exercise and we put it in the right exercise. Let's do exercise eight Source control, we'll put it in here. And then it's gonna clone it. And then it wants to know, do you want to add the clone, would you like to open the clone repository or add it to the current workspace.

[00:01:47]
I'm just gonna open it, which is gonna give us a new window of VS code and that project is now open inside the VS code. So it's opened and we are connected to Git with this project. So let me just show you sort of the highlights of source control inside of VS code.

[00:02:05]
So let's say, for instance, that we want to change this content here, right, this description. And because we know how to use multiple cursors, we could change both of these lines at one time. And what we really wanna do is, we just wanna remove this period. We don't want that in the description.

[00:02:22]
When I do that, you'll notice that we get a blue bar over here to the side, that shows us that something has been removed or changed. And you can see the diff here, right inline. And if you would like to, you can just undo directly from here. With this button and now we're back to where we were before.

[00:02:42]
If I was to remove one of these lines, now we see a little triangle and the triangle denotes that something has been removed. It's no longer there. And if we expand that, it'll show you what's been removed and of course you can revert off of that. Also notice that there's down and up arrows.

[00:03:00]
So you can move between changes in the file as well. So let's put that back. And then you can probably guess if I add a line we get a little green bar out here in the side. And that shows us that something has been added. So these are in line annotations in your files so that you can see what's actually been changed locally, versus what's been changed in source control.

[00:03:26]
So let's go ahead and remove this line here. And I'm gonna go ahead and let's go back and take these periods off. I'm gonna save. And when we click Save, we'll now have an item over here in our activity bar that's on our source control activity bar item.

[00:03:44]
And we can open the source control view with Ctrl+Shift+G. Now this is one of the only shortcuts that I think is the same on Windows and Mac. So Ctrl+Shift+G opens that view. And we can see inside our index file. If we click on the index file we can see we get a diff view so we can see what's been changed here.

[00:04:07]
It's these lines. And we can see that here and it also highlights and shows us that this was removed. So we can see exactly what's been changed.
>> Burke Holland: If we click this plus button here, we stage the change. This is the same as git add and if we come up here to the top and put a message in, we can say, fixing the description.

[00:04:32]
And then you can press Cmd or Ctrl + Enter and now you have performed a commit. Now, the next thing you need to do is you need to push it up to GitHub. And the way that you would do that, you can actually hit the ellipsis up here, you're gonna say Push.

[00:04:51]
Or you can come down here and click this. This is a sync down here. The difference between a push and a sync is that a push just pushes, a sync does a pull and then it does a push. So in other words, if you' pull and you've got conflicts, it will stop you on the push and say, whoa you can't do that.

[00:05:14]
So the sync is a better option just specifically for that work flow instead of the push. Although when you try to push you're gonna find out the hard way. So I'm just gonna go ahead and click the button and that's gonna push my change up to GitHub and it will be reflected in my repository.

[00:05:29]
So here's another very common workflow. You have made a change,
>> Burke Holland: Like this. And then you go in and you add it and you're like,
>> Burke Holland: Okay? And then you commit it and you're like, crap, I don't wanna do that. I need to add another change to this commit or this is not what I wanted to commit.

[00:05:59]
And this is part of the place where people are like, now I don't know what to do from the command line, okay? In VS code it's just as simple as saying undo last commit. And then if don't you want it staged, just unstage it. And you're back to where you were, right?

[00:06:15]
No harm no foul. Another thing that people do a lot is they'll make a commit like this, and then they will do a pull and they'll have conflicts or something like that. Or what they wanna do is they wanna revert back to what they had before. So the way you do that is you can stash your changes.

[00:06:32]
So what we'll do is we'll just say, up here and we'll say stash, like this. Let's see, sorry, let's undo the last command.
>> Burke Holland: All right, so these are our changes, so let's stash. And anything you can do from that ellipsis you can do from the command palette.

[00:06:53]
All right, stash message, maybe, not sure yet, okay? And now the changes are stashed. So to get them back, you wanna pop the stash, you wanna get it back off the stash, so we're gonna say, pop stash, git pop stash, right, on master, maybe, not just yet. And boom, you're back.

[00:07:16]
Now these are things that you can do from the Git CLI. They're all very doable, very easy. Not say easy things, but very common things to do, but I can never remember what the commands are, I don't know about you. I can't remember how to stash and pop things, but the VS code makes it a lot easier.

[00:07:31]
Another thing that's quite a bit easier is branching. So we can create a new branch here by just clicking on master and saying, create a new branch. And let's call this fix description, okay? And now I'm on the fix description branch. Now, let's say in fix description, I come in here and I'm another developer and I'm like, that's not right.

[00:07:53]
I've seen this movie. I know how this goes. This is a I ate a big red candle. I love lamp. If you've seen Anchorman, hopefully this reference should make some description. So you've fixed the description and now you want to commit this back. So let's go to our index file here.

[00:08:13]
It will show you your changes. Get it right. Let's go ahead and commit that. So now we've committed. So let's go back to our master branch. Master. And we're on our master branch and let's just say on the master branch, we say you know what? I kinda liked it with feeling.

[00:08:38]
It's simple, it conveys that I care. Let's leave it like that. So I'm gonna save that. And then I'm gonna go ahead and commit this as well. And I'm gonna say, say it like you mean it.
>> Burke Holland: Okay and now what I'm gonna do is, let's just say somebody else has got fixed description and I'm somebody else has done a fixed description, well we merge that branch in.

[00:09:07]
So we can merge by opening command pallet and saying merge. Merge branch. And we're gonna say, fix description. And right away, VS Code's gonna tell us, you got a merge conflict. Now, the reason we have a merge conflict is that we have two people that have changed the code outside of the origin, outside of upstream.

[00:09:29]
And Git cannot reconcile it doesn't know which one of these we want. Both of these could be valid changes. And so if you've used Git before, in outside or in a text editor, it puts this in your file which is hard to work with, all right? So you have files that now have characters in them.

[00:09:47]
The source control has inserted characters into your file. VS code provides a really nice view for working with these changes. So we can accept the current change, which is what we've got on master. Or we could accept the incoming change or we could accept both changes if you're a person that doesn't like to take sides, you can accept both changes.

[00:10:09]
And we can even compare the changes, which is gonna give us a diff. And then we can start a Live Share session as well. So Live Share, which we're not gonna get into today is a collaboration tool for VS code that allows two people or three or four or five to work in the same instance at once.

[00:10:27]
So maybe you and I would like to collaborate, instead of me walking over starting a Skype call, we just connect via Live Share. So what this does is, you start a Live Share session. It starts a session, and then I can look and say who made this change?

[00:10:41]
Who did this? And then can you get on this Live Share session and take a look at this with me and explain why you made this change? So I'm going to accept the incoming change. Now, we can go ahead and stage this. Yeah, I saved it already. Didn't I?

[00:10:56]
I didn't. Staged better description. Hit Enter and then we can push.