Jasmine Web Starter

How to compare "Diff to that"

Since we added the tutorials FAQ section along with the question I've made a few changes to my files can I review them before I stage the changes?

We've had quite a bit of feedback around the compare feature built into VS Code which is at the core of github.dev, vscode.dev, GitHub Codespaces plus many other tools. These have ranged from people saying "Wow I did not know I could do that", to questions about the marking and colours within the compare/diff views. Plus "How do I understand the diff view", and "Can I use it to edit the text?"

So we thought we would dig in a bit deeper with this Sprout of Wisdom. As these questions made us think about how often we use these features whilst working to design, build and support websites each day.

Not everything we work with is always under a version control system so comparing files has played a big part in our working life for many years whilst working on network admin or development roles. Maybe one moment its comparing config files then maybe checking a folder has the same deployed images or sub folders. Sometimes this maybe on the local machine drive or maybe on another server.

My go to daily solution for many years has been Beyond Compare by Scooter Software which is an independent, employee-owned software company. Beyond Compare has always served me very well. Its available in two versions a Standard and Pro version which has more features and a higher price. Over the years I have used both versions which are very worth there price tag of around $35-$70 per user. The license fee is a one time purchase but you can try it out for free if you want to. Yes its a paid product unlike a lot of the products that we have talked about before on this site. But as I've used the Pro version daily for many years its part of my working practices, hence calling it out here.

I also really like the tag on their website that says "Change is inevitable, so manage it with the best tools". Change is inevitable is so true with just about any spec or software around humans.

But if I'm working on files that are under version control or something else code based that is not version controlled maybe a small prototype for something, I find myself more and more using the inbuilt VS Code compare feature.

Which is great as I don't have to leave my current focus and the files are right here to choose from in the file viewer. Plus with VS Code being at the heart of so much tooling/products today, it feels so normal and straight forward to use the inbuilt features. Which leads to a major plus of Learn once and use in multiply places.

Diff or Compare ?

I have opened this by talking about comparing which to me is Comparing two or more files to see their similarities and differences focusing on identifying and highlighting the differences between these two or more files so that we can make a educated decision.

But in many places you might read the term diff or diff view which to me are all talking about the same thing a comparison of files. But digging a little deeper its handy to use the term a diff Viewer or compare Viewer to mean the side by side highlight comparison screen or view.

Where can we compare

Online github.dev / vscode.dec / GitHub codespaces

Compare Two Files in Your Workspace

To compare the content of two files in your workspace, follow these steps:

Open the Explorer view Ctrl+Shift+E

Right click on the first file and choose Select For Compare

Right click on the second file and choose Compare With Selected

The Diff Viewer will now open see Exploring the Diff Viewer below for how to read and understand this view

Alternatively, open the Command Palette Ctrl+Shift+P, and select any of the File: Compare commands. We're not going to fully cover using the Command Palette options here, we just wanted to call it out in case it suits you more to work that way.

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:

Open the Explorer view Ctrl+Shift+E

Make sure you have the Open Editors view enabled (This is enabled by clicking on the … ellipsis menu at the top of the explorer view and clicking on Open Editors)

Expand the OPEN EDITORS list (This appears just above the files in the explore view), right click on the first editor and choose Select For Compare

Right click on the second editor and choose Compare With Selected

The Diff Viewer will now open see Exploring the Diff Viewer below for how to read and understand this view

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

Open the Explorer view Ctrl+Shift+E

Select the file whose history you are interested in

Click on the TIMELINE view to expand it

Click on the Git commit to see how it changed the file

The Diff Viewer will now open see Exploring the Diff Viewer below for how to read and understand this view

The Diff editor has a separate gutter in the middle, which enables you to Stage, Unstage or Revert the changed code blocks. If you select a block of text, you can revert or stage the changes that are included in the selection.

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.

Whilst editing a file

So lets say we have opened a file and started to make some changes, but would now like a quick overview of the changes we completed before the phone rung or someone asked us something. Once you change a file content a Git compare icon appears in the top righthand side menu bar Clicking this will open a diff view showing you what's changed in the file since you started.

This can also be done by clicking the file name in the Source Control view Ctrl+Shift+G, Click on a file to open the diff viewer/editor.

If you have Locally installed VSCode

(We have not covered this setup yet but its on our Roadmap)

All of the Online tasks above will work the same. However for the Git based tasks you will also need Git installed on your local machine.

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):

code --diff path/to/first_file path/to/second_file

Plus with an addin you can

Compare The Content of Two Folders in VS Code

This uses an addin Diff Folders from the VS Code marketplace.

To compare the content of two folders without manually diffing every single file, install the Diff Folders extension and follow these steps:

Open the Diff Folder view by Clicking on the Diff Folder icon in the primary side bar

Create a new diff panel

Select the folders you want to compare

Click the Compare button

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 to learn more about them.

However for tasks like this, I would reach for Beyond Compare but I have used this route a few times on machines without Beyond Compare.

If you have Locally installed Git

(We have not covered this setup yet but its on our Roadmap)

You would have the option to use git diff but we are not going to cover Git Diff function here today. But please feel free to explore the Git Docs git diff page for more on it.

Exploring the Diff Viewer

After following any of the methods described above, the diff viewer should be open.

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 colours red and green, but the colours may vary depending on the theme you are using.

You can Swap Left and Right Side files around by using the ⮂ icon on the top righthand side menu.

Removed Lines

Lines that exist only in the old version are displayed using a bright red background on the left side and a diagonal line pattern on the right side:

Using the Theme - Dark Modern Default Dark Modern

Or if you were using the Theme - GitHub Light Colorblind (Beta)

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:

Using the Theme - Dark Modern Default Dark Modern

Or if you were using the Theme - GitHub Light Colorblind (Beta)

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 colour:

Using the Theme - Dark Modern Default Dark Modern

Or if you were using the Theme - GitHub Light Colorblind (Beta)

You can just scroll to view the changes or you can use the ↓ icon to move to the Next Change Alt+F5 or the ↑ icon to go to the Previous Change Shift+Alt+F5

Between the two compared files is a dividing centre bar if you hover the mouse over this you will see some arrows pointing to the working file these allow you to click on them to Revert block the highlighted block of changes, which could allow you to replace the changes that have been made. Plus it can include stage and unstage options also.

Edit pending changes

While you're viewing changes in the diff editor, you can make edits directly in the pending changes side of the diff editor.

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 (Sometimes 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 … ellipsis 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 the Pilcrow or paragraph sign like icon:

Toggle Collapse Unchanged Regions

Allows you to just focus on the changed areas and not the whole file. Toggle Collapse Unchanged Regions by clicking on icon.

Does GitHub.com have Diff views

On your GitHub repository page if you click on the clock icon number commits button

Just above the file listing you get a list of the commits that have been applied to that repository

Clicking on a commit within the listing puts you into a view that shows a diff of the changes that have happened to the file

The changed removing text having a pink background along with a - icon at the start of the line, and removed spaces having a darker shade of pink coloured square.

Added text having a green background and a + icon at the beginning of the line.

You will also see that at the top of each file it has some numbers like +8 (Green) -8 (Pink) and the words lines changed. This makes it clear how many changes you should look for within that commit.

What if its a remote machine

But some times I find myself on a machine, like maybe a Virtual Machine that does not have VSCode or Beyond Compare. Well I can still compare files and folders (I sometimes have to use the help feature ( --help) to refresh my brain to the switches needed) I can use the Unix/Linux command diff.

To compare files

diff file1.txt file2.txt

This will return the results as a list using > for added content and < for removed content. However you can add -y to return the results in a side by side view.

diff -y file1.txt file2.txt

you will see | vertical bar marking the differences

To compare folders

diff folder1 folder2

However adding -r will include sub folders

diff -r folder1 folder2

If we only want to see if all the sub folders are there, we can add -q for quick

diff -q folder1 folder2

If you need to use this at any time just remember you can type diff --help to get the switches and syntax explained to you right in the terminal

Maybe not a complete overview

Hopefully we've given you some insight into working with compare/diff to compare files and folders.

But in computers there's always 1001 ways of doing things, so to us the right way is the way you are the happiest to work with.

Also we'd just like to state clearly that in no way is this a Sponsored post or product placement, just a happy customer promoting useful tools and features to hopefully help others complete needed tasks in easy steps.

Think we missed something?

If you have any questions or think we should have highlighted another area of comparing? let us know using the Contact form. We are always happy to update the tips to make them more useful to all.