Naoufal Kadhom
41ea3c84ac
|
9 years ago | |
---|---|---|
linters | 9 years ago | |
packages/eslint-config-unsplash | 9 years ago | |
README.md | 9 years ago |
README.md
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;