常见diff的场景的优化

查看 diff 是开发工作中常见一个场景，值得优化。下面做一些总结。

总结的基本思路是少就是多。比如

• 使用尽量少的工具¹，尽量少安装插件。这样可以减少工具入口，减少不必要的心智负担。

• 只处理最常见的场景。至于更偏的场景临时Google找解决办法。

场景一：在 git diff 中显示更细粒度差别

默认的git diff显示粒度以行为单位，比较粗。比如

解决方案1 - 使用 git diff 的 option：

如果希望一目了然看到更细微的差别，可以使用 --color-words 选项：

可以看到，它会显示以 word 为单位的比较。这里 word 是以空格键作为分割的单元。

希望更细粒度的比较，比如按照 char 比较，可以使用 --color-words=. 选项：

解决方案2 - 使用 vimdiff:

我们可以使用 vimdiff。首先在.gitconfig 中设置：

$ cat ~/.gitconfig
...
[diff]
  tool = vimdiff
...

然后 git difftool:

解决方案3 - 使用 IDE:

也可以使用常用的IDE。这样的好处是对大的改动比较好，比如，在WebStorm中， 使用Local Change窗口。可以看到，WebStorm提供可视化的比较选项，很方便。不过，坏处是没有命令行查看快捷，尤其是简单的改动。

场景二：比较两个文件显示更细粒度的差别

比较两个文件时，默认的diff命令也有力度不好的问题：

另外，高亮显示也没有²³。

解决方案1 - 借用 git diff：

不在git代码仓中，我们也可以使用git diff。只要添加一个--no-index 选项：

解决方案2 - 使用 vimdiff：

使用vimdiff index.js new-index.js

解决方案3 - 使用IDE：

如果你常用的IDE支持的话，使用它做 diff 也很方便。比如Intellij 系列IDEA支持命令行diff选项。

idea diff index.js new-index.js

webstorm diff index.js new-index.js

下面是Webstorm截屏：