Why code formatting matters

Here's a funny bug I've dealt with recently. I had to integrate a new computed property in a Vue 2 component for an older project.

The code looked something like this:

I did the natural thing and added the new property at end and called it a day.

All looked nice, the code compiled without errors but after deploying the update, it turns out the feature did not work. But why? It should have a been a simple fix.

Well, let's take a look at the original code again. Notice something about the } after the computed property's setter? Its indentation is all wrong and goes back to a different level.

Instead of adding a new computed property... what I actually did was to insert a new key inside the previous one. Something technically valid but with not impact on the end result.

Had the code been correctly formatted, like this:

...then the bug would have been avoided and the new property would have been added at the end without any debugging needed.

So what's the lesson here?

First of all, code formatting does matter, especially when we tend to use it as a crutch, to help us follow the logic easily. But that's not the main lesson.

An obvious reaction would be to bemoan the lack of a code linter and the use of a tool like VS Code's Prettier extension but I'd say that's actually the wrong lesson. Unfortunately, that's not always an option and while yes, ideally all projects should share a coding style and use an auto-formatter sometimes that's not the case.

So instead of focusing on past mistakes, I think a better lesson would be to never assume things work. While dealing with junior colleagues, they tend to jump directly to complex scenarios and skip obvious bugs: is the URL they are testing on the correct one? Did the code actually compile? Is the cache on?

The more experienced you get and the more you deal with bugs, the more you should go back to the basics and make sure they work as they should. At the end of the day, a junior developer does not make simple mistakes while the senior makes complex and evolved ones. Most of them are still junior level mistakes, it's just that the more experienced you are, the less of them you make.