Can I compare files using VS Code?

Merging code can get dicey sometimes. Most of the time everything works just fine, but certain types of files under certain conditions can cause problems. Our team recently ran into an issue while trying to merge multiple branches that touched the same XML file, which'll confuse most version control systems and often requires a human stepping in to manually merge the changes. Of course, if you're lucky you merged first.. everyone else can duke it out lol.

Anyway, I found myself needing to grab a couple versions of the file in question and quickly compare them to see where things went wrong. Usually I'd do that using the UI for the VCS right in the browser, but this particular XML file also happens to be generated by a tool that minifies the XML down to a single line. I have yet to see a VCS that helps much with that.

To show you what I mean, here's a sample MS report file from Anthony Duguid, minified with Josh Johnson's XML Tools extension for VS Code, and then pushed to GitHub. I made a tiny change to the minified report file, but can you see it? It is visible below...

On the other hand, a properly formatted file makes it trivial to find the change, but that's not always an option.. c'est la vie.

Comparing files in VS Code

Okay, enough griping. I wanted to share why I was even looking for a quick way to compare a couple files, and there you have it. Now let's see how VS Code can help out.

Either create a folder, or open one if you already have some files on disk to compare. Unfortunately, VS Code won't compare two files that are opened in the editor but aren't actually saved somewhere. I just created a temp folder to work out of, and added a couple empty files to it.

If you already have the files to compare, awesome - otherwise, paste the contents of whatever you want to compare into those empty files. If your files are minified, as mine were, the VS Code comparison will be as helpful as GitHub.. in other words, not much. There's probably a VS Code extension to help format nearly any file type though, so format it into something manageable if you need to.

Once you've got the files, just select them both in the "Explorer" pane and then choose "Compare Selected". You'll get a typical side-by-side comparison showing the differences in the files. That's it!

The only complaint I have (devs are nitpicky), besides having to save the files first, is that the red/green color scheme can be misleading. That combo is often used in a VCS (GitHub, Azure DevOps, etc) to denote what was deleted in one file (red) and added in another (green).

But here, we're just comparing two random files for differences, so the color really should be something neutral and either the same on both sides, or at least a couple other colors that don't already have a strong connotation in the development world. My guess is that the code that supports this file comparing is shared with VS Code's support for Git and showing changes in files that you would expect to be red/green.

Still, in a pinch when you need to compare a couple files for differences, it's nice to know that VS Code is capable of doing it. It never hurts to have one more tool in the toolbox!