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.

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

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.

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

Share this video with your friends