Stage, diff and commit changes using Source Control tab in VSCode

Tomasz Łakomy
InstructorTomasz Łakomy
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

Some developers prefer to use git in a terminal, some prefer more GUI-based solutions.

VSCode has both terminal and a GUI which allows you to be able to stage, diff, commit (and many more) files to a git repository without having to leave your editor. In this lesson we're going to see how to stage/unstage changes, how to create a commit message, how to revert a commit and push it again.

Instructor: [0:00] We have been working on our app for a while. We would like to make sure that we are not going to lose our changes. We would like to commit them to our repository. In order to do that in Visual Studio Code, we can click on the Git app over here.

[0:12] Here, we can see all the modified files that we have in our project. If we hover over a file, we can see a bunch of different options. First, we can open up a file to see what's the current status of it. If we click on the file name, we're going to be able to see the difference between the current version, and the version that was previously coming to the repository.

[0:30] If we decide that we would like to get rid of some changes, we can click on the discard changes button over here. We're going to get a warning. "Are you sure that you would like to discard the changes in this file?" Yes, we would like to. I'm going to do the same for this other file. Now, we are ready to commit our work to the repo.

[0:45] In order to stage changes, which means that they would be part of the next comment, hover over a file and press, "Stage changes."

[0:52] We're going to do this for all the files. Of course, if we decide that some files do not belong in this comment, we can unstage the changes by clicking on this minus button over here.

[1:01] There's also an option to unstage all the changes, which I am not going to use right now. In order to commit those changes, type in the commit message and then press the keyboard shortcut over here to commit. I am going to put in lesson finished, and I am going to use this keyboard shortcut to commit the files to the repo.

[1:16] Of course, we may decide that we didn't like those changes after all. In order to revert those changes, you can click on this menu over here and click undo last comment, which are going to move the changes that we had before to stage.

[1:27] Now, for instance, we can decide to remove those CSS changes, and I am going to commit lesson finished only JavaScript. Next, we're going to commit all the remaining changes by clicking this stage all changes button over here, lesson finished styling.

[1:44] Now, we have all the changes committed to the Git Repository.

~ 42 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today