VS Code: explore commits in chronological order

Sticking with VS Code for Git History

Note: Per the edit/update to the question, each of the main 3 solutions below allow visually selecting a particular commit in history, with the ability to see which files have changes (the diff view) and ability to view those files in a diff view for that commit. The screenshots show a particular commit selected and a file list, with some examples of the diff views posted as well

GitLens

GitLens, as you mentioned, is good, and pretty full featured. It has a sidebar window that let's you search through all the commits in a repo, each file in each commit, look at the history of a particular file and even a line in the file. It will pull up a diff of a file that you want to see (that commit to the prior one), and even show inline in the code the last time and person who changed that line (the "blame" information).

Below, under "13 commits ahead" is a nested list of the actual commits. The second commit back in history is selected, and unnested underneath it is all the folders and files in the commit. When selecting a file (Blog.tsx in this case), the file history and line history sections below map to that particular file.

enter image description here

However - and this is true of anything you do in Git - it will take a while to dig into all the possible functions and you need to understand the underlying foundation of Git to get the most out of it.

For example, just clicking on the files in the commit history will bring up a diff of that file versus the prior commit. Example:

enter image description here

GitLens will let you open the commit on the remote (e.g. Github, etc.), compare the file with the current Git "Head" from any point in history, or change the comparison commit and then diff against any other one.

However, I find the interface a bit difficult to follow. It doesn't give a nice visual layout of the branches and commits that can make it hard to navigate around and know what you are looking at. So there is a bit of a learning curve and you need to be able to visualize in your head what all the branches are if the repo has any complexity.

That said, GitLens is very polished.

Git Graph

Git Graph is a great VS Code extension that appears to be an up-and-coming option for a top extension. It doesn't seem to have all the functionality of GitLens (yet, anyway), but it has a lot, and the key feature is a separate editor window where it visually graphs out the history of the commits, allowing you to click on any commit to see the metadata like the author, commit message, etc, but also to see the list of all files that changed in that commit, giving various functions you can perform on them (open, cherrypick into the working directory, open diff, etc.).

One option, of course, is to bounce between Git Graph and GitLens to accomplish everything you need.

Below the latest commit on master is selected, you can see the "pink" branch was merged into master on this commit. On the right is the list of files that had changes (files with something in their diff), which can be clicked to open the diff view in a separate window, among other functions.

enter image description here

Note that Git Graph currently (July 2020) does not have a sidebar or a right-click option for opening it. You need to go to the View -> Command Palette (or ctrl-shift-p in Windows) and type ">Git Graph" to see the possible commands. Select Git Graph: View Git Graph (git log) to open the main window.

enter image description here

Outside of VS Code (Standalone Git GUIs - Git Extensions)

I know that you asked for something inside VS Code, but I will throw out one other option, which is my standby most of the time. It is a standalone, open-source program, Git Extensions. Unfortunately, in the latest v3.x, it is Windows only, but if you use Windows primarily, it is a great visual Git GUI that allows you to handle 99% of all git functions needed.

It's in many ways a combination of all the best capabilities of both GitLens and Git Graph, allows you to compare files from any two commits, pull up a separate window with the history of a particular file (shows only the commits that file changed in), extract any file from any commit into the working directory, etc.

Below you see the same repo as the examples from the other tools, with the commit one behind master selected. On the bottom left the "Diff" tab is selected, which shows the files that changed since the prior commit. You can right-click and access all kinds of secondary functions on a given file (such as pulling it into the working directory, viewing the file history, or opening in external diff tool like VS Code). When selected (App.tsx below), on the bottom right a diff view is shown of the file compared to the prior commit.

enter image description here

Note: You can setup VS Code as your underlying Git Diff and Merge tool, and then if you open the files from Git Extensions with the external diff tool (on the right-click context menu for a diff, or during merge, it will open them in VS Code).

If you're a glutton for punishment - Git Command-Line

Finally, you can learn git command line and do everything that way. There is a big learning curve and lots of memorization and looking up esoteric flags and such, but if you commit to it and use it regularly, it will become second nature.

In addition, if you ever need to script/automate anything with Git, you'll need the underlying commands. Now, that said, with most GUI tools, there is a way to see what commands they are using (Git Extensions opens up a terminal and shows you the command and the response, which you can decide whether to have it close automatically on success or leave open, for example).

All that said, it's command line. You need to completely visualize and translate most output into a mental model of your repo. Steep learning curve and not very user friendly, especially for casual git users.

One advantage of command line is it works anywhere Git is possible. It works great directly in your VS Code terminal as well, and you can even use Git Bash as your VS Code Terminal on Windows.


A simple, native git solution agnostic of vscode or extensions, is just to use the built in gui; or gitk

With gitk you have traditional commit limiting arguments you can apply like:

--in-commit-order

--date-order

--author-date-order

--topo-order

You can specify a selected commit using : --select-commit:

An example command line call:

gitk --select-commit=826e7b73e1857fc91f88eafdd2f82a4d3bee2116

Would produce the history gui, that showcases all of your requirements like the diff, the tree view, if a file used added mode or deleted mode and comes with arrow buttons to navigate before or after commits, and select the commit you specified: gitk gui

Alternatively, if you just want to see a history with a specific revision starting point you can use typical git-rev ranges:

gitk 826e7b7

gitk histor rev range


With right-click, you have the option to 'reset branch to here', cherry-pick, revert etc; you can right-click a non-active commit for diff options. Although, you can go to the git gui at anytime.


You can even save your views for future references using the menu bar View: New View and selecting 'Remember this View':

gitk view