Clean Code: Formatting Matters More Than You Think

Code formatting is a bit like the layout of a book. If the text is crammed together with no paragraphs or consistent spacing, it's a chore to read. But if it's well-structured with clear headings and paragraphs, it's a pleasure to read. The same is true for code.

Good formatting uses vertical and horizontal space to make the structure of your code obvious at a glance. It's not about your personal preference for where a curly brace should go; it's about agreeing on a consistent style that the whole team can follow, making the codebase feel like it was written by one person.

Vertical Formatting: The Newspaper Metaphor

Think of a source file like a newspaper article. At the top, you have the headline, which should tell you what the article is about. As you read down, you get more and more details.

• Separate concepts with blank lines. Just like paragraphs in an article, blank lines in your code can group related lines together and separate different logical blocks.
• Keep related code close. If one function calls another, they should be close to each other in the file if possible. This minimizes jumping around.

// Bad: Everything is crammed together.
function processOrder(order) {
    const items = order.items;
    let total = 0;
    for(const item of items) {
        total += item.price;
    }
    const tax = total * 0.1;
    const shipping = 10;
    return total + tax + shipping;
}

// Good: Vertical space is used to separate logical blocks.
function processOrder(order) {
    const items = order.items;
    
    let total = 0;
    for(const item of items) {
        total += item.price;
    }
    
    const tax = total * 0.1;
    const shipping = 10;
    
    return total + tax + shipping;
}

Horizontal Formatting: Keep it Narrow

Long lines of code are hard to read. A good rule of thumb is to keep your lines under 80 or 100 characters.

• Use spaces around operators. This makes expressions easier to read. a + b is much clearer than a+b.
• Break long lines. When a line gets too long, break it at a logical point and indent the continuation.

// Bad: A long, dense line of code.
if(user.isAuthenticated && user.hasPermission('admin') && !user.isBlocked && user.session.isActive()) { /*...*/ }

// Good: The line is broken into logical parts.
if (
    user.isAuthenticated &&
    user.hasPermission('admin') &&
    !user.isBlocked &&
    user.session.isActive()
) {
    /*...*/
}

The Ultimate Solution: Automate It!

The best way to deal with formatting is to not deal with it at all. Let a tool do it for you. This ends all the pointless debates about style and ensures that your entire codebase is perfectly consistent.

• Prettier is the de facto standard for code formatting in the JavaScript world. It's opinionated, which is a good thing—it means you don't have to make any decisions.
• ESLint can also enforce formatting rules, but it's often used in combination with Prettier.

Set up Prettier to run automatically when you save a file or before you commit your code. It's a simple step that will save you and your team a huge amount of time and energy.

Consistent formatting is a simple but powerful way to improve your code. It makes it more readable, more professional, and easier for everyone to work with.