14 Nov 2022

git diff by word

The default diffing algorithm for git diff is by lines. There are scenarios where it’s more interesting to diff by word, for example: long lines. In that case it’s useful to use --word-diff=color.

Table of Contents

Usage is as follows:

git diff --word-diff=color

Options for --word-diff are (see the git diff --word-diff docs):

plain: default uses [-removed-] and {+added+} formatting
color: uses color to denote changes (no +/- delimiter)
porcelain: similar to plain but uses line-based delimiters, plain can be ambiguous, porcelain is meant to be non-ambiguous and for machine consumption

default `git diff` output

git diff output, which is manageable here:

git diff yarn.lock

diff --git a/yarn.lock b/yarn.lock
index e838f6b..4e659c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1874,9 +1874,9 @@ es-to-primitive@^1.2.1:
     is-symbol "^1.0.2"
 
 esbuild@^0.8.24:
-  version "0.8.39"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.39.tgz#18b84a3d56173c55ee8f45bc6c7b5374b0a98ecb"
-  integrity sha512-/do5H74a5ChyeKRWfkDh3EpICXpsz6dWTtFFbotb7BlIHvWqnRrZYDb8IBubOHdEtKzuiksilRO19aBtp3/HHQ==
+  version "0.8.57"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.57.tgz#a42d02bc2b57c70bcd0ef897fe244766bb6dd926"
+  integrity sha512-j02SFrUwFTRUqiY0Kjplwjm1psuzO1d6AjaXKuOR9hrY0HuPsT6sV42B6myW34h1q4CRy+Y3g4RU/cGJeI/nNA==
 
 escape-goat@^2.0.0:
   version "2.1.1"

`git diff --word-diff` output

git diff --word-diff output, great for copy-paste):

git diff --word-diff

diff --git a/yarn.lock b/yarn.lock
index e838f6b..4e659c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1874,9 +1874,9 @@ es-to-primitive@^1.2.1:
    is-symbol "^1.0.2"

esbuild@^0.8.24:
  version [-"0.8.39"-]{+"0.8.57"+}
  resolved [-"https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.39.tgz#18b84a3d56173c55ee8f45bc6c7b5374b0a98ecb"-]{+"https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.57.tgz#a42d02bc2b57c70bcd0ef897fe244766bb6dd926"+}
  integrity [-sha512-/do5H74a5ChyeKRWfkDh3EpICXpsz6dWTtFFbotb7BlIHvWqnRrZYDb8IBubOHdEtKzuiksilRO19aBtp3/HHQ==-]{+sha512-j02SFrUwFTRUqiY0Kjplwjm1psuzO1d6AjaXKuOR9hrY0HuPsT6sV42B6myW34h1q4CRy+Y3g4RU/cGJeI/nNA==+}

escape-goat@^2.0.0:
  version "2.1.1"

`git diff --word-diff=color` output

git diff –word-diff=color (screenshot, it doesn’t copy-paste so well):

git diff --word-diff=color output

Photo by Kelly Sikkema on Unsplash

git diff by word

default `git diff` output

`git diff --word-diff` output

`git diff --word-diff=color` output

Interested in Alpine.js?

Markdown escape backticks in inline code and fenced code blocks

git/GitHub CLI set editor to vim or VSCode

default git diff output

git diff --word-diff output

git diff --word-diff=color output

Interested in Alpine.js?

Interested in Alpine.js?

default `git diff` output

`git diff --word-diff` output

`git diff --word-diff=color` output