How to diff check in VSCode

Are you looking for a way to do diff checks in VSCode? diff is originally a command which displays the differences between the contents of two files. Over time, people tend to use the diff term when they want to compare two files line by line and highlight the changes. VSCode also has a built-in diff tool and this short article is going to show you how to use it.

Diff two files in VSCode

The easiest way to bring up diff tool in VSCode is by using its file explorer bar.

  • Suppose you're browsing a folder in VSCode, simply right-click a file in the sidebar and choose "Select for Compare" in order to open the first file for comparison. Diff two files in VSCode step 1

  • Next up, right-click another file in the sidebar and choose "Compare with Selected". Diff two files in VSCode step 2

  • You will see a new tab pops up with the filename of both files, which shows the contents of them. Any differences between the two files will be highlighted for easier navigation. Missing lines will be filled with a blank, striped ones, so that you can easily see which lines are present in one file but not the other. Diff two files in VSCode step 3

  • Inside each side of the tab, you can edit the contents of a file, the differences will be updated instantly for you to see.

Diff using command line

While convenient, if you want to compare differences in VSCode using its GUI, you would have to open the parent directory inside it, then right-click a few times. These may be too much of an hassle for a programmer.

If you're more familiar with the commands, the quicker way to diff two files is calling VSCode from the terminal using the following command.

code --diff file1 file2

Remember to replace file and file2 with the actual filenames in your scenario.

Diff a file with previous versions in Git repo

Visual Studio Code has integrated source control management (SCM) and includes Git support out-of-the-box. If you're tracking a project in Git, you can get an overview of how many changes you've made in the repository right inside VSCode using its Source Control tab.

What's interesting is that inside Source Control tab, you can click in each file name to bring up the diff tool, displaying what changes you've made to the file (compared to its previous version commited to the repository).

Diff a file with previous versions with Git

Quickly diff texts with Partial Diff

There are cases that you want to quickly diff two pieces of text which haven't been saved to any file. Partial Diff is the VSCode extension that allows you to compare (diff) text selections within a file, across different files, or to the clipboard.

Once you have Partial Diff installed, you can diff two texts from the same file by following these steps :

  • First, select the first piece of text and right-click, select Select Text for Compare. Quickly diff texts in VSCode with Partial Diff
  • Then, select the second piece of text, right-click it and choose Compare Text with Previous Selection. Quickly diff texts in VSCode with Partial Diff
  • A new tab will pop up, displaying the differences between the two selected texts. Quickly diff texts in VSCode with Partial Diff

Besides that, Partial Diff also supports a few more advanced features such as define custom rules for text normalization to reduce noise in the diff (e.g. replace tab characters to spaces) or compare text in two separated window. Check out more details about this extension at https://github.com/ryu1kn/vscode-partial-diff.

We hope that the post helped you learn how to quickly perform a diff check in VSCode and further improve your programming workflow. You may want to check out our other guides on Automate your workflow with VSCode Tasks , Format JSON in VSCode or Fix IntelliSense in VSCode. If you have any question, don't hesitate to let us know in the comments section below.

Click to rate this post!
[Total: 0 Average: 0]

Leave a Comment