diff on A Scripter's Notes

Using Git Delta with Magit

Kaushal.Modi@fakeEmailToMakeValidatorHappy.com (Kaushal Modi) — Wed, 06 Jul 2022 22:04:00 -0400

Git Delta is a command line utility that beautifies git diffs in the terminal. But did you know that it can do the same in Magit too?

Table of Contents

Installing delta
Installing magit-delta
Configuring delta

Delta is a highly configurable I am not kidding. Check out the output of delta --help. command line utility that makes the git diffs look better, while also syntax-highlighting Difftastic is another popular diff tool which compares files based on their syntax. I like reviewing git diffs from within Emacs (Magit). But difftastic does not support Magit. the code in the diffs.

When I first heard of “syntax highlighted diffs”, I wasn’t sure what that meant. If you are in the same boat, here’s a screenshot that shows that.

Figure 1: Example of how delta renders a git diff for an ox-hugo commit

But I do most of my git operations including viewing of diffs from within Emacs, using Magit.

.. and thankfully delta works with Magit!

Below screenshot shows how the same diff looks like in Magit.

Figure 2: Example of how magit-delta renders a git diff for an ox-hugo commit

The magit-delta Emacs package makes this possible, which is also developed by the delta author Dan Davison.

Caveat: If the line numbers are enabled in delta, they mess up the interactive expanding and collapsing of diffs in Magit. See Magit Delta Issue # 13 for more details.

Now, I am alright with not seeing the line numbers in Magit. But I really liked to see the line numbers in the side-by-side view in the terminal. Luckily, if disabled the line-numbers feature but enabled the side-by-side view, I got what I wanted!

Line numbers are disabled in Magit and expanding/collapsing of diffs works correctly. I am also really glad that I don’t see the side-by-side view in Magit diffs even when I enable that feature in delta, because I like to have my Emacs buffers only about 90 characters wide.
Line numbers and side-by-side view are enabled in the terminal.

I’ll end this post with pointers to installing delta and magit-delta and how to configure them.

Installing `delta` #

You can install delta (it’s called git-delta in some package managers) using one of the methods listed in its manual, or you can download → extract its statically compiled binary for your OS from its GitHub Releases page.

Installing `magit-delta` #

Once you put this snippet in your Emacs config and evaluate it, it will install this package and enable the magit-delta-mode in the Magit buffers.

(use-package magit-delta
 :ensure t
 :hook (magit-mode . magit-delta-mode))

Code Snippet 1: Installing and enabling magit-delta using use-package

Configuring `delta` #

Here’s a snippet for delta configuration from my .gitconfig. It’s mostly the same as the one in delta’s the Getting Started guide. The main difference in my workaround for the magit-delta issue.

[core]
 pager = delta

[interactive]
 diffFilter = delta --color-only
[add.interactive]
 useBuiltin = false # required for git 2.37.0

[diff]
 colorMoved = default

[delta]
 # https://github.com/dandavison/magit-delta/issues/13
 # line-numbers = true # Don't do this.. messes up diffs in magit
 #
 side-by-side = true # Display a side-by-side diff view instead of the traditional view
 # navigate = true # Activate diff navigation: use n to jump forwards and N to jump backwards
 relative-paths = true # Output all file paths relative to the current directory
 file-style = yellow
 hunk-header-style = line-number syntax

Code Snippet 2: My configuration for delta in .gitconfig

Git diff Minified JS and CSS

Kaushal.Modi@fakeEmailToMakeValidatorHappy.com (Kaushal Modi) — Mon, 19 Mar 2018 18:13:00 -0400

Make the git diff output be more useful when diffing minified .js and .css files.

Table of Contents

1 Install js-beautify using npm
2 Configure git to use that tool
3 Add/update .gitattributes file to the project repo
Beautiful Result

While working on a little PR for the Hugo doc site theme, I learned that if I needed to make changes to JS/CSS, I had to commit my changes in both unminified and minified versions.

I have a habit to always look at the diffs at the time of staging and committing. So it felt very unnatural to commit a minified JS where the diff would show just one changed line with thousands of characters of minified+uglified JS.

So I started looking for solutions, and found this post by Christian Weiske where he suggests using js-beautify to beautify minified JS diffs.

And that tool works beautifully!

I later found out that the same tool can also be used to beautify minified CSS.
.. and I installed that tool using npm as the pip3 approach failed with “Collecting js-beautify.. Could not find a version that satisfies the requirement js-beautify (from versions: ) No matching distribution found for js-beautify”.

So here’s how you can do useful git diff for minified JS and CSS.

1 Install `js-beautify` using `npm` #

I see myself using js-beautify in many other projects too. So I installed it globally.

npm install --global js-beautify

2 Configure `git` to use that tool #

Add below to your ~/.gitconfig:

Use js-beautify to first beautify the minified JS for the minjs diff configuration, and then do a diff of those beautified files.
Enable caching of those beautified files to speed up the diff, so that re-beautification of unmodified minified files can be skipped.
Similarly for minified CSS, use js-beautify --css to first beautify the minified CSS for the mincss diff configuration.

[diff "minjs"]
 textconv = js-beautify
 cachetextconv = true
[diff "mincss"]
 textconv = js-beautify --css
 cachetextconv = true

3 Add/update `.gitattributes` file to the project repo #

Now, in your project repo’s .gitattributes file, you need to associate files with the diff configurations set above.

Below will use the minjs configuration for *.min.js and *.bundle.js files, and mincss configuration for *.min.css and main.css.

*.min.js diff=minjs
*.bundle.js diff=minjs
*.min.css diff=mincss
main.css diff=mincss

Beautiful Result #

Figure 1: git diff of minified JS as seen in Magit

Isn’t that better than how GitHub shows the exact same commit diff? 😎

Figure 2: Same commit diff shown on GitHub

diff on A Scripter's Notes

Using Git Delta with Magit

Installing delta #

Installing magit-delta #

Configuring delta #