Our guide is based off the excellent [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript), with a few exceptions and additional guidelines.
## Exceptions
#### Objects
- Do not use trailing commas. [comma-dangle](http://eslint.org/docs/rules/comma-dangle)
> It breaks your code in IE8.
```js
// bad
const user = {
firstName: 'Han',
lastName: 'Solo',
};
// good
const user = {
firstName: 'Han',
lastName: 'Solo'
};
```
#### Strings
- Limit your lines to 80 characters. [max-len](http://eslint.org/docs/rules/max-len)
- Do not reference global variables. [no-undef](http://eslint.org/docs/rules/no-undef)
> Less globals, less headaches
```js
// 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](http://eslint.org/docs/rules/yoda)
> More natural way to describe the comparison.
```js
// bad
if ('Han' === firstName) {
// ...
}
// good
if (firstName === 'Han') {
// ...
}
```
#### Whitespace
- Avoid leaving multiple empty lines between statements. [no-multiple-empty-lines](http://eslint.org/docs/rules/no-multiple-empty-lines)
> Consistent spacing across files
```js
// bad
function someFunction() {
// ...
}
someFunction();
// good
function someFunction() {
// ...
}
someFunction();
```
#### JSX
- Always use double-quotes in jsx. [jsx-quotes](http://eslint.org/docs/rules/jsx-quotes)
> It's like html and clearly distinguishes HTML strings from JavaScript strings.
```js
// bad
render(firstName) {
return (
<divid='i-am'>
{`I'm ${firstName}!`}
</div>
);
}
// good
render(firstName) {
return (
<divid='i-am'>
{`I'm ${firstName}!`}
</div>
);
}
```
## Additional Guidelines
#### Objects
- Avoid Object mutations with Object.assign().
```js
// 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. <br>
> Learn more about [Pure and Impure Functions](https://egghead.io/lessons/javascript-redux-pure-and-impure-functions).
```js
// 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](http://eslint.org/docs/rules/strict)
```js
// bad
function someFunction() {
// ...
}
```
```js
'use strict';
function someFunction() {
// ...
}
```
#### Arrays
- Use Array#concat or spread to add items to an Array.
> Array#push is a [mutator method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype#Mutator_methods). <br>
> Learn more about [avoiding Array mutations](https://egghead.io/lessons/javascript-redux-avoiding-array-mutations-with-concat-slice-and-spread)
```js
// 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
