In VS Code, how can I view a list of files with staged/unstaged changes, where clicking an entry opens a comparison/diff view?

Question

I am looking for a plugin or feature of Code to see all the changed files and changes as we can see in SourceTree --> File Status feature, I am attaching a screenshot to demonstrate what I want, it is very easy to go over the changed files with this feature without going over all the project tree-view. I have searched plugins and could not see a single plugin doing this, there are very good ones but they show the changes in a file, does not list you all the changes in the project folder. The reason for this is I do not want to leave my IDE for this.

I am aware of this nice feature Highlight changed files in file tree within visual studio code

Answer 1

VS Code has this builtin. It's the Source Control View. In the Activity Bar, its icon looks like /. You can click on that, or use the command palette's Source Control: Focus on Source Control View command.

It displays all repositories in the workspace, and for each one, lists a section of files with staged changes, and of files with unstaged changes. Clicking on a file will open a tab highlighting those changes.

In VS Code 1.85, there's even a button to show an overview diff of those changes in one single tab ("multi-diff editor"). See related release notes and related issue ticket.

Documentation for VS Code's Source Control features can be found here.

Answer 2

Within Git Lens, when on your branch. Under Commit -> 'Compare Working Tree with <branch, tag, or ref>', enables you to compare a branch against, lets say, master. So, when comparing the branch with master, under 'Compare Working Tree with master', against 'files changed' it shows the number of files that have been changed, and has a tree list of files that have been edited in the branch.

Selecting any of the files from the list opens a diff view of the file (from branch) against master

Answer 3

If you are at your current branch at which you push your code , then simple check the timeline for that particular file.

Answer 4

Perhaps Git Lens and the specific part is to look under the Repositories --> <Name of your repo> --> <x files changed>? If you click a particular file under that, then you can see the changes which is similar to SourceTree.

I've clicked the Piece.jsx file and the editor shows me the diff.

In addition, if you want to see the diff inline as in your screenshot, you can do it by unchecking this setting in User Settings of Git Lens