Git diff/patch-view UX: Better UI for seeing all patches, staging and discarding selected hunks/lines

[madig]

Issue Type

Feature Request

Description

Hi all,
I find Atom's Git pane significantly easier to use. See how it lists all hunks at once and allows me to intuitively select whole hunks or lines to stage or discard (note how the button label changed in the "stage" button in the first hunk). I think VS Code can be improved a lot by reviewing the git UX.

VS Code Info

VS Code version: Code 1.20.1 (f88bbf9, 2018-02-13T15:31:21.019Z)
OS version: Linux x64 4.15.3-300.fc27.x86_64

[timroes]

I need to agree with @madig here. Atom's Git UX is IMHO way better and I would like to see a similar improved UX in VSCode. I think the UX differences and thus proposed features should be enumerated for better tracking:

• The diff view should have a possibility to only show changed lines in their context and "collapse" the rest of the file. That way you can get a quick overview at all changes at a glance without them being all across the file.
• There should be a possibility to simply (one click, no context menu or selecting lines required) stage or revert a hunk/range of lines. This is also tracked in SCM: Add "stage ranges" action/button to diff view #26067 (and numerous other ones, but that one seems to be the active open one).
• Allow to quickly undo a previous revert of a hunk, so some change that just got reverted could quickly be recovered.
• Minor improvements over the UX, e.g. double click a file name in the source control view to stage that file completely.

I think all of these features would be able to live in parallel our in addition behind a setting in the current UI, in case the existing experience should be preserved.

[isgj]

Since I never git add . this feature will help me a lot

[celestialorb]

I agree, if the VSCode Git diff view could have the ability to detect and display hunks, along with contextual actions for said hunks (i.e. stage, revert) my git workflow would be vastly improved.

Currently I have to select lines manually with a mouse to stage a "hunk", which is getting quite tedious.

[potatoqualitee]

This would be extraordinarily useful. Right now, I just keep a copy of GitHub Desktop open for this view.

[asoneji]

Agree atom Git pane significantly easier to use. Would be awesome if you can action button to stage/revert change similar to atom.

[rysavyjan]

Described UI improvements would be great. Please note that VSCode supports editing in the diff view - we find this feature extremely useful.

[tunnij]

Agree with all of the above, the diff view could be so much more powerful. Being able to revert hunks (or even select and copy removed code, why is that disabled?) would be extremely useful and is the major thing I miss from PyCharm.

[timdeng2324]

is there any ability to stage hunk from diff view? it seems like the feature already exists in the regular editor mode (by clicking the gutter indicating diffs) but i can't seem to activate it from the diff view

[felixvd]

@timdeng2324 Yes, by right-clicking on newly added or selected lines and "Stage selected ranges". To stage deleted hunks, you unintuitively need to right-click the line above the grayed out area. This was added last year in #43941, but evidently it is too hard to discover. Your confusion is why #26067 should be implemented.

@tunnij You can copy deleted code in side-by-side view, but I agree that it should be possible in inline view as well.

[felixvd]

I note that the same functionality described in the OP is used in Gitkraken, a commercially successful Git client, as "Hunk View". This feature should really be in VSCode. It is immensely useful not to have to scroll through unchanged parts of code.

[franciscolourenco]

Best keyboard-based UI for navigating, staging, unstaging, discarding hunks and lines. The reason Sublime is still open next to VSCode.

https://github.com/timbrel/GitSavvy

[BillDenton]

The stage/unstage selection works quite well, but sometimes it gets confused. I think this happens when there are series of additions, deletions and additions in series. I wanted to unstage the final addition, but couldn't in VS Code. Running git gui clearly showed the hunk and allowed me to unstage just that hunk. So a hunk based diff can be very useful.

[Symbolk]

I strongly recommend the tool [Fork], for those who want to have a finer control of the hunk&line level staging.
[Fork]: https://git-fork.com/

And for Java programmers, I am developing a semi-automatic tool called [SmartCommit] to group related hunks together through program analysis, which looks like:
[SmartCommit]: https://github.com/Symbolk/SmartCommit

[isgj]

It will be nice if the actions of the hunks will use code lenses

[garygreen]

Just adding my interest in this feature as well - vscode implementation of staging hunks and showing the full code is a bit clumsy. I much prefer the way other Git GUIs do it with a dedicated Stage Hunk button and show the context of the diff.

Staging 6 hunks in e.g. SourceTree or Gitkraken takes 6 clicks. In vscode it takes double with 12 clicks because you have to click "..." or the sidebar, then stage hunk.

[gepetobio]

My twopence here too, as far as I know, Gitkraken nailed it with the side by side merge conflict solution

It can be seen more in detail on this (not mine, their own demo) youtube link https://www.youtube.com/watch?v=R1iWJNyRpQE

What I like about it is the capability of adding single lines and removing them from the result/bottom view if you make mistakes on the merge process.

Reading the previous comments, I think @Symbolk suggestion, https://git-fork.com/, seems to be similar (if not identical) solution. I'll try that one now but I'd love to see this functionality on vscode to avoid having to open – yet another app – when I have to face a hairy merge conflict.

[isgj]

I'm just dropping this here, way more useful than all the other plug-ins
https://github.com/kahole/edamagit

[s-kocher]

To add another Git UX Client comparison than will be nice to add to VSCode : Eclipse IDE has the most powerful git staging editor in the market (eGit).

Local file diff is compared vs the stage area, any hunk can be added to the staging area or overwritten (to rollback local hunk) with left / right arrows in the vertical separator of the diff, but better than git kraken, source tree etc : you are free to directly edit the staging area to better split the prepared commit.
And similarly, you can compare staged content vs previous commit, staged area still editable here.

Example
Full diff, years and company B to C updated on same hunk (adjacent modified lines)

-2019 - Company A
-2019 - Company B
+2021 - Company A
+2021 - Company C

But I want to separate in two commits :
Commit 1 : update years to 2021

-2019 - Company A
-2019 - Company B
+2021 - Company A
+2021 - Company B

Commit 2 : Update company B to company C

-2021 - Company B
+2021 - Company C

In that case, choosing the full hunk in not enough (git add -p => yes). Editing the staged area directly is more like a git add -e and directly working on diff level but assisted by the UI so no risk to mess the diff format

[jsg2021]

I love vscode, but I really miss the diff/hunk editor view in Atom when staging commits. (or even gitkraken)

Please expose top-level(not in context menu) stage/revert/unstage links/buttons to hunks in the diff view🙏🙏 (super bonus points if it could also have an option to show just the hunks.. like Atom)

[shaperilio]

This request is quite old... how do we get it on their radar?

[jsg2021]

I don't know, but would love this feature.

[isgj]

Now that VSCode is exploring a merge editor #146091 hopefully they will explore also a better diff/patch-view 😃 , making VSCode hunk aware. The 2 issues might relate on some concerns.

[globalhuman]

Just to add some keywords to this ticket as I struggled to find it initially. Hopefully these will bring visibility to this ticket

I searched for
rich diff vscode
change vscode diff view
truncated diff vscode
github pull request vscode change diff view

[Symbolk]

Just to add some keywords to this ticket as I struggled to find it initially. Hopefully these will bring visibility to this ticket

I searched for rich diff vscode change vscode diff view truncated diff vscode github pull request vscode change diff view

Actually, this should be interactive staging in Git terms.

[detzt]

Quickly staging a hunk or a selection with just a single click was just implemented in #206808
Collapsing the unchanged regions was also implemented recently.

Since I'm neither the OP nor a maintainer of this repository I cannot close this issue (and am not sure if it should get closed), so this is meant to notify all the people interested in this issue that there is news.
The people who can will know whether to close this issue or what to do with it.