Stage, diff and commit changes using Source Control tab in VSCode
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.
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 egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
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!