Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

Formatting code in an easy to read way is an important part of keeping code clean. Code that isn’t formatted properly takes more brainpower to interpret and understand by humans.

In this article, we’ll look at how to format JavaScript code consistently so that they can be read easily by looking at horizontal formatting.

Horizontal Formatting

With screens being bigger than the olden days, we can have horizontal lines that are longer than before.

80 characters long were the standard in the olden days, but now 100 to 120 is also fine.

The point is that most people shouldn’t have to scroll horizontally to read our code.

Horizontal Openness and Density

There should be some spaces between some entities in a horizontal line of code. Good places to put spaces are between variables and operators. Also, the space between literals and operators are also good.

We do not need a space between the method name and the opening parentheses. It doesn’t make as much difference as between operators and variables or literals.

For arrow functions, we should have a space between the closing parentheses, the fat arrow, and the opening brace.

For example, a class with clean horizontal formatting may look something like the following:

class Calculator {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }

  add() {
    return this.a + this.b;
  }

  subtract() {
    return this.a - this.b;
  }

  multiply() {
    return this.a * this.b;
  }

  divide() {
    return this.a / this.b;
  }
}

We have a space between the arithmetic operators and no space between the method name and the open parentheses of each method.

Each line is also less than 120 characters long.

Arrow functions may look something like the following:

const add = (a, b) => a + b;

We can also see that the parameters list also have space after the comma.

Horizontal Alignment

We don’t have to align variables declarations so that they’re horizontally aligned with each other.

For example, we don’t have to do the following:

let foo = 1;
let x = 2;

We can keep it as:

let foo = 1;
let x = 2;

We can just let a code formatter do this kind of spacing change automatically.

Indentation

A code file is like an outline. We look at the high-level information on the outside and as we go deeper, we get to the nested code.

To make the hierarchy visible, we indent the blocks so that the hierarchy is visible to us.

We can do this by adding 2 spaces for indentation. However, we usually don’t have to do this automatically since code formatters will do it for us. We just have to remember to run it.

The indentation applies to blocks like conditionals and loops.

For example:

const loop = ()=>{if(true){for(let x of [1,2,3]){console.log(x)}}};

is much harder to read than:

const loop = () => {
  if (true) {
    for (let x of [1, 2, 3]) {
      console.log(x)
    }
  }
};

We can easily discern the if block and for in the second example, while the first example is almost completely unreadable. As we can see, spacing and indentation are quite important.

Breaking Indentation

For short functions, especially single line arrow functions, we can keep them in one line if they’re less than 120 characters long altogether.

However, for anything else, we should stick to the usual horizontal formatting rules.

Team Rules

If we work on a team, then it’s important to keep a set of rules for formatting code. Fortunately, we just have to run the code formatter of the team’s choice most of the time. This is at least true for horizontal formatting.

Vertical formatting rules like variable and function grouping has to be looked at in code reviews since they can’t be fixed automatically.

For horizontal formatting, we can use tools like ESLint, JSLine or Prettier to format our code.

We just run them automatically whenever we like to format the code.

Modern text editors like Visual Studio Code and Sublime also have add-ons to format code with them.

There’re various preset rules like the default rules that come with these linters and there are also alternatives like the Airbnb rules.

The team can agree on which one to pick and then add it to their code, then horizontal formatting will be done automatically.

Conclusion

There’re a few rules for horizontally formatting code. We should have proper indentation for blocks so developers can follow the code.

Spaces should be added between variables or literals and operators so that we can see the operations more easily.

Each line should be 120 characters or less so that we don’t have to scroll back and forth to read a line of code.

All these things can be done automatically by programs like ESLint, JSLint, and Prettier. They can be used with the default rules or configured with other rules like the Airbnb linting rules for ESLint.

Most modern code editors and IDEs like Visual Studio Code and WebStorm also have code formatters built-in or available as extensions.

They help keep a consistent clean style without developers doing extra work for horizontal code formatting.

The post JavaScript Clean Code — Horizontal Formatting appeared first on The Web Dev.