View a List of Commits & Undo Changes

Free Git Tutorial

Learn methods to undo changes in your coding, including how to install the Git Graph extension for Visual Studio Code and how to view a list of commits, plus find tips for undoing specific commits whether they've been pushed or not.

This exercise is excerpted from Noble Desktop’s Git & GitHub training materials and is compatible with updates through 2022. To continue learning web development with hands-on training, check out our coding bootcamps in NYC and live online.

Viewing Changes & Undoing Changes

Sometimes you make a mistake and want to go back to a previous version. Here’s how to rollback changes.

Undo Local Changes That Have Not Been Committed

If you have made changes that you don’t like, and they have not been committed yet, do as follows:

  1. In the Source Control panel vscode soure control icon you’ll see files that have been changed.
  2. Hover over any file that contains changes you don’t want to keep and click Discard Changes button vscode discard changes icon that appears.
  3. When it confirms, click Discard Changes.

    That file has now been reverted to the way it was at the previous commit (before your changes).

Install the Git Graph Extension for Visual Studio Code

To add some useful Git features to Visual Studio Code, you should install the Git Graph extension:

Full-Stack Web Development Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.
  1. On the left side of the Visual Studio Code window, click on the Extensions icon vscode extensions icon.

  2. In the search field type: Git Graph
  3. Under the Git Graph click Install.

View a List of Commits

You’ll need the Git Graph extension installed for this to work.

  1. Towards the bottom left of the window (in the blue bar), click Git Graph.

    Alternatively, at the top of Source Control panel vscode soure control icon you can click the View Git Graph button.

  2. In the Git Graph tab that opens you can:

    • Read through the list of commit messages to find a commit.
    • Click on the commit to see which files were changed.
    • Within the commit, click on a file name to see the changes.

Undo Your Last Commit (That Has Not Been Pushed)

If you made a mistake on your last commit and have not pushed yet, you can undo it. For example, maybe you added some files and made a commit, and then immediately realized you forgot something. You can undo the commit, and then make a new (correct) commit. This will keep your history cleaner.

  1. At the top right of Source Control panel vscode soure control icon click the More Actions button vscode more actions icon and from the menu choose Commit > Undo Last Commit.

  2. Your latest commit will now be undone. Your changes remain in place, and the files go back to being staged so you can unstage those files and make additional changes, add missing files, discard changes, etc. before making your next commit.

Undo a Specific Commit (That Has Not Been Pushed)

If you have made local commits that you don’t like, and they have NOT been pushed yet, you can reset things back to a previous good commit. It will be as if the bad commits never happened.

You’ll need the Git Graph extension installed for this to work.

  1. Towards the bottom left of the window (in the blue bar), click Git Graph.

    Alternatively, at the top of Source Control panel vscode soure control icon you can click the View Git Graph button.

  2. To figure out what the commits do (and thereby which commit you want to undo):

    • Read through the list of commit messages to find a commit.
    • Click on the commit to see which files were changed.
    • Within the commit, click on a file name to see the changes.
    • Close the changed file tab so you end up back in the Git Graph tab.
  3. Once you know which commit (that has not been pushed) you want to remove, in the Git Graph tab, Ctrl–click (Mac) or Right–click (Windows) on the name of the commit and choose Drop.
  4. Confirm that you want to drop it.

    That commit will be removed and the changes reversed. Your files have been updated so it’s as though those changes (and that commit) were never made.

Undo a Specific Commit (That Has Been Pushed)

If you have made a local commit that you don’t like, and it has been pushed, you can reset things back to a previous good commit. It will be as if the changes made by the bad commit never happened (although you will still see the commit was made, and then reverted).

You’ll need the Git Graph extension installed for this to work.

  1. Towards the bottom left of the window (in the blue bar), click Git Graph.

    Alternatively, at the top of Source Control panel vscode soure control icon you can click the View Git Graph button.

  2. To figure out what the commits do (and thereby which commit you want to undo):

    • Read through the list of commit messages to find a commit.
    • Click on the commit to see which files were changed.
    • Within the commit, click on a file name to see the changes.
    • Close the changed file tab so you end up back in the Git Graph tab.
  3. Once you know which commit you want to revert, in the Git Graph tab, Ctrl–click (Mac) or Right–click (Windows) on the name of the commit and choose Revert.
  4. Confirm that you want to drop it.

    A new commit will be created that reverses the original commit.

    NOTE: If there were any conflicts, you’ll have to manage them and then make a new commit.

  5. Push whenever you’re ready to upload those changes to GitHub so others can get them.

Another Git Extension for Visual Studio Code

If you want even more Git features in Visual Studio Code, you may want to check out GitLens.

  1. On the left side of the Visual Studio Code window, click on the Extensions icon vscode extensions icon.

  2. In the search field type: GitLens
  3. Under the GitLens click Install.

Here are a few things the GitLens extension does for you:

  • Adds new sections at the bottom of the Source Control panel vscode soure control icon such as Commits, File History, Branches, etc.
  • Adds new Git buttons at the top right of the window for navigating changes, etc.
  • When your cursor is in a line of code, it adds a comment (at the end of the line) about who and changed that line of code and when.
photo of Dan Rodney

Dan Rodney

Dan Rodney has been a designer and web developer for over 20 years. He creates coursework for Noble Desktop and teaches classes. In his spare time Dan also writes scripts for InDesign (Make Book JacketProper Fraction Pro, and more). Dan teaches just about anything web, video, or print related: HTML, CSS, JavaScript, Figma, Adobe XD, After Effects, Premiere Pro, Photoshop, Illustrator, InDesign, and more.

More articles by Dan Rodney

How to Learn Git

Master Git with hands-on training. Git is a free, open-source version control system that allows developers to track the changes they make to code.

Yelp Facebook LinkedIn YouTube Twitter Instagram