JavaScript Code Formatting

Why formatting matters

Formatting does not change what code does, but it changes how fast people can read it. Steady indentation shows structure at a glance, and a shared style removes arguments from code reviews and keeps diffs small, because a change then shows only real edits and not moved whitespace.

Formatting, linting and minifying

• Formatting changes layout only: spaces, line breaks and where brackets sit. Try the JavaScript formatter.
• Linting finds likely mistakes and bad habits, such as unused variables. ESLint is the usual tool.
• Minifying makes code smaller for delivery by removing whitespace and comments, and optionally shortening names. Try the JavaScript minifier.

The choices that matter

Indentation

Two spaces is the most common choice in JavaScript projects. Four spaces and tabs are also used. What matters is that the whole project agrees. Tabs let each reader choose a width, while spaces look the same everywhere.

Semicolons

Both styles are valid. JavaScript inserts missing semicolons at some line breaks, a feature called automatic semicolon insertion. It is reliable most of the time, with a few well known traps:

// A value on the next line is lost
function total() {
  return
    1 + 2
}
// total() returns undefined

// A line that starts with ( or [ joins the line above
const a = 1
const b = 2
;[a, b].forEach(console.log)

If you leave semicolons out, put a semicolon at the start of any line that begins with a bracket or a template literal. If you use them, always write them, and let a tool enforce it.

Quotes

Single and double quotes behave the same. Pick one and use template literals with backticks when you need to build text with values in it.

Braces and line breaks

Most JavaScript puts the opening brace on the same line as the statement, and puts else on the same line as the closing brace. Always using braces for if and for bodies avoids a class of mistakes where a second line looks like part of the body but is not.

Line length and trailing commas

A line limit of 80 to 100 characters keeps code readable in side by side views. Trailing commas in multi line lists and objects make diffs cleaner, because adding an item changes only one line.

Tools that apply the style for you

The best style guide is the one that nobody has to remember because a tool applies it.

Prettier

Prettier is an opinionated formatter with very few options. It rewrites your code from a parsed tree, so the layout follows from the code, not from how you typed it.

npm install --save-dev prettier
npx prettier --write .
npx prettier --check .

// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2
}

EditorConfig

An .editorconfig file tells every editor the basics, so a team on different editors gets the same indent and line endings.

root = true

[*.js]
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

Format on save

In Visual Studio Code you can install the Prettier extension and add these settings, so code is formatted each time you save:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Check in continuous integration

Run npx prettier --check . in your pipeline so that unformatted code fails the build. Pair it with ESLint for the mistakes that formatting cannot see.

Minifying for production

Keep the readable source in your repository and minify only the files you ship. Build tools do this for you, and also rename variables and remove unused code:

npx terser app.js --compress --mangle -o app.min.js
npx esbuild app.js --minify --outfile=app.min.js

Publish a source map with the minified file so that errors in the browser can point back to your original code. To read a minified file that you do not have the source for, use the JavaScript beautifier or the pretty print view.

A short checklist

• Choose one indent and one quote style.
• Decide on semicolons and let a tool enforce the decision.
• Always use braces for blocks.
• Format on save, and check formatting in your pipeline.
• Minify only for delivery, and keep source maps.