Visual Studio Code

Challenge 1: Solution, Part 2

Visual Studio Code

Check out a free preview of the full Visual Studio Code course

The "Challenge 1: Solution, Part 2" Lesson is part of the full, Visual Studio Code course featured in this preview video. Here's what you'd learn in this lesson:

While wrapping up the solution to Challenge 8, Mike shows how to use source control within VS Code.


Transcript from the "Challenge 1: Solution, Part 2" Lesson

>> Mike North: So I'm going to make a really quick commit, and we will fast forward with the next section here.
>> Mike North: Actually, you know what, I'm not going to use this. I will show you how to make a commit from within code, there is source control built into this.

I'm glad I remembered, I'm trying to develop good habits here. So the way you would do that is under the View menu here, you see an SCM option. And I've actually managed to like remember this key bonding which for me is shift and CTRL and G. G for get.

And this is what we get. It takes up this side bar area the same way that we had our file tree there, there's this source control thing. You might have actually seen. If you had, what do they call that, the activity bar, you might have something like this and is this icon right here.

Now, I take it away because we're not showing the screen to everyone here, this is not, it's not valuable for me to have that stuff there. But it's this right here, and what we got is unstaged changes and if we click each of these. Let me zoom out a little.

If we click each of those we can see we get a side by side dif. So it's basically saying like here's what happened, you've added these lines here. And we can actually like resolve conflicts and deal with staging and unstaging selected ranges. If you've ever used something like source tree which is in that last scene, like stand alone get UI.

It's really nice for like protect, like removing unnecessary changes to white space. I can do lines that you may have added. You can really clean up your commits nicely. So in this case I can say I want to stage this range, and basically add my cursor somewhere in this code that I have added.

It looks like I've made another change to this file. Let's see. Nope. That's a stage change.
>> Mike North: Let's see what's actually stage change. Sorry, it was just that line. So we can remove that unstage it. We can just go like that. Maybe we have to select the whole thing, there we go.

So note that this file here used to be under here under this changes title. And that would have represented an unstaged change, right? Something that is not going to be part of this commit that we're making. I also it looks like I fixed that image. As we started up it was like the image wasn't relative path to that visual studio code logo was not correct.

So we will stage that as well. And in this case, I am going to actually get the whole file. I will just hit this plus. And that's not an individual chunk of code. It is the whole file. If we had hit this button here, that effectively reverts the whole file back to whatever the head of your current branch is.

So discard these changes, get rid of them. We can add our commit message here. It's gonna be exercise one, Emmet. And you can hit this check mark or command enter, same way you would like the same key stroke for like submit this chat message things like that. And I've just made a commit we can tell so down here I've got this little icon.

That says publish changes. That's cuz I've never pushed this branch up to my origin before. So I'm clicking that. It's saying which Git remote would you like to publish to? And I'll send it to the origin, and then from this point on, now it's gonna change the logo to this sync thing and effectively what that does is it pulls down maybe changes that might be available on that branch, basically brings my branch up to date, and then pushes my changes up.

So those operations together, sort of synchronize a given branch with whatever we've got stored on GitHub. So it's a pretty nice UI, and in particular, if you're confident that you've changes and you just wanna add everything and create a commit and push it up, that is fine with the terminal.

It's very difficult with the terminal to look at the side by side disks, which basically everyone should be doing, right? You've like the way, what ends up happening if you don't look at things before you send them off is you end up like accidentally changing tabs to spaces or doing unintentional last meaningful changes to codes up.

This gives you a way to proofread it. Let me show you another thing that can be done here. So I've just made another change, and I can switch to inline view here. It's probably more appropriate for our purposes, like showing this on the screen all nice and big for you.

Note that now you've got side by side divs. It's no longer side by side, you have an, side by side, you have an inline def. So if we were to then say, delete this here. There you go. You can't really see it but the line my cursor is on is highlighted in green right now.

So those who are watching online can see it but the projectors,it is a very light green. So this is nice to be able to see like what's been added, what's removed. And you can select a whole bunch of stuff here and cycle through various changes. And say like I want to revert selected ranges and it'll like get me back to where I was at before.

So, really nice for looking at like chunks and get terminology, this will be like blobs. Right, there are sections of codes that represent some mutations that has happened. Some change that has happened. That is a finer grade than you usually have when working with get through the terminal.

So I like this a lot, and I'm going to start using it. I might still pull and push myself because especially for my purposes, where I oftentimes don't want to re-base a feature branch or something like that. You don't necessarily want to do that synchronization thing the way that Visual Studio code does it, but for forming a new commit, this is brilliant.

And I have no need for another get UI anymore.
>> Mike North: Okay, so if I save this, we should see that the file disappears from changes because it's now like it is equal to head. I'm completely lined up. And down here, I've got the ability to select branches, and I've got no little asterisk next to the branch name, which is what I would get if there were changes here.

That indicates like, I am forward from my head
>> Mike North: So we've committed that and we will press on.

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