JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.
In this article, we’ll look at how to format file source code for readability.
Formatting
Formatting is important because we want to make everything look good.
The source code that looks good is more readable.
Braces
Braces should be used for all control structures.
This includes blocks, loops, and conditionals.
Even if they’re optional, we should still include it so that it’s clear where blocks start and end.
For instance, instead of writing:
if (condition) foo();
We write:
if (shortCondition()) {
foo();
}
Nonempty Blocks
If we have nonempty blocks, then we should format it in a specific way.
We should have no line breaks before opening braces.
One line break should be after the opening brace.
Another line break before the closing brace.
And line break after the closing brace if a brave terminates a statement or the body of the function or class method, class statement, or class method.
For instance, we should write:
class Foo {
constructor() {}
method(foo) {
//...
}
}
We have methods that are separated with a blank line.
Empty Blocks
If we have empty blocks, then the braces should be on the same line.
For instance, we may write:
function nothing() {}
Block Indentation
2 spaces of indentation are the best spacing.
It minimizes typing and it’s obvious that there’s indentation.
Array Literals
Array literals may be optionally formatted like block-like constructs.
For instance, we can write:
const arr = [
1,
2,
];
or:
const arr = [1, 2];
Object Literals
Like array literals, we may indent properties of object literals like a block.
For instance, we can write:
const foo = {
a: 2,
b: 1,
};
Class Literals
We can write class literals with blocks inside indented.
There shouldn’t be semicolons after methods.
If we create a subclass, then we use the extends keyword.
For instance, we write:
class Foo {
constructor() {
this.x = 1;
}
foo() {
return this.x;
}
}
To assign it to something we write:
const Bar = class Foo {
constructor() {
this.x = 1;
}
foo() {
return this.x;
}
}
Function Expressions
If we have function expressions, then the body should be indented with 2 spaces more than the previous indentation depth.
For instance, we write:
function foo() {
if (a1 === a2) {
baz(a1);
} else {
bar(a2);
}
}
or:
function foo() {
bar()
.baz()
.then((result) => {
if (result) {
result.use();
}
})
}
Switch Statements
switch statements should be indented with 2 spaces.
And each case statement should also be indented with 2 spaces.
For instance, we write:
switch (val) {
case 1:
foo();
break;
case 2:
bar();
break;
default:
throw new Error('invalid value');
}
Statements
We should think about how to format statements for readability.
One Statement Per Line
To make them more readable, we should have one statement per line.
Always Add Semicolon
Each statement should end with a semicolon so that the JavaScript interpret won’t add them for us.
This way, they’re always where we want them.
Column Limit
Line length should be 100 characters or less to avoid overflowing the page.
We don’t want to scroll horizontally to read everything.
Line Wrapping
We should break statements so that each line is within the column limit.
Line Breaks
We should break lines at a higher syntactic level.
For instance, we can break lines at function calls, the dot notation, and after the opening parentheses.
A comma should stay attached to the token that precedes it.
For instance, we can write:
estimate = calc(estimate + x *
estimate) /
2;
We can also write:
const arr = [
1,
2
]
Conclusion
We should have line breaks to keep line lengths within 100 characters or less.
Braces should be formatted for readability.
Block bodies should have 2 spaces of indentation.
switch statements should have indentation inside it.
Line breaks should be added to break long lines, and also should be done at places like function calls, dots for accessing object properties, and after commas.
