ℹ️ Skipped - page is already crawled
| Filter | Status | Condition | Details |
|---|---|---|---|
| HTTP status | PASS | download_http_code = 200 | HTTP 200 |
| Age cutoff | PASS | download_stamp > now() - 6 MONTH | 1.4 months ago |
| History drop | PASS | isNull(history_drop_reason) | No drop reason |
| Spam/ban | PASS | fh_dont_index != 1 AND ml_spam_score = 0 | ml_spam_score=0 |
| Canonical | PASS | meta_canonical IS NULL OR = '' OR = src_unparsed | Not set |
| Property | Value |
|---|---|
| URL | https://semanticdiff.com/blog/visual-studio-code-compare-files/ |
| Last Crawled | 2026-03-06 23:41:30 (1 month ago) |
| First Indexed | 2023-03-11 23:54:15 (3 years ago) |
| HTTP Status Code | 200 |
| Meta Title | Comparing Files in Visual Studio Code |
| Meta Description | This guide will tell you everything you need to know about comparing files in Visual Studio Code, including tips to make diffs more readable. |
| Meta Canonical | null |
| Boilerpipe Text | In this blog post, I will tell you everything you need to know about comparing files in Visual Studio Code. Starting with the various ways to select files for a comparison, followed by an explanation of the VS Code diff viewer that displays the differences. Finally, I will give you some tips on how to fine-tune or improve the displayed diff. Open The Diff Viewer Let’s start with the different ways to initiate a file comparison in VS Code. On a desktop, you can use the table of contents on the left to quickly jump between them. Compare Two Files in Your Workspace To compare the content of two files in your workspace, follow these steps: Tip: You can open the diff viewer directly from the command line. Just execute the following command (replace the paths with the two files you want to compare): # If you use VS Code: code --diff path/to/first_file path/to/second_file
# If you use Codium: codium --diff path/to/first_file path/to/second_file
Compare Unsaved Files/Editors The last described method works only for files saved to your disk. If you want to compare the content of two editor windows without saving them first, follow these steps: Compare Different Git Versions of a File If your workspace is part of a Git repository, you can view how commits have affected the content of Git tracked files. To view the changes, make sure that Git is installed on your system ( download ) and follow these steps: Tip: You can not only view the changes introduced by a single commit, but also compare arbitrary git versions of a file. To do so, follow the steps from the first method and simply select entries from the timeline view instead of the workspace directory. Compare The Content of Two Folders To compare the content of two folders without manually diffing every single file, install the Diff Folders extension and follow these steps: The Diff Folders extension offers several other features, such as copying files between the two folders. Check out the marketplace page to learn more about them. Diff Viewer Explanation After following any of the methods described above, the diff viewer should open. It should look similar to this: On the left side you can see the content of the old file, which is either the first file you selected or the older git revision of the file. The right side shows the new file, which is the second file you selected or the new git revision. The differences between the two files are usually highlighted using the colors red and green, but the colors may vary depending on theme you are using. Removed Lines
Lines that exist only in the old version are displayed using a bright red background on the left side and a diagonal pattern on the right side: Added Lines
Lines that exist only in the new version are displayed using a diagonal pattern on the left side and bright green background on the right side: Changed Lines
Lines that exist in both versions but contain differences use a light red and green background. Only the parts of the line that actually differ have an intense color:
This should give you basic understanding of how diffs work in Visual Studio Code. Below I have collected some tips on how you can further configure and optimize the diff viewer to your needs. Tips & Tricks The Visual Studio Code diff viewer provides a good out-of-the-box experience for many programming languages and other text-based file formats. In some cases, however, you can get better results by installing third-party extensions or by fine-tuning some settings. Here are some tips how you can get better diffs. Programming Language Aware Diff The diff viewer built into Visual Studio Code compares files line-by-line and highlights every character that has changed. This can lead to noisy diffs as many programming languages allow you to add optional semicolons or line breaks that show up as changes without having any effect on your program. To solve this, we have developed a VS Code extension that generates smarter diffs. SemanticDiff parses the code of the files and compares their compiler representation instead of their text. This makes it possible to hide irrelevant changes and to detect moved code: To give it a try, install SemanticDiff from the marketplace. After opening any diff (see Open The Diff Viewer ) you should find the following icon in the upper right corner. Click it to switch to the smart diff mode: Please note that not all programming languages are supported yet. You may want to check the marketplace page first to see if your languages are included. Inline/Unified Diffs The default diff mode in Visual Studio Code displays the old and new code side-by-side. If your code has very long lines or you don’t have a lot of horizontal screen space, you might want to switch to the inline diff mode (called unified diff outside of VS Code). The inline diff shows the old and new version of the code within the same document. This is achieved by first showing all the lines that have been deleted at the current position, followed by all the lines that have been inserted. It may take some time to get used to it, but it significantly reduces the amount of screen space required: To switch between the side-by-side and inline diff mode, simply open the action menu and select Inline View : Showing Leading/Trailing Whitespace Changes By default VS Code ignores added or removed whitespaces at the beginning or end of a line. They don’t have a meaning in most programming languages and would only add visual noise to the diff. There are a few notable exceptions though. For example, Python uses the indentation of lines to determine which control flow structure the current line belongs to, and Markdown uses two trailing whitespaces to indicate a line break. To toggle whether Visual Studio Code should ignore leading/trailing whitespace click this icon: For more sophisticated whitespace handling, check out the Programming Language Aware Diff section. Got Any Other Tips? I hope you enjoyed this article and that it helps you with your next code review! Do you know any other great tips regarding diffs or the general use of VS Code? Let me know in the comments below! |
| Markdown | [](https://semanticdiff.com/)
[Login](https://app.semanticdiff.com/oauth/login)
- [Products]()
- [GitHub App](https://semanticdiff.com/github/)
- [VS Code Extension](https://semanticdiff.com/vscode/)
- [FAQ](https://semanticdiff.com/github/faq/)
- [Pricing](https://semanticdiff.com/github/pricing/)
- [Docs](https://semanticdiff.com/docs/)
- [Blog](https://semanticdiff.com/blog/)
- [Contact](https://semanticdiff.com/contact/)
- [Login](https://app.semanticdiff.com/oauth/login)
# We sent you a link to confirm your email address.
Please check your inbox and **spam folder**\!
Close
# Which version do you want to use?
[ Install for VS Code](https://semanticdiff.com/vscode/install/)
[ Use with GitHub](https://app.semanticdiff.com/)
Our VS Code extension is also available via [Open VSX](https://open-vsx.org/extension/semanticdiff/semanticdiff).
**Failed To Parse Code**
Please check the marked area for syntax errors and verify that the correct language is selected.
**An Error Occurred**
Michael MĂĽller
10 Mar, 2023
[Visual Studio Code](https://semanticdiff.com/categories/visual-studio-code/)
[Tutorials](https://semanticdiff.com/categories/tutorials/)
# Comparing Files in Visual Studio Code
This guide will tell you everything you need to know about comparing files in Visual Studio Code. Learn the different ways to select files for comparison and the tricks you can use to get better diffs.
##### Table Of Contents
- [Open The Diff Viewer](https://semanticdiff.com/blog/visual-studio-code-compare-files/#open-the-diff-viewer)
- [Compare Two Files in Your Workspace](https://semanticdiff.com/blog/visual-studio-code-compare-files/#compare-two-files-in-your-workspace)
- [Compare Unsaved Files/Editors](https://semanticdiff.com/blog/visual-studio-code-compare-files/#compare-unsaved-fileseditors)
- [Compare Different Git Versions of a File](https://semanticdiff.com/blog/visual-studio-code-compare-files/#compare-different-git-versions-of-a-file)
- [Compare The Content of Two Folders](https://semanticdiff.com/blog/visual-studio-code-compare-files/#compare-the-content-of-two-folders)
- [Diff Viewer Explanation](https://semanticdiff.com/blog/visual-studio-code-compare-files/#diff-viewer-explanation)
- [Tips & Tricks](https://semanticdiff.com/blog/visual-studio-code-compare-files/#tips--tricks)
- [Programming Language Aware Diff](https://semanticdiff.com/blog/visual-studio-code-compare-files/#programming-language-aware-diff)
- [Inline/Unified Diffs](https://semanticdiff.com/blog/visual-studio-code-compare-files/#inlineunified-diffs)
- [Showing Leading/Trailing Whitespace Changes](https://semanticdiff.com/blog/visual-studio-code-compare-files/#showing-leadingtrailing-whitespace-changes)
- [Got Any Other Tips?](https://semanticdiff.com/blog/visual-studio-code-compare-files/#got-any-other-tips)
In this blog post, I will tell you everything you need to know about comparing files in Visual Studio Code. Starting with the various ways to select files for a comparison, followed by an explanation of the VS Code diff viewer that displays the differences. Finally, I will give you some tips on how to fine-tune or improve the displayed diff.
## Open The Diff Viewer
Let’s start with the different ways to initiate a file comparison in VS Code. On a desktop, you can use the table of contents on the left to quickly jump between them.
### Compare Two Files in Your Workspace
To compare the content of two files in your workspace, follow these steps:
1
Open the **Explorer** view
2
Right click on the first file and choose **Select For Compare**
3
Right click on the second file and choose **Compare With Selected**
The diff is hard to understand? Check out [programming language aware diffs](https://semanticdiff.com/blog/visual-studio-code-compare-files/#programming-language-aware-diff).
**Tip:** You can open the diff viewer directly from the command line. Just execute the following command (replace the paths with the two files you want to compare):
```
# If you use VS Code:
code --diff path/to/first_file path/to/second_file
# If you use Codium:
codium --diff path/to/first_file path/to/second_file
```
### Compare Unsaved Files/Editors
The last described method works only for files saved to your disk. If you want to compare the content of two editor windows without saving them first, follow these steps:
1
Open the **Explorer** view
2
Make sure you have the **Open Editors** view enabled
3
Expand the **OPEN EDITORS** list, right click on the first editor and choose **Select For Compare**
4
Right click on the second editor and choose **Compare With Selected**
The diff is hard to understand? Check out [programming language aware diffs](https://semanticdiff.com/blog/visual-studio-code-compare-files/#programming-language-aware-diff).
### Compare Different Git Versions of a File
If your workspace is part of a Git repository, you can view how commits have affected the content of Git tracked files. To view the changes, make sure that Git is installed on your system ([download](https://git-scm.com/download)) and follow these steps:
1
Open the **Explorer** view
2
Select the file whose history you are interested in
3
Click on the **TIMELINE** view to expand it
4
Click on the Git commit to see how it changed the file
The diff is hard to understand? Check out [programming language aware diffs](https://semanticdiff.com/blog/visual-studio-code-compare-files/#programming-language-aware-diff).
**Tip:** You can not only view the changes introduced by a single commit, but also compare arbitrary git versions of a file. To do so, follow the steps from [the first method](https://semanticdiff.com/blog/visual-studio-code-compare-files/#compare-two-files-in-your-workspace) and simply select entries from the timeline view instead of the workspace directory.
### Compare The Content of Two Folders
To compare the content of two folders without manually diffing every single file, install the [Diff Folders](https://marketplace.visualstudio.com/items?itemName=L13RARY.l13-diff) extension and follow these steps:
1
Open the **Diff Folder** view
2
Create a new diff panel
3
Select the folders you want to compare
4
Click the **Compare** button
5
**Double click** on a file to open its diff
The Diff Folders extension offers several other features, such as copying files between the two folders. Check out the [marketplace page](https://marketplace.visualstudio.com/items?itemName=L13RARY.l13-diff) to learn more about them.
## Diff Viewer Explanation
After following any of the methods described above, the diff viewer should open. It should look similar to this:
On the left side you can see the content of the *old* file, which is either the first file you selected or the older git revision of the file. The right side shows the *new* file, which is the second file you selected or the new git revision. The differences between the two files are usually highlighted using the colors red and green, but the colors may vary depending on theme you are using.
**Removed Lines**
Lines that exist only in the old version are displayed using a bright red background on the left side and a diagonal pattern on the right side:
**Added Lines**
Lines that exist only in the new version are displayed using a diagonal pattern on the left side and bright green background on the right side:
**Changed Lines**
Lines that exist in both versions but contain differences use a light red and green background. Only the parts of the line that actually differ have an intense color:
This should give you basic understanding of how diffs work in Visual Studio Code. Below I have collected some tips on how you can further configure and optimize the diff viewer to your needs.
## Tips & Tricks
The Visual Studio Code diff viewer provides a good out-of-the-box experience for many programming languages and other text-based file formats. In some cases, however, you can get better results by installing third-party extensions or by fine-tuning some settings. Here are some tips how you can get better diffs.
### Programming Language Aware Diff
The diff viewer built into Visual Studio Code compares files line-by-line and highlights every character that has changed. This can lead to noisy diffs as many programming languages allow you to add optional semicolons or line breaks that show up as changes without having any effect on your program.
To solve this, we have developed a VS Code extension that generates smarter diffs. [SemanticDiff](https://marketplace.visualstudio.com/items?itemName=semanticdiff.semanticdiff) parses the code of the files and compares their compiler representation instead of their text. This makes it possible to hide irrelevant changes and to detect moved code:
To give it a try, install [SemanticDiff](https://marketplace.visualstudio.com/items?itemName=semanticdiff.semanticdiff) from the marketplace. After opening any diff (see [Open The Diff Viewer](https://semanticdiff.com/blog/visual-studio-code-compare-files/#open-the-diff-viewer)) you should find the following icon in the upper right corner. Click it to switch to the smart diff mode:
Please note that not all programming languages are supported yet. You may want to check the marketplace page first to see if your languages are included.
### Inline/Unified Diffs
The default diff mode in Visual Studio Code displays the old and new code side-by-side. If your code has very long lines or you don’t have a lot of horizontal screen space, you might want to switch to the inline diff mode (called *unified diff* outside of VS Code).
The inline diff shows the old and new version of the code within the same document. This is achieved by first showing all the lines that have been deleted at the current position, followed by all the lines that have been inserted. It may take some time to get used to it, but it significantly reduces the amount of screen space required:
To switch between the side-by-side and inline diff mode, simply open the action menu and select **Inline View**:
### Showing Leading/Trailing Whitespace Changes
By default VS Code ignores added or removed whitespaces at the beginning or end of a line. They don’t have a meaning in most programming languages and would only add visual noise to the diff. There are a few notable exceptions though. For example, Python uses the indentation of lines to determine which control flow structure the current line belongs to, and Markdown uses two trailing whitespaces to indicate a line break.
To toggle whether Visual Studio Code should ignore leading/trailing whitespace click this icon:
For more sophisticated whitespace handling, check out the [Programming Language Aware Diff](https://semanticdiff.com/blog/visual-studio-code-compare-files/#programming-language-aware-diff) section.
## Got Any Other Tips?
I hope you enjoyed this article and that it helps you with your next code review! Do you know any other great tips regarding diffs or the general use of VS Code? Let me know in the comments below\!
#### Subscribe for Developer Updates
Get updates on our **SemanticDiff VS Code Extension** and **GitHub App**, and be the first to know about new devlogs, tutorials, and blog posts.
### Thank You For Your Interest
To complete your registration, click on the link in the email we sent you. If you are already registered, no email will be sent.
#### Recent Articles
[](https://semanticdiff.com/blog/language-aware-diff-highlight/)
[SemanticDiff](https://semanticdiff.com/categories/semanticdiff/)
##### [What should semantic diffs highlight: The change or its effect?](https://semanticdiff.com/blog/language-aware-diff-highlight/)
Language aware diffs can detect changes in the semantics of the code that are invisible to traditional diffs. How should they be highlighted?
[Read More](https://semanticdiff.com/blog/language-aware-diff-highlight/)
[](https://semanticdiff.com/blog/semanticdiff-0.10.0/)
[SemanticDiff](https://semanticdiff.com/categories/semanticdiff/)
[Visual Studio Code](https://semanticdiff.com/categories/visual-studio-code/)
[GitHub](https://semanticdiff.com/categories/github/)
##### [SemanticDiff 0.10.0: Support for Lua, XML & more](https://semanticdiff.com/blog/semanticdiff-0.10.0/)
This release does not only add two languages to SemanticDiff, but also comes with many quality-of-life improvements such as a new minimap.
[Read More](https://semanticdiff.com/blog/semanticdiff-0.10.0/)
[](https://semanticdiff.com/blog/new-github-app-ui/)
[SemanticDiff](https://semanticdiff.com/categories/semanticdiff/)
[GitHub](https://semanticdiff.com/categories/github/)
##### [Improved User Interface For GitHub App](https://semanticdiff.com/blog/new-github-app-ui/)
We added many quality of life improvements to our GitHub App. This includes an improved minimap, a thread list that lets you jump to a thread in the diff, a collapsible sidebar and more.
[Read More](https://semanticdiff.com/blog/new-github-app-ui/)
[](https://semanticdiff.com/blog/visual-studio-code-compare-files/)
A product by [Sysmagine](https://sysmagine.com/) to increase the efficiency of your code review workflow. Follow us on social media to stay up to date.
- Products
- [GitHub App](https://semanticdiff.com/github/)
- [VS Code Extension](https://semanticdiff.com/vscode/)
- Free Online Tools
- [JSON Compare](https://semanticdiff.com/online-diff/json/)
- [CSS Compare](https://semanticdiff.com/online-diff/css/)
- [HTML Compare](https://semanticdiff.com/online-diff/html/)
- [XML Compare](https://semanticdiff.com/online-diff/xml/)
- Resources
- [Pricing](https://semanticdiff.com/github/pricing/)
- [Docs](https://semanticdiff.com/docs/)
- [Blog](https://semanticdiff.com/blog/)
- [Contact](https://semanticdiff.com/contact/)
- [Status](https://status.semanticdiff.com/)
- Legal
- [Impressum](https://semanticdiff.com/impressum/)
- [Privacy Policy](https://semanticdiff.com/privacy-policy/)
- [Terms Of Use](https://semanticdiff.com/terms-of-use)
- [Refund Policy](https://semanticdiff.com/refund-policy)
© 2022-2025 Sysmagine GmbH |
| Readable Markdown | null |
| Shard | 128 (laksa) |
| Root Hash | 6100933682261022328 |
| Unparsed URL | com,semanticdiff!/blog/visual-studio-code-compare-files/ s443 |