6.3 KiB
Unsplash JavaScript Style Guide
How we like to JavasScript at Unsplash.
Table of Contents
Airbnb JavaScript Style Guide
Our guide is based off the excellent Airbnb JavaScript Style Guide, with a few exceptions and additional guidelines.
Exceptions
Objects
-
Do not use trailing commas. comma-dangle
It breaks your code in IE8.
// bad const user = { firstName: 'Han', lastName: 'Solo', }; // good const user = { firstName: 'Han', lastName: 'Solo' };
Strings
-
Limit your lines to 80 characters. max-len
Helps with readability and code reviews.
// bad const user = { name: 'Han Solo', 'best-friend': 'Chewie', ship: 'Millennium Falcon', affiliation: 'Rebel Alliance' }; // good const user = { name: 'Han Solo', 'best-friend': 'Chewie', ship: 'Millennium Falcon', affiliation: 'Rebel Alliance' };
Variables
-
Do not reference global variables. no-undef
Less globals, less headaches
// bad $(window).on("scroll", doSomething); // good import $ form "jquery"; $(wdinow).on("scroll", doSomething);
Comparison Operators & Equality
-
Variables should always come before literal values in conditions. yoda
More natural way to describe the comparison.
// bad if ('Han' === firstName) { // ... } // good if (firstName === 'Han') { // ... }
Whitespace
-
Avoid leaving multiple empty lines between statements. no-multiple-empty-lines
Consistent spacing across files
// bad function someFunction() { // ... } someFunction(); // good function someFunction() { // ... } someFunction();
JSX
-
Always use double-quotes in jsx. jsx-quotes
It's like html and clearly distinguishes HTML strings from JavaScript strings.
// bad render(firstName) { return ( <div id='i-am'> {`I'm ${firstName}!`} </div> ); } // good render(firstName) { return ( <div id='i-am'> {`I'm ${firstName}!`} </div> ); }
Additional Guidelines
Objects
-
Avoid Object mutations with Object.assign().
// bad const user = { 'name': 'Han Solo' }; user['best-friend'] = 'Chewie'; const user { 'name': 'Han Solo' }; const userWithBestie = Object.assign({}, user, { 'best-friend': 'Chewie' });
Functions
-
Only write 'Pure' functions
They are predictable, testable and don't mutate the values passed to them.
Learn more about Pure and Impure Functions.// bad function square(x) { someSideEffect(x); return x * x; } // good function square(x) { return x * x; }
-
Always a strict mode directive at the beginning of a script/file. strict
// bad function someFunction() { // ... }
'use strict'; function someFunction() { // ... }
Arrays
-
Use Array#concat or spread to add items to an Array.
Array#push is a mutator method.
Learn more about avoiding Array mutations// bad const range = [1]; range.push(2); // good const range = [1]; const biggerRange = [].concat(range, [2]); // good es2015 const range = [1]; const biggerRange = [...range, 2];
Blocks
-
Always use braces and multiple lines for block statements
// bad if (isValid) return console.log('Is valid'); // good if (isValid) { return console.log('Is valid'); }
Comments
-
Use
//
for single and multi-line commentsLess thinking, more typing.
// bad /* This is a multiline comment. */ function someFunction() { // ... } // good // This is a multiline // comment. function someFunction() { // ... }
Naming Conventions
-
Always use camelCase when naming variables
// bad const first_name = 'Han Solo'; // good const firstName = 'Han Solo';
-
Suffix Observable variables names with
$
.const input = document.getElementById('input'); // bad const keyup = Rx.Observable.fromEvent(input, 'keyup'); // good const keyup$ = Rx.Observable.fromEvent(input, 'keyup');
-
Prefix boolean state variable names with
is
orhas
.const photos = [1, 2]; // bad const photos = !!photos.length; // good const hasPhotos = !!photos.length; // bad const visible = !!photos.length; // good const isVisible = !!photos.length;