Quick Tip: How to Hide Whitespace Changes in Git Diffs

Written by Scott Vandehey on

Screenshot of a code diff before and after hiding whitespace.

If you’ve ever had to review a pull request where the only code change is adding or removing a wrapper element, you’ll be familiar with the pain of reviewing what appears to be a massive change but is actually trivial.

In this example I’ve added a wrapper element and removed some inner elements. By default, it looks like I changed almost every line. That’s because git is highlighting every line that had an indentation change. When I hide whitespace changes, it becomes quite clear what I added and removed.

Most Git hosting services support the ability to hide whitespace changes by adding ?w=1 as a URL parameter. Let’s explore how to hide whitespace changes for some of the big players.

GitHub

You can hide whitespace changes for GitHub diffs in two ways. First, click the gear icon near the top of the page and check the “Hide whitespace changes” option.

Screenshot of the GitHub UI, showing the "hide whitespace changes" option.

Or, you can add ?w=1 to the URL.

GitLab

You can hide whitespace changes for GitLab diffs in two ways. First, click the “Hide whitespace changes” button near the top of the page.

Screenshot of the GitLab UI, showing the "hide whitespace changes" button.

Or, you can add ?w=1 to the URL.

Bitbucket

You can hide whitespace changes for Bitbucket diffs by adding ?w=1 to the URL.

Scott Vandehey

Scott Vandehey is a front-end architect and CSS specialist with over 15 years experience. He curates the Friday Front-End twitter and newsletter, sharing front-end development tips and links every day. He is the author of “How to Find a Better Job in Tech.” Follow him at @spaceninja.

Never miss an article!

Get Weekly Digests


Leave a Comment

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.


Let’s discuss your project! Email Us