Visual Studio Code (VS Code) is a popular code editor loved by engineers, writers, and many others for its lightweight performance and rich ecosystem of extensions.

In this article, we’ll walk through how to easily compare differences between files and folders in VS Code, and take a closer look at the handy extension “Diff Folders.”

✅ 1. Compare Differences Between Files with VS Code’s Built-in Features

1-1. Compare via the GUI

VS Code includes a built-in “Compare” command to diff two files.

▶ How to compare files

1. Open the two files you want to compare and make one of them active.
2. Open View → Command Palette.
3. Type “compare” (or the equivalent in your language), then choose “File: Compare Active File With…”
4. Select the second file.

You’ll see side-by-side diff highlighting, making changes easy to spot at a glance.

1-2. Show Differences in Inline View

By default, diffs are shown side-by-side, but you can switch to an inline (stacked) view.

▶ How to switch

1. In the diff view, click the ⋯ (More Actions) menu at the top right.
2. Select Inline View.

Click again to toggle back to the original view.

1-3. Show Diffs from the Terminal (CLI)

You can also launch VS Code from the command line to compare files:

code -d file1 file2

▶ Example:

code -d sample.c sample_4.c

This opens VS Code and immediately shows the diff between the two files.

✅ 2. Want to Compare Entire Folders? Use “Diff Folders”

With the Diff Folders extension, you can visually compare additions, deletions, and modifications between two folders.

2-1. How to Install

1. Click the Extensions icon on the left (or press Ctrl + Shift + X).
2. Search for “Diff Folders.”
3. Find the extension and click Install.

2-2. Launch & Basic Usage

1. Open the Command Palette (Ctrl + Shift + P or Command + Shift + P).
2. Search Diff Folders → select View: Show Diff Folders.
3. A Diff Folders panel appears on the left—success!
4. Click New Diff Panel to open a comparison view.

2-3. Select Folders to Compare

1. Click the folder icons on the left and right to choose the folders you want to compare.
2. Click Compare.

▶ Example (sample):

• styles.css modified → yellow
• script.js modified → yellow
• emoji.png deleted → red

Color-coding makes it easy to grasp the state of each file at a glance.

✅ 3. Handy Features of “Diff Folders”

💡 Feature 1: Filter Which Differences Are Shown

Use the icons at the top of the results to finely filter the view.

Switch the display based on your purpose—great for large comparisons.

💡 Feature 2: Copy Files Between Compared Folders

Using the icons in the center, you can copy files between the left and right folders:

• ← Arrow: Copy right → left
• → Arrow: Copy left → right
• There are icons to select target files as well.

For example, if a file was deleted, you can restore it by copying from left to right.

💡 Feature 3: View & Edit File Contents on the Spot

Click a file with differences to open a side-by-side view and edit immediately. Since you can leverage VS Code’s editor directly, you can go from compare → fix in one flow.

✅ Summary

✍️ Editor’s Note

By combining VS Code’s diff features with Diff Folders, you can handle code reviews, document comparisons, and data consistency checks efficiently and accurately.

Whether you want to “quickly check differences” or “review many files at once,” these tools are perfect—give them a try in your daily workflow!