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
- https://standardjs.com/
- http://javascript.crockford.com/code.html
- https://github.com/standard/standard
- https://github.com/Flet/semistandard
- https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html
- https://github.com/ericelliott/class-free-javascript-style
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
imho it’s a very controversial rule but I’ll try to stick it for the time being.
underscore for private properties
- https://github.com/airbnb/javascript/issues/1024#issuecomment-242588541
- https://github.com/ericelliott/class-free-javascript-style#22.4
semicolon
- https://github.com/Flet/semistandard
- https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html#semicolons
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.)
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
- https://standardjs.com/
- https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html#quotes
prefer single quotes over double ones.
parentheses around parameters of 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');
}