JavaScript - Style Guide

10 Jun 2017

space after function name in function declaration
underscore for private properties
semicolon
single quotes
parentheses around parameters of arrow functions
checking for null, undefined or empty string

UPDATE (2019-07-22)

now I use Prettier with the following config:

// https://prettier.io/docs/en/options.html

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: true,
  trailingComma: 'all',
  bracketSpacing: false,
  jsxBracketSameLine: false,
  arrowParens: 'avoid',
  requirePragma: false,
  insertPragma: true,
  proseWrap: 'always',
};

ESLint config is modified accordingly so as not to conflict with Prettier.

space after function name in function declaration

https://github.com/standard/standard/issues/217

imho it’s a very controversial rule but I’ll try to stick it for the time being.

underscore for private properties

semicolon

use semicolons:

after all single statements (variable/constant declarations, imports/exports, etc.)

don’t use semicolons:

after class and function declarations
after block statements (blocks) (commonly used with control flow statements - if...else, for, etc.)
1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/block

adapted example from https://facebook.github.io/react/tutorial/tutorial.html:

import React from 'react';

class Board extends React.Component {
  render() {
    const winner = calculateWinner(this.state.squares);
    let status;
    if (winner) {
      status = 'Winner: ' + winner;
    } else {
      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      <div>
        <div className='status'>{status}</div>
        <div className='board-row'>
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
      </div>
    );
  }
}

single quotes

prefer single quotes over double ones.

parentheses around parameters of arrow functions

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

I use arrow-parens ESLint rule:

# .eslintrc.yml

arrow-parens:
  - error
  - as-needed
  - requireForBlockBody: true

=> parameter is not wrapped only if it’s single and if function body is an instructions block (surrounded by braces).

() => 1
v => v + 1
(v, i) => v + 1

checking for null, undefined or empty string

check that variable has a truthy value instead of checking for null, undefined or empty string explicitly but only when that variable can be an empty string:

// variable must be declared before making checks
const foo = '';

// good (using `!!foo` to get boolean value is usually redundant)
if (foo) {
  console.log(foo);
} // nothing printed
// bad (more verbose)
if (foo != null && foo.length !== 0) {
  console.log(foo);
} // nothing printed

if variable can’t be an empty string, prefer checking for null and undefined explicitly:

const foo = {a: 1};

// good
if (foo != null) {
  console.log('foo');
}
// worse (assumes that foo can be empty string which can be misleading)
if (foo) {
  console.log('foo');
}

tap349