How to merge files(differentiate) in visual studio code

Question

I am using Visual studio code for angular2 application. The requirement is to merge files, so, I want to differentiate changes in two files as it happens in Netbeans IDE. Is there, any extensions available to achieve the task in visual studio code.

For e.g - Merging Two files by differentiating changes like below:-

Please suggest some solution.

abc.component.ts (located in project1)

abc          <-- text for understanding purpose
def

abc.component.ts ( located in project2)

abc

I want to differentiate two component files and push changes in another like it happens in Netbeans IDE? Is there, any solution available for Visual studio code?

Answer 1

First using vscode natively with the git toolset

(Make sure to look on the second title as it's a better native way!)

This way may be available on older version of vscode too! Still a good thing to know! (even we should always run on the latest version! And vscode is always keeping getting better and better).

A native powerful and cool way is to use the git toolset within vscode! It still not the most fluid way! But if you are in a setup where you don't have anything else or time or resources to use anything else! Also as a requirement you need to have a git repo initiated! Here we go:

First we will use the change and diffing capability of the git tool set. And the steps go as bellow:

• Commit all the current changes

• once done: copy past the other file to diff on the place of the current one. And save.

• Cool now in the git pallet you can see the file in changes list! Click on it and the diffing editor will show!

Bingo this is it! You can compare and make direct changment! The diffing will keep happening in real time. Note the current state is in the right. And you make changement there.

Here an illustration of direct modification for instance the part in the left is missing from the current file

And here another illustration (current have in plus)

Well to sum up! Git tool and diffing in vscode is so powerful! And all that one need! The only problem is the extra step of committing and cleaning after if desired!

Here some tips! If you want to have the commit history cleaner! Or not have a merge separate! You can remove the last commits from history as much as you need: Without hard reset and commit again a cleaner one!

git reset --soft HEAD~1

You can check How to cancel a local git commit

Otherwise it can be ok with atomic commit and merge mention!

Also if what you need is to be able to keep a lot from the current file! You can copy the current elsewhere! past the other file to compare! commit ! and then past again the old one! You'll have the old in the right and as current (Not as described on the above) In such a scenario this work well! (Hacky a bit but you may need it).

Native way (direct open of the compare editor)

(May require the newer version of vscode)

open a file that you gonna compare

open the command pallet

CTRL + SHIFT + P

type file: compare

You can see the different possible ways! For a file we can choose compare active file with.

Then you choose the file! The file need to be within the project directory.

And then you choose a file and the compare editor will open

The above was tested on my brother computer on a new vscode installation. I wasn't sure at first if it was part of the core! And i just confirmed that it is. That too remove the need to the method above involving git! And it's the best native way to go with.

Vscode extensions

Here two extensions i suggest the first:

https://marketplace.visualstudio.com/items?itemName=jinsihou.diff-tool

Easy and simple! It add two elements to the right click menu:

In current file right click -> Select as first file for diff, select one again to view the diff results

select to compare and compare with select no more simple then that !

Another extension to check:

https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-diff

I prefer the first! As this one compare a lot to the native way. And having the control in the contextual menu is just great.

Out of vscode! Using other tools

A quick google search and you'll find a lot of tools!

https://meldmerge.org/

meld merge is cross platform and open source and nice!

in linux and debian:

sudo apt install meld

Otherwise you can check the long list here:

https://www.jotform.com/blog/25-useful-document-and-file-comparison-tools/

https://stackify.com/code-merge-tools/

There is too winMerge to mention (an open source project for windows)

https://winmerge.org/