prettier-diff

prettier-diff is a git diff wrapper that preprocesses JavaScript and JSON files to reduce the number of formatting changes that appear in the diff. This allows you to focus on the semantic changes, which is useful when viewing diffs that also have formatting changes.

JavaScript is preprocessed with [prettier], and JSON is preprocessed with [json-stable-stringify] and [json-align].

Installation

You can use [yarn] or [npm] to install prettier-diff:

yarn global add prettier-diff
# or
npm install --global prettier-diff

Usage

One-off usage

In any git repository, just use prettier-diff instead of git diff:

# instead of
git diff head^^
# do this
prettier-diff head^^

Behind the scenes, prettier-diff temporarily modifies the .git/config and .git/info/attributes files to set up the preprocessing by defining a [textconv] for all files.

git diff integration

To always use prettier-diff as part of git diff in a given repository, you can run the following:

git config diff.prettier.textconv textconv-prettier

echo '*.js diff=prettier' >> .gitattributes
echo '*.json diff=prettier' >> .gitattributes

Now, git diff will automatically run prettier-diff on your JS/JSON files, and it plays well with the other git diff options like --ignore-all-space, as well as [diff-so-fancy]. See here for more information: [textconv]

Examples

For example, this repository contains a large commit that rewrote most of its code with [prettier-standard], and also renames a variable. You can see the commit on GitHub here: [8cc0119]

With prettier-diff, only the renaming is shown:

prettier-diff 8cc0119^ 8cc0119 --color | diff-so-fancy