How to view inline diff of multiple files at once in VS Code?

Question

In VS Code, for a given commit I would like to see inline diffs from all files in one view or page, so that I would not have to click to see diffs for each file separately. I can't find any extension that would do this.

Basically I'm looking for a feature like there is in Bitbucket when you click on a given commit, and you see all the differences in one page. Something like in the picture below.

Alastair

Answer 1

This was, as commented, posted on the GitLens issue-tracker; one commenter appears to have gotten fed-up, and created a separate extension for exactly this purpose.

You need a pair of two:

• Whole Diff, by Jacek Kopecký
• Diff Viewer, by Guilherme Caponetto

Then you get a nice single-click button that produces something like this:

Crackerjack

If anyone want the diff to be side by side as in the image do the followings: 1) go to vs code settings. 2) search for outputFormat 3) set it to side-by-side – Woad

Answer 2

VSCode happily supports this starting in January 2024 (version 1.86). See https://code.visualstudio.com/updates/v1_86#_review-multiple-files-in-diff-editor.

Note the ... menu with the "Inline View" toggle item seems to be missing though for "multi diff". So to get inline view you need to add "diffEditor.renderSideBySide": false to your settings.

Nunez

Answer 3

in the SCM bar you have a COMMITS view

• context click a commit and Select for Compare
• context click another commit and Compare with Selected

Now in SEARCH & COMPARE view you can click a changed file and see a diff

Deuced

This unfortunately opens each file in its own editor tab. The question was how to "see all the differences in one page". I would love to see such a feature as well. – Biamonte

@Biamonte Not in its own tab, the tab is reused if you click a different file, at least with my settings, Create an issue if it is not implemented yet – Deuced

@Deuced - yes, the tab is reused in this scenario, but still you can view the diff for only one file at a time. I would like to view diff in all files at once, just by scrolling, like it is displayed in the screenshot from bitbucket – Alastair

Temporary workarounds I found, but still not the exact feature I request. - Both in SEARCH & COMPARE and COMMITS view, I can use arrows and Space/Enter to select next file in the diff - In SEARCH & COMPARE when clicking Ahead or Behind, there's a globe icon (🌐) which opens the comparison on remote in the format I want (works on Bitbucket and Github). Similarly there's a globe icon for each commit in COMMITS view. Works only for pushed changes. – Alastair

@Alastair Have you checked whether there's an open issue on Git Lens? Maybe it's worth opening one: github.com/Axosoft/vscode-gitlens/issues – Biamonte