From the course: Working with LinkedIn Learning Exercise Files on GitHub

Use Diff tools to compare two branches - GitHub Tutorial

From the course: Working with LinkedIn Learning Exercise Files on GitHub

Use Diff tools to compare two branches

“

- [Instructor] One of the advantages of these repos is that you can quickly see the difference between two branches. That can be really useful because it can show you what the instructor typed between the beginning and the ending of a video. There's a couple of ways you can look at those. Now, the first requires an extension called GitLens. You can get it from the Visual Studio Marketplace. Now, GitLens gives you a lot of advanced features. To install it, just click on the install button in here. You can also find it in your Extensions tab. And then you can do a search for that extension. I've already got it installed, but I'm going to enable it so that you can see it. Now let's go back to the source control menu, and you can see some additional options down here at the bottom. I'm going to go to the branches section. And from here, you can choose the branch you want to compare. I'm going to take the 02_02 branch, and I'll make this window a little bit bigger. And I'm going to hit this button to compare this branch with another branch. From here, I'm going to choose the 02_02e branch. If I open this up, this will show me that there's only one file that changes. It's called the search.js file, so let's take a look at that. You can see this on the right that it's showing me the difference between those two files. That's nice because I can see what the instructor has done from the beginning to the end of the video. And I can try to follow along. Now if I want to follow along, I'm going to open up this file in my editor. I'm going to switch back to the explorer. And I want to open the search.js component, which is in the components folder. Now, when I click it, I'm going to right-click to open this up to the side. Now I can see the changes as well as the current file. I'm going to make this window a little bit smaller, or as small as I can. And I can see that I need to type in a new variable right here. So I can start making those changes. And I can follow along with the teacher. There's another way you can do this that might be more helpful if you're trying to follow along, or if you want to discuss this project with somebody. Let's go back into our GitHub repo. From any GitHub repo, you can type in a slash at the end of the repo name, and then type in compare and then type in a slash, and then the two branches that you want to compare with periods in between. I'll do 02_02b and compare that to 02_02e. I'm going to hit return. And you can see a similar set of windows that shows you the difference between the two projects. You can have this opened up in a different window to follow along with what the teacher has done. You can view this in unified or split mode by clicking on these buttons. Either way, this is a great way to see what you're supposed to be doing in a video and even copy and paste changes between the two.

Contents