Vscode: 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 (f88bbf9137d24d36d968ea6b2911786bfe103002, 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 #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.

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

[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