Line 'em Up

Help your brain find errors with a simple layout habit

Photo by Darryl Low on Unsplash

This Ruby program contains a list of countries in the European Union.

When we print the length of the list, we get 26, but there should be 27. How long does it take you to see the problem?

Here’s the same list, formatted a little differently.

See the problem now?

Here’s another example of code that fails when run:

Can you see three errors? How about now?

The brain is incredibly good at seeing anomalies in patterns. Maybe that was a skill that could save your life on the plains of Africa, where seeing a blob between the lines of tall grass blades might mean leopard⚠

When things are lined up, anomalies jump out at us. I find that adding the occasional space to put things into columns finds an incredible number of stupid errors.

Help your brain find errors using decent layout

Practicalities

• I wouldn’t do this if my editor didn’t handle aligning things with a couple of keystrokes. For example, I use Neovim. To align the previous example I selected the code (I type vas) and then invoked the EasyAlign plugin, telling it to align the equals signs (ga=). I bet your editor has a plugin for this, too.

• This kind of aligning can get out of hand when names are wildly different lengths:

  

  I find this harder to read, as my eye can get lost scanning across. However, rather than abandoning the idea, I’ll typically align like-sized lines together:

  

Suggestion: Choose an alignment plugin for your editor

I don’t use VSCode much, but I just checked and it seems to have dozens of alignment plugins. I suspect the same is true for most editors. In my experience, it takes a while to find one that works the way you think, but once you find something you like, learn how to drive it.