37

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

0

4 Answers 4

57

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

12
  • 1
    It sucks that you can't edit in the side by side view (the way Beyond Compare allows). Jun 13, 2022 at 8:42
  • 1
    @ShlomoGottlieb I agree. Maybe it will be possible in a future version of VSCode.
    – VonC
    Jun 13, 2022 at 8:51
  • 6
    That mergeEditor is terrible...
    – mr_squall
    Aug 5, 2022 at 3:17
  • 1
    @mr_squall It was just introduced in 1.69. Hopefully, it will improve over time.
    – VonC
    Aug 5, 2022 at 5:37
  • 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, 2022 at 9:55
16

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

enter image description here

2
  • 2
    Yes, I did mentioned that in my answer.
    – VonC
    Aug 18, 2022 at 13:29
  • This doesn't answer the original question, but does answer this related question which people seeing this may be asking.
    – victorlin
    Aug 23, 2022 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

1
  • 2
    Good point, I missed that in my old answer. I have updated said answer, with a link back to yours.
    – VonC
    Jul 15, 2022 at 15:46
5

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

1
  • I did mentioned git.mergeEditor in my own answer before, but this is a good summary. I used your picture in my answer.
    – VonC
    Aug 31, 2022 at 13:06

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.