Have you ever needed to easily tell the difference between two files? diff on the command line to the rescue!

• Visual Studio Code Diff View
• Visual Studio Code Diff Editor
• Diff Tools For Visual Studio Code
• Diff Folders Visual Studio Code

Visual Studio Code Diff View

Git difftool ^ use VS Code as the diff editor for changes; Working with pull requests. Visual Studio Code also supports pull request workflows through the GitHub Pull Requests and Issues extension available on the VS Code Marketplace. Pull request extensions let you review, comment, and verify source code contributions directly within VS Code.

First, don't forget to examine the docs by doing man diff from the command line. You'll find a slew of options to improve the default experience.

For the default comparison, just type diff name-of-file1 name-of-file2 and you'll get a result like this:

Basically, you're seeing a summary of differences between lines. 4c4 means there is a difference or change on line 4 of each file. The < 'aqua': '#00ffff', indicates what's in the first file and 'aquas': '#00ffff', indicates what's in the second file. The < and > symbols point to the relevant file: left (first file) and right (second file). 7,9c7,9 means there are differences in lines 7 through 9 and the subsequent lines display the differences. The last difference is 14d13. That's indicating that the first file has a 14th line that the second file does not have. It's great information, if not a bit hard to read.

Let's make it a bit simpler by adding another flag to the command. diff sample1.json sample2.json -y (the -y is shorthand for --side-by-side). This does the same comparison but puts the results side by side.

Compares two files. The differences are displayed in a special Visual Studio window. Syntax devenv /Diff SourceFile TargetFile SourceDisplayName TargetDisplayName Arguments. The full path and name of the first file to be compared. The full path and name of the second file to be compared. To integrate Code Compare into Team Foundation Server, open the Visual Studio options (Tools → Options).In the displayed dialog box, select the Source Control → Visual Studio Team Foundation Server node. Click the Configure User Tools button to set up diff and merge tools. Click the Add button to add an external tool for comparison or merging.

Visual Studio Code Diff Editor

Wow! That's a huge improvement! Between the files, the | is an indicator that the lines are different.

That's all well and good, but can you imagine scrolling through a 5000 line comparison looking for a few differences? What a pain.

Diff Tools For Visual Studio Code

A new flag 🚩 to the rescue! diff sample1.json sample2.json -y --suppress-common-lines. --suppress-common-lines (sadly there is no shorthand) prevents the output from displaying any lines that are identical. Now, the results look like this:

Isn't that better? You could very quickly see the differences in giant files.

Now, for something completely different! Is the shell command line not your cup of tea? Visual Studio Code to the rescue! Code has a built-in diffing feature. From the file explorer, right click on the first file to compare. A context menu will open. Click on 'Select for Compare'.

Now, right click on the second file and choose 'Compare with Selected'.

Diff Folders Visual Studio Code

Boom! You've got a beautiful side-by-side comparison of the two files.