You're viewing a project's code on your machine, and the code is hosted in Github. Imagine couple scenarios:
- You stumble upon a branch you don't recognize. You want to see how does this branch differ from the primary
main
branch. - You're about to merge a branch into your
main
branch without making a pull request. Once again you want to see the changes before merging.
The answer to both scenarios is git diff
.
I'm not sure about you, but I find viewing larger diffs (even colored ones) in terminal somewhat cumbersome.
There are GUI tools, like what we have in VSCode, but it takes time to click through menus to get to the correct screen and find relevant branches so it never sticked with me.
What I find awesome for viewing diffs is Github Compare page.
It's familiar, well organized and useful. Whenever I can, I prefer to view my git diffs there.
Crafting a url to get to the compare page is boring though.
Below is a quick tip on how to add a console alias to open the Github diff page to see changes between 2 branches or commits:
> ghcmp main my-feature-branch # opens a browser window with Github compare of "main" and "my-feature-branch"
Prerequisites
You only need git
installed in the environment where you want to add the alias.
Note: you need to run the ghcmp
command (or whatever you name the alias) in the directory with you git repository, so that it can find out the repo's Github url.
We will see how to add the alias to zsh
and bash
shells on Mac and Linux.
Github compare page
Compare page url format:
https://<REPO URL>/compare/<SOURCE BRANCH OR COMMIT>...<TARGET BRANCH OR COMMIT>
Note the difference between ..
and ...
(2 and 3 dots).
2 dots: show all commits that TARGET has but SOURCE doesn't and commits that SOURCE has but TARGET doesn't.
3 dots: show all commits that TARGET has but SOURCE doesn't. You usually want this.
E.g. to see what was added in the 0.4-stable
branch compared to 0.3-stable
in react
repo:
https://github.com/facebook/react/compare/0.3-stable...0.4-stable
Command to open diff in Github
Assuming alias signature is ghcmp [from branch-or-commit] [to branch-or-commit]
, the shell command is this:
Mac:
open "$(git config --get remote.origin.url | sed -E 's/:([^\/])/\/\1/g' | sed -e 's/git@/https:\/\//g' | sed -e 's/.git$//')/compare/$1...$2"
Linux:
xdg-open "$(git config --get remote.origin.url | sed -E 's/:([^\/])/\/\1/g' | sed -e 's/git@/https:\/\//g' | sed -e 's/.git$//')/compare/$1...$2"
Command deconstructed if you're curious:
open
open the following url in the browser, replace with xdg-open for Linux
"$(git config --get remote.origin.url
get the url of the repo from the git config file
| sed -E 's/:([^\/])/\/\1/g' | sed -e 's/git@/https:\/\//g' | sed -e 's/.git$//')
convert the repo url to a canonical (https) form
/compare/$1...$2"
the path in the Github compare url with 2 arguments passed
I've adapted the sed from this SO answer.
Add shell alias
Now that we have the command, let's add the alias. It's the same for both bash
and zsh
, only the shell configuration file is different.
In bash, add to the end of ~/.bashrc
. In zsh, add to the end of ~.zshrc
:
ghcmp() {
open "$(git config --get remote.origin.url | sed -E 's/:([^\/])/\/\1/g' | sed -e 's/git@/https:\/\//g' | sed -e 's/.git$//')/compare/$1...$2"
}
...
That was a little productivity trick to simplify your daily git process a bit.
If you like this type of content you can follow me on Twitter for the latest updates.
Top comments (0)