Become a VS Code Power User

Built-In Source Control

Steve Kinney
Temporal
Become a VS Code Power User

Lesson Description

The "Built-In Source Control" Lesson is part of the full, Become a VS Code Power User course featured in this preview video. Here's what you'd learn in this lesson:

Steve discusses the source control tab in VS Code, which provides a graphical user interface for managing Git. He explains how you can use this tab to stage and commit changes, view and compare different commits, discard changes, and perform other Git operations.

Preview
Close

Transcript from the "Built-In Source Control" Lesson

[00:00:00]
>> Steve Kinney: So some other major areas, just as we take a tour of the editor itself, is we do have this fun source control tab where you get a little bit of a GUI, graphical user interface, for those of you keeping track at home, for managing Git. I really like this, the other option that you can use, too, is that GitHub Desktop is also another graphical version.

[00:00:28]
I personally tend to use this not because it is better, but because I've used it for as long as I can remember. But there are options. So the nice part about this is, some of you, not me, have really good Git hygiene, and I'm proud of you. And you make very small commits the whole way through.

[00:00:50]
Some of you like to see the world burn and just do the fix stuff commit, or the make it work. Or I hate programming commit put in at 2 AM, I've been you. Where I aspire to be, knowing that I will never be that perfect Git practitioner, where I aspire to be is, after I've realized that I've gone too far down the rabbit hole with making a commit, trying to at least do several small commits out of my big mess, right?

[00:01:20]
Which, can you do from the command line? Yes, that's a full course in and of itself, try to do all that from the command line. If you wanna do it in VS Code, what's cool about that is you can basically, as you kind of go to stage stuff, you can see the various commits and stuff that you've changed.

[00:01:38]
And choose to stage various different parts, right? So here you can see some of the things that I've changed in this file, in this case, the add async, so on and so forth. You can also go ahead and open a file, discard the changes in a particular file, stage the changes in one file.

[00:01:58]
So if I, let's say I made a change, I honestly did what should have been seven commits, I can go check in a file at a time. I could say hey, actually, I only want a few of these lines, so on and so forth. And kind of reverse engineer being granular with it when I wasn't in the beginning, yeah?

[00:02:19]
>> Speaker 2: I don't know if you covered this already, but how did you get it to be not split view in the Git diff, the difference file? I think the default is like, it gives you-
>> Steve Kinney: Yeah, no, no, like every other time-
>> Speaker 3: You can click on the file, though, in the changes bucket.

[00:02:36]
>> Steve Kinney: What's that?
>> Speaker 3: You have to click on the file to get the split view.
>> Speaker 2: I see.
>> Steve Kinney: Yeah, this is when I'm in the file.
>> Speaker 3: It's there. So they have 1, 2, 3, 4, 5 on your line numbers there, spread that out to the right.

[00:02:53]
>> Steve Kinney: No, I think it's just a simple enough one that it compacted it down. I think if I had a bigger file, it would have been split. I think this one's so dumb and simple. But again, I can't split it here, But here are the two different line numbers.

[00:03:09]
But the important thing that I can do is, you can see on any given one of these diffs, on a bigger file, you will see two of them side-by-side, or more changes. I can either revert just these two lines, or let's say I made two different important changes that should have been different commits.

[00:03:25]
I can stage, obviously, I wouldn't want to do it in this case, but I could stage just this line, and I can commit them kinda separately, right? So if I made a big mess, I can kinda go in there visually, and you can do something very similar. Not that we're talking too much about, no, not comma, I didn't want comma.

[00:03:49]
In the GitHub editor as well, where you can select and deselect some lines. And break apart the commit, and pretend you were a better person than you actually are, right? And what you actually want to stage and not stage. As you can see, there's other stuff you can do here.

[00:04:08]
You can amend to the last commit. If it's not dirty, in this case, so if I go ahead and I reset all my changes. So I can do effectively what is not dissimilar from a git reset hard. And I can do it for all the files, I can do it for one of the files, right?

[00:04:26]
So on and so forth. But you can kind of see that, here if we discard all the files, and I can go ahead and do a rebase, or merge in a branch, or make a new branch. Or if I have the Github one, open a pull request from here as well.

[00:04:44]
And you can do a bunch of the source control stuff in here. I use a mix of both a graphical one and the command line, right? Whatever's easier, I'm not religious in either direction. Sometimes it's easier to commit line by line. Sometimes I know what I did and don't tell anyone, git add dot, it's good.

[00:05:04]
And I'll stage them together, yeah?
>> Speaker 4: I think someone mentioned, Chet mentioned the little icons in the upper right corner can do the splitting.
>> Steve Kinney: Yeah, let's make a change, there it is. Normally, that is how it looks. I think it's possibly cuz I am between the font size, so we can all see I'm very zoomed in, right?

[00:05:33]
So yeah, you can also check out there, but yeah, this tab will have most of the things you need. These little fun stars over here will also, so I can stage this, and it will use AI to come up with a commit message for me. Honestly, until I was preparing for this course, I never even bothered to click that thing to find out what it did.

[00:05:58]
There's something very special about preparing for a workshop where you start clicking on all sorts of things you never thought to click on. And I found out that stars mean AI. So, yeah, I think I just made the earth one one-hundredth of a degree hotter every time I click that one.

[00:06:15]
So there's that, but it wasn't bad. Cool, cool, cool, I'm trying to think what else. Kind of related to, if I have multiple languages, you might have multiple repos in a single project because you hate yourself. You can see the multiple repositories that you have. If you have that, it's cuz somebody else did that to you, I know, it's fine, cool.

[00:06:49]
So what else do we have about the source URL? Like I said, yeah, one could go much deeper, if I'm trying to go to most of the things that we care about. You can also see you've got to get history here as well that you can kind of take a look at and do all sorts of fun stuff with.

[00:07:04]
This is obviously not a particularly like it's me adding an extension example, so on and so forth. There is a library called GitLens, which will make you a bad person. Do I have it installed right now? Let's see, I did uninstall a lot of stuff.
>> Steve Kinney: So GitLens, again, it's an incredibly powerful extension that is really good.

[00:07:35]
But it comes with one warning label on it, which is, it does a lot of things. One of the things that you'll see is down at the bottom. It puts a git blame in there, which is fine when you're working by yourself, but will turn you into a bad person when working with a team, right?

[00:07:53]
There's something about seeing, cuz sometimes that's just the person who moved the file. They didn't write that code, they just moved the file, and now they're forever get blamed. But it doesn't always awake the best version of myself when I'm looking at something a little bit gnarly and I can see one of my coworkers' names on the git blame.

[00:08:10]
I don't like who I become, but I would say this is one that whenever you see anyone else using VS Code, you usually see that at the bottom, cuz everyone else uses it. So you can decide whether or not that's a path you wanna go down to. As you can see, I actively uninstalled it, cuz I'm also the manager.

[00:08:29]
And again, it doesn't make me a good person. And I need to not be able to git blame people that easily.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now