Color-Coordinate Your Terminal Windows and VSCode Instances

January 15th, 2020

I recently found myself switching back and forth between two broken branches on the same repo. A colleague of mine was flexing a set of major breaking changes on the one branch, which I'd attend to fixing as she pointed them out. After pushing up changes for her to test, I would then switch back to the other branch, where I was fixing a different set of bugs.

This flow worked well, until it didn't. The confusion crept up with each quick "stash-and-switch". And then I wound up committing scratch files from the wrong branch, on my last push, at the end of the day on a Friday. I ended the week on a 🤦‍♂️

A nice little trick to prevent this kind of thing from happening is to use accent colors in VSCode, with matching background colors in Terminal. The matching colors will keep you in context. When you shift your attention back-and-forth, the colors will help bring you back to where you were.

In the case of working on two separate git branches on the same repo, it also makes sense to have two different clones of the repo. That way you don't have to deal with stashing or applying your changes when switching contexts mid-thought.

How to Color Your Terminal and VSCode

  • In MacOS Terminal, you can color the window with either ⌥⌘I or go to Shell > Edit Background Color from the menu bar
  • In VSCode I installed the Peacock extension, which allows you to set accent colors on a workspace-by-workspace basis