Visual Studio Code for Python Developers Transcripts
Chapter: Source Control with Git
Lecture: Viewing and Syncing Changes
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
One of the things I really love about the Git integration side of VS Code is that not only does it allow us to pull down and commit changes,
0:07
but it also allows us to see what changes were made and collaborate a little bit better with our teammates.
0:12
So what's happened so far, what we're going to take a look at now is that Brian and I have been working on this API,
0:18
and I made some changes on my machine. So now on Brian's side, he doesn't have my changes, and so he had to go and pull them down.
0:27
But obviously, it might be useful for him to know what exactly I did change.
0:31
So luckily, inside of VS Code, we have the ability to kind of look and have these little annotations
0:36
and these little hints inside of Editor that allow us to see that. So Brian, why don't we take a look and see some of those changes that I made,
0:43
and we could kind of take a look through how the Editor visualizes those things. Absolutely.
0:48
So one of the things to help people understand that we didn't visualize in a past video or demonstrate in a past video is the status bar.
0:55
We were covering it. I moved the Editor. So that we can see it now. We can see which branch I'm on. In the bottom here of the screen, I'm on the main.
1:03
If I want to synchronize changes, meaning I want to pull down any changes
1:06
and at the same time push changes up to the remote repository, I can click on this button. So that's what I did to get Cecil's changes that he made.
1:14
And in order for me to see specifically those changes, well, I can just open up the files and start looking at what's going on here.
1:23
And in particular, with the Git lens extension that we talked about previously,
1:27
that offers up little annotations on each line that gives me details on that. Well, who made those changes? What commit affected that line of code?
1:38
In this case, Cecil, an hour ago, made a commit that impacted this line of code here.
1:44
Oh, and I just changed it by accident by pressing the wrong button. And he put a commit message of update status router.
1:50
And when I hover over it, you can see some more details about that. Again, this is all provided not natively by VS Code,
1:57
but through the Git lens extension that adds these nice little touches on top of your project. So one of the cool things that I love about it,
2:07
and Brian, if you highlight that change that you did just now, like highlight that thing. So notice, if we can go on a line-by-line basis,
2:15
and we can see what exactly changed on this specific line. Obviously, we could go and see what changed in the whole project.
2:21
But if we're going down on a line-by-line basis, we can see that. And I'm actually kind of wondering, those...
2:27
icons or those little things that are highlighted in blue, can we click on those?
2:30
Like, can we click on that little hash or one of those things and see like some more context? Yeah. What does that do?
2:35
That brings up the Git lens inspect view on the sidebar. And now I can see the commit details from one hour ago.
2:45
I can scroll through, look at files changing. I had the unit. Well, I have an extra extension that does some AI stuff.
2:51
We get line history on that particular line. We can look at the whole file history. And more.
2:59
We can search through the commits, all kinds of great added features that Git lens provides
3:03
when you're using Git as your source control management system in VS Code.
3:07
And so that's one of the great things I love about like having that collaborative power inside of our editor.
3:13
So again, I can make changes on my machine. Brian can make changes on his machine. We can merge them together. We can see who's making what changes.
3:20
We can see what changed. And then now we can continue to collaborate in different places on different parts of the world. And all.
3:26
And that's what we're doing within the power of VS Code. It just kind of makes it a seamless experience. All right, Brian.
3:31
So why don't we go ahead and make a change, an additional change to the status writer that's here? Okay. So on top of that annotation, right?
3:38
Why don't you add a comment? And inside of that comment, let's just say, you know, set routes to the default route, right?
3:46
Essentially, that just means that whenever I hit slash status, this is the this is the method that's going to get invoked. Right.
3:53
Because for folks that are familiar with using, you know, web APIs and routers,
3:56
it could be like, you know, a slash get or slash do this or slash do that. But this one's just the default route.
4:02
So we're just adding a comment to let, you know, other teammates know that this is what's happening here. Yeah.
4:08
And that way, when when somebody uses this function, maybe somewhere else in here, if they wanted to, they know what that is intended to do with little annotations over the top.
4:16
Right. VS Code will provide that.
4:19
Now, the one thing that I want to call out now that I made those changes, one, Git Lens is showing their little inline annotation that I made that change 24/7.
4:26
Four seconds ago and it's uncommitted changes.
4:29
But VS Code, what's built into it natively is this little gutter indication that's showing that I have made some changes.
4:35
It's this blue based on the theme. It's that's what's deciding there.
4:39
And then I can click on it and see the diff of what what's what those changes entail.
4:44
And so we can see it goes from red, which was nothing to green the comment there. So that's what VS Code does.
4:50
But the other thing that also ends up happening is in the source control view on the sidebar from the activity bar on the sidebar.
4:56
So if I go to the side panel, rather, you can see the changes that are pending. They're not staged yet for commit. But if I wanted to. I can do that.
5:05
Another way that VS Code indicates these Git changes, source control management changes is by annotating or not annotating, but highlighting that file in a different color based on the theme.
5:16
In this case, it's like a tint of orange or so. And then there's also an M to indicate like it's been modified. Right.
5:22
And when you hover over it, you can see that detail, too.
5:26
So that's what VS Code shows and indicates to you changes you've made that are affecting your source control management system and your project history.
5:36
Now, in the next video, what we want to do is talk about how we can manage pull requests.
5:41
For folks that aren't familiar with pull requests, it's kind of like saying, hey, I made a change and I want you to review it before we merge it.
5:48
In this particular video, I was a little bit gung ho. I was just like, take my change. Right. Like, that's just kind of what it is.
5:54
In the next one, it's we're going to be a little bit more polite. A little bit more developer etiquette. So I'm going to create a PR.
6:02
I'm going to send it over to Brian. He's going to review it. And then we'll see using the GitHub pull request extension how we can merge those in.
6:10
And now we can continue with our workflow.