How to compare two files in visual studio code

There's two primary types of diffs you can do with VS Code.

1. Compare two files in your project
2. Compare git file versions

Diff from Explorer Panel

This is the quickest, easiest way to bring up the diff panels.

1. Right click the first file and "Select for Compare"

2. Right click on the second file and "Compare with Selected"

3. You should see the diff panel appear once you've completed these steps:

Note: you can also CTRL-select both files, right click on one, and select "Compare Selected" to achieve the same thing:

Diff from command line

This is convenient if you want to build up muscle memory of typing out the commands into the terminal. Here's how to do it.

Paste this command into the command line with your file names.

Executing this command should bring up the diff panel, just like it did from the explorer window.

Git diff in from the Activity Bar

If you would like to compare your local file changes with the latest git version of a file, click the git icon in the activity bar, then select the file that you would like to compare.

Note: you can also edit files from within the diff panels! VS Code is awesome.

I hope this helped you! Diffing in VS Code is very useful for quickly seeing changes between two files. It also helps to remind yourself of the changes you've made from the master version of a file on git once in a while. VSCode diffs are a great thing to add to your developer toolbox.

In the previous post, I showed you how to use Visual Studio to compare 2 files. I also use Visual Studio Code from time to time. And, as every great IDE, Visual Studio Code also has a great diff tool. As with Visual Studio, you can use it to compare 2 versions of the same file if you use a source control. But you can also compare 2 files from your file system.

There are multiple ways to use the Visual Studio Code diff tool:

#Comparing files using the User Interface

1. Open the 2 files in Visual Studio Code

2. Right-click on one file and click "Select for compare"

   

3. Right-click on the other file and click "Compare file file1 with file2"

   

You should see the result:

Note

The right panel is editable. This is useful to edit the new version of the document and see the live diff.

#Comparing files using the command line

• Using Visual Studio Code

  code --diff file1.cs file2.cs

  Or, using the full path if code is not in the PATH:

  "%LOCALAPPDATA%\Programs\Microsoft VS Code\code.exe" --diff file1.cs file2.cs

• Using Visual Studio Code Insiders

  "%LOCALAPPDATA%\Programs\Microsoft VS Code Insiders\Code - Insiders.exe" --diff file1.cs file2.cs

#Using Visual Studio Code as a git difftool

git difftool is a Git command that allows you to compare and edit files between revisions using common diff tools. You can use any editor that supports diff such as VS Code. Open a command prompt and use the following commands:

• From CMD (Windows)

  git config --global diff.tool vscode git config --global difftool.vscode.cmd "code --wait --diff \"$LOCAL\" \"$REMOTE\""

• From PowerShell (Windows or Linux)

  git config --global diff.tool vscode git config --global difftool.vscode.cmd "code --wait --diff ""`$LOCAL"" ""`$REMOTE"""

• From Bash (Linux)

  git config --global diff.tool vscode git config --global difftool.vscode.cmd 'code --wait --diff "$LOCAL" "$REMOTE"'

• Manually, open ~/.gitconfig or %USERPROFILE%\.gitconfig in a text editor and add the following content:

  [diff] tool = vscode [difftool "vscode"] cmd = code --wait --diff \"$LOCAL\" \"$REMOTE\"

You can validate the configuration by executing git config --global --list.

By the way, you can also use Visual Studio Code as your git editor:

Do you have a question or a suggestion about this post? Contact me!

I found a flow which is fastest for me, by first associating a keyboard shortcut Alt+k to "Compare Active File With..." (#a). (Similar to wisbucky's answer but further improved and more step-wise.)

Then, to compare two files:

1. Open or focus file B (will be editable in compare view by default). E.g. by drag-drop from File Explorer to VS Code's center.
2. Open or focus file A.
3. Press Alt+k, a quick open menu will be shown with file B focused.
4. Press Enter.

Result: file A on left and file B on right. (Tested on VS Code 1.27.1)

Remarks

#a - to do so, press Ctrl-k Ctrl-s to show Keyboard Shortcuts, type compare on the top search box, and double click the "Keybinding" column for "Compare Active File With...", press Alt+k then Enter to assign it.

This article shows you a couple of different ways to compare two files by using VS Code (Visual Studio Code). The first approach is to use your mouse and the second one is to use the command line.

Using Your Mouse

1. Select the two files you want to compare (see the diff), right-click, and select “Compare Selected” from the drop-down menu.Advertisements

2. The difference will be highlighted as below:Advertisements

Demo:

Using Command Line

The command that can be used to check the diff between two files:

When you run the command above, you may run into this error:

Solution: Open Command Palette (press “Command” + “Shift” + “P” on Mac and “Ctrl” + “Shift” + “P” on Windows), search for “install code” and select “Shell Command: Install ‘code’ command in PATH”:

And you will see this:

Example:

The result:

Conclusion

We’ve gone through two different ways to check the difference between two files by using VS Code. If you’d like to explore more about this awesome IDE, take a look at the following articles:

You can also check our VS Code topic page for the latest guides, tips, and tricks.