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