so-fancy / diff-so-fancy

Good-lookin' diffs. Actually… nah… The best-lookin' diffs. :tada:

diff-so-fancy

diff-so-fancy strives to make your diffs human readable instead of machine readable. This helps improve code quality and helps you spot defects faster.

Screenshot

Vanilla git diff vs git and diff-so-fancy

Install

Simply copy the diff-so-fancy script from the latest release into your $PATH and you're done. Alternately to test development features you can clone this repo and then put the diff-so-fancy script (symlink will work) into your $PATH. The lib/ directory will need to be kept relative to the core script.

If you are using a ZSH framework like zgenom or oh-my-zsh, refer to Zsh plugin support for diff-so-fancy for detailed installation instructions.

diff-so-fancy is also available from the NPM registry, brew, as a package on Nix, Fedora, in the Arch extra repo, and as ppa:aos for Debian/Ubuntu Linux.

Issues relating to packaging ('installation does not work', 'version is out of date', etc.) should be directed to those packages' own repositories/issue trackers where applicable. Issues relating to packaging ("installation does not work", "version is out of date", etc.) should be directed to those packages' repositories/issue trackers where applicable.

Note: Windows users may need to install MinGW or the Windows subsystem for Linux.

Usage

With git

Configure git to use diff-so-fancy for all diff output:

git config --global core.pager "diff-so-fancy | less --tabs=4 -RF"
git config --global interactive.diffFilter "diff-so-fancy --patch"

Improved colors for the highlighted bits

The default Git colors are not optimal. The colors used for the screenshot above were:

git config --global color.ui true

git config --global color.diff-highlight.oldNormal    "red bold"
git config --global color.diff-highlight.oldHighlight "red bold 52"
git config --global color.diff-highlight.newNormal    "green bold"
git config --global color.diff-highlight.newHighlight "green bold 22"

git config --global color.diff.meta       "11"
git config --global color.diff.frag       "magenta bold"
git config --global color.diff.func       "146 bold"
git config --global color.diff.commit     "yellow bold"
git config --global color.diff.old        "red bold"
git config --global color.diff.new        "green bold"
git config --global color.diff.whitespace "red reverse"

With diff

Use -u with diff for unified output, and pipe the output to diff-so-fancy:

diff -u file_a file_b | diff-so-fancy

It also supports the recursive mode of diff with -r or --recursive as first argument

diff -r -u folder_a folder_b | diff-so-fancy

diff --recursive -u folder_a folder_b | diff-so-fancy

Options

markEmptyLines

Should the first block of an empty line be colored. (Default: true)

git config --bool --global diff-so-fancy.markEmptyLines false

changeHunkIndicators

Simplify git header chunks to a more human readable format. (Default: true)

git config --bool --global diff-so-fancy.changeHunkIndicators false

stripLeadingSymbols

Should the pesky + or - at line-start be removed. (Default: true)

git config --bool --global diff-so-fancy.stripLeadingSymbols false

useUnicodeRuler

By default, the separator for the file header uses Unicode line-drawing characters. If this is causing output errors on your terminal, set this to false to use ASCII characters instead. (Default: true)

git config --bool --global diff-so-fancy.useUnicodeRuler false

rulerWidth

By default, the separator for the file header spans the full width of the terminal. Use this setting to set the width of the file header manually.

git config --global diff-so-fancy.rulerWidth 80

The diff-so-fancy team

Person	Role
@scottchiefbaker	Project lead
@OJFord	Bug triage
@GenieTim	Travis OSX fixes
@AOS	Debian packager
@Stevemao/@Paul Irish	NPM release team

Contributing

Pull requests are quite welcome, and should target the next branch. We are also looking for any feedback or ideas on how to make diff-so-fancy even fancier.

Other documentation

• Pro-tips on advanced usage
• Reporting Bugs
• Hacking and Testing
• History

Alternatives

• Delta
• Lazygit with diff-so-fancy integration

License

MIT

diff-so-fancy's Issues

NPM will not update, as it's a symlink

Just got this:

.. debugging:

Trailing whitespace highlight broken

Here's a view of trailing space highlighting kinda breaking with diff-so-fancy:

Original output:

�[1;31m-    dir="$(cd -P "$( dirname "$src" )" && pwd)"�[m
�[1;32m+�[m�[1;32m    dir="$(cd -P "$( dirname "$src" )" && pwd)"�[m�[7;31m �[m
     src="$(readlink "$src")"�[m
�[1;31m-    [[ $src != /* ]] && src="$dir/$src"�[m
�[1;32m+�[m�[1;32m    [[ $src != /* ]] && src="$dir/$src"�[m�[7;31m �[m

Git add --patch does not use diff-so-fancy

Hi

Not sure if this is the correct place for this issue.

Just started using this npm package and it's great, it makes reading diffs in my terminal great.

However when I use git add --patch it uses the old style diff to display each chunk that's about to be staged.

Is git add --patch not supposed to use diff under the hood, which is now diff-so-fancy?

Is there anything we can do to use diff-so-fancy with git add --patch?

Thanks

Sed error: bad flag in substitute command

I'm getting this error when I try diff-so-fancy:

sed: 1: "/^((\033\[([0-9]{1,3}(;[0- ...": bad flag in substitute command: '}'

Changing the "meta" color reverts the divider to the default style

I'm using the suggested defaults (see below) and I wanted to change the meta color to just yellow (not bold). Setting it to yellow gives me a brownish color, so I used 11 instead. This gives me the color I want, but reverts the style of the header to the old raw diff style.

[color "diff"]
    meta = yellow bold
    commit = green bold
    frag = magenta bold
    old = red bold
    new = green bold
    whitespace = red reverse
[color "diff-highlight"]
    oldNormal = red bold
    oldHighlight = red bold 52
    newNormal = green bold
    newHighlight = green bold 22

Horizontal line separating files steps up

Hey this is on a Mac running in either iTerm or built in terminal

colors not showing up

I added the colors for diff-highlight in my .gitconfig as instructed, however the output of git diff | diff-highlight does not output any colors.

Could there be something that I am missing here?

why it is a NPM install?

Confusing diff when removing lines that start with --

I would expect to see the addition/removal indicator separated by a gap from the content that was changed. For example, - --content, but instead I see ---content.

It looks like the deleted lines start with three hyphens, which is a bit misleading.

Horizontal rules not displaying correctly.

Please see the image. I'm using the Solarized Dark xterm-256color theme from https://github.com/mathiasbynens/dotfiles

Incorrectly highlighted lines on Windows

I've set up the tool using the instructions from the README (npm install, then set core.pager value). I've run a test diff and the first code line of each file is incorrectly highlighted and colored:

Also, the headers are white instead of yellow, but that's a minor issue.

My environment: Windows 10, Cmder console (but issue also occurs in PowerShell), default Git for Windows installer.

Can't use the arrow keys to scroll up/down during the diff

Not sure if this is even fixable since you're piping the output but it would be nice :)

bad flag in substitute command: '}'

For the following diff:

diff --git a/src/components/navigation/Navigation.jsx b/src/components/navigation/Navigation.jsx
index b8babac..a68d90f 100644
--- a/src/components/navigation/Navigation.jsx
+++ b/src/components/navigation/Navigation.jsx
@@ -47,7 +47,7 @@ export default class Navigation extends React.Component {
         if (this.state.navigations !== null) {
             // 3 left, 5 right
             leftNavigation = <NavigationList navigations={ _.take(this.state.navigations, 3) }/>;
-            myAccountNavigation = <NavigationList navigations={ _.takeRight(this.state.navigations, 5) }/>;
+            myAccountNavigation = <NavigationList navigations={ _.takeRight(this.state.navigations, 4) }/>;
         }

         const _className = `component-navigation${ this.state.open ? ' open' : ''}`;

Running git-diff | diff-so-fancy yields this error:
sed: 1: "/^((\x1B\[([0-9]{1,3}(; ...": bad flag in substitute command: '}'

Create and submit a brew formula

Repo more than meets the star/fork requirements. Most Mac users would probably prefer a pure-brew install than a brew+npm install.

brew install gnu-sed --with-default-names && npm install -g diff-so-fancy would become brew install diff-so-fancy. You could even include the git configuration in the formula.

Merge diffs formatted poorly

Removal of the initial +/- interacts poorly with merge diffs, which have two initial columns of indicators.

I also suspect octopus merges can have even more.

Join forces with diff-ss

diff-ss is the side-by-side diff version of git diff. It would be nice to join both (all three together with diff-highlight) to make the ultimate terminal diffing experience! 😎

Disclaimer: of course this is a shameless plug from the author...

Current git config instructions clobbers `git log`

git config --global core.pager "diff-so-fancy | less --tabs=1,5 -R"

This highjacks things like git log, and other commands locally for me. Is there a non-destructive way of doing this? If not, I'd suggest showing how to alias it in bash instead of adding it to the gitconfig.

newline artifacts

After updating to today's master I have some artifacts with the character n in my diff header.

@pauley-unsaturated do you think it may be your fixes?

I get this result after brew rm gnu-sed. If it's installed, things are looking fine.

Tests required

We're lacking tests for a few areas. Let's use this ticket to track them.

• diff-highlight path is resolved on a manual install
• diff-highlight path is resolved when it's already in the PATH
• diff-highlight path is resolved with a more complex symlink setup (homebrew install or nvm'd npm install)
• works without extra gnu-sed dependency (requires fix: #49, #55)
• different meta color doesn't break the diff header formatting (requires fix: #12)

Please add any others you think we'll need! Edit or leave a comment.

Problem on OSX

When I try git diff --color | diff-so-fancy I get the following error: sed: 1: "/^((\x1B\[([0-9]{1,3}(; ...": bad flag in substitute command: '}'.

I've just installed it globally and tried a diff.

Release v0.2.0

We've done an amazing job so far! Thank you everyone 😄

• readme: clarity on diff-highlight & other readability improvements (1b4194a)
• readme: manual install (21ffc64)
• diff_highlight should be relative to the source instead of cwd (ded0b09)
• add comments on finding the deps (feceb50)
• Add git alias usage to docs (5035027)
• Add in diff-highlight's link (459e8e8)
• add in License MIT in Readme (1d132c4)
• Define shorter dsf alias in docs (bb427e8)
• depend on local diff-highlight. (d614817)
• Detect gsed and use it if it exists (e0fa502)
• Fixes path detection for nvm users (967fb0b)
• Fixes readme for gnu-sed (e372403)
• License change to MIT (ed9e3cc)
• link git contrib and change diff-highlight link to it's folder (to view readme) (deddd80)
• mark empty newlines (5c3aa39)
• Missing . in sentence (c584da0)
• prefer a global diff-highlight, but fallback to our local copy (8e5da94)
• readme. easy bypass of diff-so-fancy (519568c), closes #22
• set tab stops for less (fc306e2)
• Update readme.md (7bcda36)

Is there anything we missing before a new release?

Have a way to switch between old way of `git diff` and the new one

Sometimes, i do want to get a patch from git diff. Is there an easy way to do that once i have turned on diff-so-fancy git config?

Encoding issue or broken sed command

I tried many other fonts in my iTerm terminal.

Interestingly, in Mac Terminal I get an error like this:

sed: -e expression #1, char 211: unterminated `s' command
sed: -e expression #1, char 197: unterminated `s' command

Remove the duplicate line

When text is added/removed in a line, why not just show the added/removed part instead of a removed original line and a new line?

clean up inline docs from so-fancy script

Now that it's in a real readme, maybe you want to clean out the inline docs.

you can definitely remove the TODO about npm, since you did that. :)

git simple alias with pipes and multiple arguments doesn't work.

e.g:

$> git dsf --cached test/
fatal: ambiguous argument '@$': unknown revision or path not in the working tree.
Use '--' to separate paths from revisions, like this:
'git <command> [<revision>...] -- [<file>...]'

Instead we can use bash function to make the alias work with pipes and all.

Homebrew formula not found.

Install on mac results in;

$ brew install diff-so-fancy Error: No available formula with the name "diff-so-fancy" ==> Searching for similarly named formulae... Error: No similarly named formulae found. ==> Searching taps... Error: No formulae found in taps.

Is this module being updated in npm?

Jumping between output segments

Prior to using diff-so-fancy, I would often use /^diff or /^commit in less to jump between files/commits.

With diff-so-fancy, I've found I can pre-seed less with the search pattern (-p) which is nice because then I can immediately start hitting "n/p" to jump between matches, but I'm still trying to figure out the most useful regex to use..

Currently I'm using:

diff-so-fancy | less --tabs=4 -RFX -p'^ -- |^commit'

which is ok, but it would be a little nicer if I could match the line above, which is the ──── line (unfortunately, I don't think there's an easy way to distinguish it from the second ──── line which appears below the filename).

If this is the sort of thing lots of people do (and not just my own personal weirdness), then maybe diff-so-fancy should help out with making the blocks more matchable.

finish migration to `so-fancy` github org

we've moved this repo!

• the all-important org logo (changes welcome! :)
• teams set up.
• invites sent out
• URLs updated
• circle/travis badges in readme updated.
• team accounts on circle/travis set up.

Do we care about `deleted file mode`

In the interest of saving screen real-estate, can we remove deleted file mode. I can maybe understand showing the added file mode, but who cares about what the file mode was when it was deleted.

Should we remove this line? Or am I just complaining about nothing.

new file mode 100644
────────────────────────────────────────────────────────────────
added: hello.txt                                                
────────────────────────────────────────────────────────────────
@@ -0,0 +1 @@
HI THERE
deleted file mode 100644
────────────────────────────────────────────────────────────────
deleted: package.json                                           
────────────────────────────────────────────────────────────────
@@ -1,29 +0,0 @@

Support a different installation method

npm is fine for us who do a lot of JS, but it's not convenient for people who don't. This project uses no JavaScript, so it really has no hard dependency on npm.

It'd be great if you could install this in a different, more common way.

New screenshot for readme

There's been a few changes that aren't reflected in the screenshot or summarized in the readme's text.

e.g. the header_clean, code is flush left, dim foreground on context line

Anybody wanna take a swipe at updating those?

Highlight works in diff-highlight, does nothing in diff-so-fancy

Any idea why diff-so-fancy fails to highlight changes when diff-highlight works just fine (see attached screenshot)? Right after installing (with npm), no changes to default configs. (I'm on Centos 6.7)

No way of showing added or removed empty lines?

Thanks so much for this awesome tool! Is there a way to make it show added or removed empty lines? I see the added space from the new lines in my diff, but they aren't highlighted at all. (I installed it on OS X, following your instructions to a tee, including all of your suggested changes to my Git config.)

Clean `a/` and `b/` prefix on header

Hi,

I want to suggest you an improvement: removing the prefix a/ or b/ in the header. It will make the file path easier to select.

New empty line deletion is swallowing non-empty lines

The top commit line in my git log was swallowed by it, for example. I had to revert to the previous version.

cli

Not sure if this is to be included into the repo, but I found that using the pipe combo is bit much of typing, so I rolled this:

https://github.com/tonekk/git-di

publish new npm version

to fix the readme ugliness. :)

Brew formula not found

$ brew install diff-so-fancy

Error: No available formula for diff-so-fancy
Searching formulae...
Searching taps...

$ brew search diff-so-fancy

No formula found for "diff-so-fancy".
Searching pull requests...
Closed pull requests:
diff-so-fancy 0.4.0 (https://github.com/Homebrew/homebrew/pull/49222)
diff-so-fancy 0.3.0 (new formula) (https://github.com/Homebrew/homebrew/pull/49040)

Option to enable pesky + or - at line-start

Some people like myself might actually prefer to have the + and - on the left but still benefit from the other improvements. Feasible?

using arrows navigation

Wow, after using git diff in the CLI for so long I must say I really enjoy this stuff !

One thing though that still prevents me from using it when investing large commits (and therefore using it as an alias in my git config), it seems that I can't use the arrows and space key to scroll up and down in the output provided... It just prints everything out and stops. I liked the less-like behavior of plein ol' git diff, am I missing something or is this just not the way it works ?

Any plan on supporting this or is there a technical limitation of some sort ?

indentation seems to be off when configuring the pager

When I use the pager config for any diff related command (git config --global core.pager "diff-highlight | diff-so-fancy | less -r"), the indentation seems to be off.

This does not seem to happen if I just do git diff | diff-highlight | diff-so-fancy.

Unable to quickly select a filename

When double clicking the filename the a/ or b/ is copied along. It would be great to remove that, or separate it with a space, or add the plain filename as a separate line as well, to be able to support this use case.

readme instructions for setting global config misleading

I'm not an expert on git config manual editing, but adding

git config --global core.pager "diff-highlight | diff-so-fancy | less --tabs=1,5 -R" to my git config on mac was invalid.

Running git config --global core.pager "diff-highlight | diff-so-fancy | less --tabs=1,5 -R", however, added this line under core

[core]
    pager = diff-highlight | diff-so-fancy | less --tabs=1,5 -R

Hard dependency on diff-highlight from diff-so-fancy

Maybe we should just depend on diff-highlight from inside of diff-so-fancy.

That would mean people instead configure it with git diff | diff-so-fancy directly.

If diff-highlight isn't found, we could just pass through the stdin and perhaps issue a warning that says "hey you're missing diff-highlight bud"

Seems a little more user-friendly. wdyt?

Inline changes not inline

I'm not able to see inline changes as advertised in the README:

I believe this should be just one line, but it's showing up as two. I'm on OS X using zsh as my shell if that matters.

Test suite

I think it's time for us to add proper unit tests.

I haven't seen a test suite for a project like this before, but it shouldnt be too bad. I'm thinking a folder of input text files, with ANSI escapes and all. And a folder of expected output. Seem right?

Is there a test runner that'd work well for us?

Doesn't correct default terminal colours

Currently, it only sets the colour of particular lines. If the terminal has red or green text for example, it's impossible to tell which lines have been removed or added respectively. If the colour of "normal" text, which hasn't changed, is defaulted to black or white, then it would be much easier to see the changes.

So fancy patch diffs?

Totally loving the new diffs, making my working life much more fun 🙂️

Thing is, you've spoiled me, and I kinda want them everywhere now. I had a quick grep about but couldn't find anything. Does anyone out there know a way to modify the command that generates the patch diffs? I would be happy to implement if someone can point me in the right direction.

In case someone is reading this and thinking "What's a patch diff?" do git commit -p from somewhere dirty.