VS Code: explore commits in chronological order

Question

I'm looking for a feature to explore the repository at the time of a certain commit (see all the files in the repository at the time of this commit, including the previously committed files), and not just the files added, changed or deleted by this commit.

For example:

1. Commit 67c2a4b: Add .gitignore and Readme;
2. Commit 10f91d2: Rename Readme to Readme.md;
3. Commit 47a5777: Add LICENSE.

And I want to see the state of the repository at the time of 10f91d2 (second) commit: I should see .gitignore (changes made by previous commits) and renamed Readme.md (current commit) - explore the repository as it was before 47a5777 (third commit).

I was trying to find such a tool for VS Code and came across the "Explore Repository from Revision" feature of the GitLens extension. But this method seems somewhat strange to me. If there is no such tool for VS Code, then you can, please, recommend a third-party tool (preferably with C #, JS and TS syntax highlighting). Thanks in advance.

GitLens' "Explore Repository from Revision" feature:

• Install the GitLens extension;
• Open GitLens side panel and expand preferred branch in the "Repositories" section;
• Right click on preferred commit and select "Explore Repository from Revision" (in the explorer side panel You can see new folder named 'REPOSITORY_NAME @ SHORT_COMMIT_ID').

Answer 1

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.

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:

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.

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.

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.

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.