35

Is there any way to compare file changes in Visual Studio Code Side By Side, rather than top down? Regular Visual Studio Enterprise has this option.

This is during git merge conflict resolution.

enter image description here

mattsmith5
  • 540
  • 4
  • 29
  • 67

4 Answers4

56

2022: update for VSCode 1.69 (June 2022), as noted in Audwin Oyong's answer, there is now a 3-way merge view, which allows a side-by-side resolution.

In this release, we continued working on the 3-way merge editor.
This feature can be enabled by setting git.mergeEditor to true and will be enabled by default in future releases.

The merge editor allows you to quickly resolve Git merge conflicts. > When enabled, the merge editor can be opened by clicking on a conflicting file in the Source Control view.
Checkboxes are available to accept and combine changes in Theirs or Yours:

Merge Editor Conflict Resolution Demo

And VSCode 1.70 (July 2022) will offer a way to open the regular file (not in 3 way merge mode).
Same as diff editor, it could use an action in the editor title area

https://user-images.githubusercontent.com/1926584/176448981-01a0b0e4-5261-4ec3-9e27-1efb68c6b39a.png

See PR 155159 and its new action merge.openResult.

Audwin Oyong adds, based on the release notes:

To turn off the 3-way merge view, you can set git.mergeEditor to false.

Open the VSCode settings with Ctrl,:

git.mergeEditor setting

(From Harshil Patanvadiya's answer)

2021: By default, you see all conflicts "top down", but for each one, clicking on "compare changes" would open a tab with a side-by-side diff.

https://cloud.githubusercontent.com/assets/1926584/26586117/7e70828a-454e-11e7-9bb6-67646a20bfe0.gif

(from issue 27562)

Not ideal, but a good workaround.

In VSCode 1.71 (Aug. 2022):

Merge Editor: Toggling word wrap should apply to all editors

It was weird when I toggled word wrap in the merge editor yet only the editor I was focused on had it toggled.
I kind of expected all editors to have it toggled.

My rationale is that toggling word wrap is usually a symptom of having long lines and the chances that all three editors have long lines is high if a single editor has long lines.

And:

Improve Merge Editor Story For Files Having/Getting Conflict Markers

Originally we had this icon along to toggle between the raw file and merge editor views. Could use it with this new label too.
git-merge felt out of place as an icon choice to my eyes. https://user-images.githubusercontent.com/25163139/185460190-0d652b9c-a4a7-4cb6-8958-80e42a72f0f7.png

VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
  • 1
    It sucks that you can't edit in the side by side view (the way Beyond Compare allows). – Shlomo Gottlieb Jun 13 '22 at 08:42
  • 1
    @ShlomoGottlieb I agree. Maybe it will be possible in a future version of VSCode. – VonC Jun 13 '22 at 08:51
  • 6
    That mergeEditor is terrible... – mr_squall Aug 05 '22 at 03:17
  • 1
    @mr_squall It was just introduced in 1.69. Hopefully, it will improve over time. – VonC Aug 05 '22 at 05:37
  • 1
    How can I revert back to the old way of merging? This change makes it impossible for me to resolve conflicts, and VSCode was the absolute best way I had found for this. – eirikvaa Aug 12 '22 at 16:53
  • @eirikvaa To turn off the 3-way merge view, you can set `git.mergeEditor` to `false`. See: https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_69.md#3-way-merge-editor – Audwin Oyong Aug 16 '22 at 10:39
  • 1
    @AudwinOyong Thank you. I have included that setting in the answer for more visibility. – VonC Aug 16 '22 at 11:44
  • 1
    @AudwinOyong So it's either the 3-way merge or the highway? Too bad. – eirikvaa Aug 16 '22 at 16:23
  • 3
    I'm so glad for this post, as my vscode updated and got forced to use the 3-way merge view and imo its horrible compared to the inline feature – PatricNox Aug 18 '22 at 09:55
  • 1
    I have used VS Code to merge everything because of the inline feature. With the new 3-way, I like the checkbox as the means of choosing what to merge. I'll give it a try, but I'm glad I know I can revert. Thanks for the post. – oglester Aug 19 '22 at 12:16
  • I can't stand this new 3 way approach. old one was much better. specially for hard conflicts. – asafel Sep 15 '22 at 13:11
  • i just saw this 3-way view few months ago and man IDK why everyone hate it, I LOVE IT! something that finally i can use on different platforms as a diff editor-vscode- and it actually make sense. maybe I saw the fixed version, maybe early versions were not be the best but, one I used was awesome. Today I was trying to enable the 3-way view and without the last picture you posted on the answer I couldn found it. Thanks – eddym Jun 19 '23 at 07:47
17

This is a horrible update. to revert back, just add this "git.mergeEditor": false to settings.json .

enter image description here

Virinchi Manepalli
  • 275
  • 3
  • 6
  • 2
    Yes, I did mentioned that in [my answer](https://stackoverflow.com/a/69626228/6309). – VonC Aug 18 '22 at 13:29
  • This doesn't answer the original question, but does answer [this related question](https://stackoverflow.com/q/67703214) which people seeing this may be asking. – victorlin Aug 23 '22 at 18:56
6

VSCode version 1.69 now includes Three-way merge (3-way merge).

See release note 3-way merge.

demo of 3-way merge

Audwin Oyong
  • 2,247
  • 3
  • 15
  • 32
  • 2
    Good point, I missed that in my old answer. I have updated said answer, with a link back to yours. – VonC Jul 15 '22 at 15:46
6

The three-ways to show the file it's so much difficult

Flow the below step to easy way to change the config view

  1. Go to the vscode settings
  2. Search the git.mergeEditor
  3. Git:Merge Editor make it FALSE

Git conflig view change

Harshil Patanvadiya
  • 151
  • 1
  • 6
  • I did mentioned `git.mergeEditor` in [my own answer](https://stackoverflow.com/a/69626228/6309) before, but this is a good summary. I used your picture in my answer. – VonC Aug 31 '22 at 13:06