keepcalculator

06 Numbers and Powers

VS Code Compare 2 Files: How to Diff

Card No. 06·27124 · Updated · Standard formula, shown below

To compare two files in VS Code, open both files, then right-click one file’s tab and select Select for Compare, then right-click the other tab and choose Compare with Selected. The diff editor opens side-by-side with differences highlighted, letting you review and merge changes directly.

What the Diff Editor Shows

When the comparison opens, VS Code displays a three-pane layout: the original file on the left, the modified file on the right, and a narrow overview ruler on the far right that shows all differences as colored bars. Each changed line is highlighted in green (additions) or red (removals). Inline changes within a line are shown with a lighter shade, and you can toggle between inline and side-by-side views using the icon in the top-right corner of the editor.

At the top of the diff view, you’ll see a header with the file names and a set of arrows. Use the up/down arrows to jump between differences, or press F7 (or Shift+F7 to go backward) to move to the next change. The Actions menu (the three-dot icon) lets you accept or revert individual changes, or copy a change from one side to the other.

How to Start a Comparison

There are several ways to begin a file comparison in VS Code:

  • Using the Explorer context menu – Right-click a file, choose Select for Compare, then right-click another file and choose Compare with Selected. This is the most direct method.
  • Using the Command Palette – Press Ctrl+Shift+P (or Cmd+Shift+P on macOS), type “Compare”, and select File: Compare Active File With…. Then pick the second file from the quick pick list.
  • Drag and drop – Drag one file tab onto another while holding Ctrl (or Cmd on macOS) to open a diff.
  • From the Source Control view – When you have Git changes, clicking a changed file in the Source Control panel opens a diff against the last commit automatically.

Comparing Files in Different Folders or Projects

The methods above work for files in the same workspace, but you can also compare files from different folders. Open both files in separate editor tabs (use File > Open File… for each), then use the context menu or the Command Palette. VS Code does not require the files to be in the same project; it simply compares the content of the two open tabs.

For comparing folders (not just files), you’ll need an extension like “Compare Folders” or use the built-in Git diff for version-controlled directories. The built-in file comparison is limited to two files at a time.

Common Problems and Fixes

If the compare action is grayed out, make sure you have a file selected in the Explorer. If you right-click a file and don’t see “Select for Compare”, check that you haven’t already selected a file for comparison (the status bar shows “Select for Compare” when a file is pending). To cancel a pending selection, click the “X” in the status bar message.

Another issue: the diff may show the entire file as changed when only line endings differ (CRLF vs LF). To avoid this, set "files.eol" in your settings, or use the “Ignore Trim Whitespace” and “Ignore Line Endings” toggles in the diff editor’s top-right menu. These toggles are also useful when comparing files with minor whitespace differences.

If the diff editor doesn’t open, try using the Command Palette method, which sometimes works when the context menu fails due to a UI glitch. Restarting VS Code often resolves persistent UI issues.

Comparing with Git and Other Tools

VS Code’s built-in diff is not just for local files. When you use Git, the Source Control view shows a diff of each modified file against the previous commit. You can also compare any two commits by selecting them in the Timeline view (if enabled) or by using the GitLens extension, which adds advanced comparison features like comparing branches and tags.

For files that are not in a Git repository, the built-in comparison is still fully functional. However, if you need to compare large binary files (like images), VS Code will show a message that it cannot display a diff for binary content. In that case, you’ll need an external tool.

Keyboard Shortcuts and Productivity Tips

  • Ctrl+K Ctrl+D – Compare active file with the next file in the Explorer (or the previously selected file).
  • F7 / Shift+F7 – Jump to next/previous difference.
  • Alt+F5 – Toggle the diff editor’s side-by-side view (when focus is in the diff).
  • Use the “More Actions” button to Revert a change or Accept a change from one side to the other.

You can also open the diff in a new editor group by dragging the diff tab to the side, which is helpful when you want to keep the original files visible.

Limitations and When to Use an External Tool

The built-in diff is excellent for text files with moderate size. However, for very large files (thousands of lines) the diff can become slow. In such cases, consider using a dedicated diff tool like Beyond Compare, Meld, or WinMerge. Also, the built-in diff does not support three-way merges (comparing two files against a common ancestor), which is essential for complex conflict resolution. For three-way merges, you’ll need a tool like KDiff3 or a Git GUI that supports it.

Another limitation: the diff editor does not show a word-level diff by default, but you can enable it by setting "diffEditor.wordWrap" to "on" and using the “Toggle Word Wrap” option. This helps when comparing long lines with small changes.

Frequently Asked Questions

How do I compare two files that are not in the same folder?

Open both files as separate tabs (File > Open File… for each), then use the Command Palette and select “File: Compare Active File With…”. Choose the other file from the list. The files don’t need to be in the same workspace.

Can I compare more than two files at once?

No, the built-in diff is strictly two-file. To compare multiple files, you can install an extension like “Compare Folders” or use a separate tool. For Git, you can compare two commits, but that also shows a single diff at a time.

Why does the diff show the whole file as changed?

This usually happens when line endings or encoding differ. Use the “Ignore Line Endings” and “Ignore Trim Whitespace” toggles in the diff editor’s menu. If the files have different encodings (e.g., UTF-8 vs UTF-16), convert them to the same encoding first.

How do I copy changes from one file to the other in the diff?

In the diff editor, click the blue arrow icon that appears on a changed line (or use the “More Actions” menu) to apply the change from the left to the right or vice versa. You can also select a block of changes and use the same action.

Does VS Code have a command-line way to compare files?

Yes, you can run code --diff file1 file2 from a terminal. This opens VS Code with the two files in a diff editor. This works on Windows, macOS, and Linux if the code command is in your PATH.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.

More cards in this drawer

The whole Numbers and Powers drawer →