Summary 📑

Soft tabs with two spaces
Never use semicolons
Always use single quotes
Keep else in the same line of closure of the if
Add spaces between operators
Avoid single letter names
Use lowerCamelCase
Use the === operator
Add spaces outside parentheses () but avoid it inside
Use function expressions instead of function declarations
Anonimous function
Ternary operator single line only
Don't be dumb with ternary operator
Use const for all of your references, avoid using var
If you must reassign references, use let instead of var
Declare one const or let per declaration statement
Use the literal syntax for object creation
Use the literal syntax for array creation
Declare array items in list
Function arguments indentation
Method chaining
Any non-trivial conditions must be assigned to a variable or function with a descriptive name
Try to write comments that explain higher level mechanisms or clarify difficult segments of your code
Don't use comments to trivial things
References

Soft tabs with two spaces

Eslint: indent

Wrong:

if (true) {
    console.log('True')
}

Correct:

if (true) {
  console.log('True')
}

Never use semicolons

Eslint: semi

Wrong:

if (true) {
  console.log('True');
}

Correct:

if (true) {
  console.log('True')
}

Always use single quotes

Eslint: quotes

Wrong:

if (true) {
  console.log("True")
}

Correct:

if (true) {
  console.log('True')
}

Keep `else` in the same line of closure of the `if`

Eslint: brace-style

Wrong:

if (true) {
  console.log('True')
}
else {
  console.log('False')
}

Correct:

if (true) {
  console.log('True')
} else {
  console.log('False')
}

Add spaces between operators

Eslint: space-infix-ops

Wrong:

for (i=0;i<10;i++) {
  ...
}

Correct:

for (i = 0; i < 10; i++) {
  ...
}

Avoid single letter names

Be descriptive with your naming. Eslint: id-length

Wrong:

function q() {
  ...
}

Correct:

function query() {
  ...
}

Use lowerCamelCase

Eslint: camelcase

Wrong:

let is_error

Correct:

let isError

Use the === operator

Eslint: eqeqeq

Wrong:

const example = 'Is a example'

if (example == 15) {
  ...
}

Correct:

const example = 'Is a example'

if (example === 15) {
  ...
}

Add spaces outside parentheses `()` but avoid it inside

Eslint: keyword-spacing

Wrong:

if(condition){
  ...
}

Correct:

if (condition) {
  ...
}

Use function expressions instead of function declarations

Eslint: func-style

Wrong:

function foo() {
}

Correct:

const foo = function () { }

When you must use function expressions (as when passing an anonymous function), use `arrow function` notation

Eslint: prefer-arrow-callback

Wrong:

[1, 2, 3].map(function (x) {
  const y = x + 1
  return x * y
})

Correct:

[1, 2, 3].map((x) => {
  const y = x + 1
  return x * y
})

Ternary operator single line only

The ternary operator should be used on a single line.

Wrong:

const foo = (condition)
  ? 1
  : 2

Correct:

const foo = (condition) ? 1 : 2

Don't be dumb with ternary operator

Disallow ternary operators when simpler alternatives exist. Eslint: no-unneeded-ternary

Wrong:

const isYes = answer === 1 ? true : false;

Correct:

const isYes = answer === 1;

Use `const` for all of your references, avoid using `var`

Eslint: prefer-const

Wrong:

var foo = 'bar'

Correct:

const foo = 'bar'

If you must reassign references, use `let` instead of `var`

Eslint: no-var

Wrong:

var count = 1

if (condition) {
  count += 1
}

Correct:

let count = 'bar'

if (condition) {
  count += 1
}

Declare one `const` or `let` per declaration statement

Eslint: one-var

Wrong:

const foo = require('./bar'),
      foo = require('./foo')

Correct:

const foo = require('./bar')
const foo = require('./foo')

Use the literal syntax for `object` creation

Eslint: no-new-object

Wrong:

const foo = new Object()

Correct:

const foo = {}

Use the literal syntax for `array` creation

Eslint: no-array-constructuor

Wrong:

const foo = new Array()

Correct:

const foo = []

Declare `array` items in list

>= 4 arguments: indent. Eslint: array-element-newline and array-bracket-newline

Wrong:

const foo = [
  'hello', 'world'
]

const foo = ['hello', 'world', 'lore', 'impsum']

Correct:

const foo = ['hello', 'world']

const foo = [
  'hello',
  'word',
  'lore', 
  'impsum'
]

Function arguments indentation

>= 4 arguments: indent (excerpt callbacks brackets). Eslint: function-paren-newline

Wrong:

const foo = (
  'lore', 
  'impsum'
) => {}

const foo = ('carls', 'farls', 'karen', 'logan') => {}

foo.bar(
  'string',
  () => {
    statements
  }
)

Correct:

const foo = ('lore', 'impsum') => {}

const foo = (
  'carls', 
  'farls', 
  'karen',
  'logan'
) => {}

foo.bar('string', () => {
  statements
})

Method chaining

Eslint: newline-per-chained-call

Wrong:

user
.findOne({ name: 'foo' })
.populate('bar')
.exec(function(err, user) {
  return true
})

user.findOne({ name: 'foo' })
  .populate('bar')
  .exec(function(err, user) {
    return true
  })

Correct:

user
  .findOne({ name: 'foo' })
  .populate('bar')
  .exec(function(err, user) {
    return true
  })

Any non-trivial conditions must be assigned to a variable or function with a descriptive name

Wrong:

if (password.length >= 4 && /^(?=.*\d).{4,}$/.test(password)) {
  ...
}

Correct:

const isValidPassword = password.length >= 4 && /^(?=.*\d).{4,}$/.test(password)

if (isValidPassword) {
  ...
}

Try to write comments that explain higher level mechanisms or clarify difficult segments of your code

Wrong:

const foo = "var(--bar)"

// Regexp
if (foo.replace(/var\(/, "").replace(/\)/, "") === "--bar") {
  ...
}

Correct:

let foo = 'var(--bar)'

let value = foo
            .replace(/var\(/, '') // Remove the 'var('
            .replace(/\)/, '') // Remove the ')'

if (foo === '--bar') {
  ...
}

Don't use comments to trivial things

Wrong:


// Create the passwors
const password = 'carls1234'

Correct:

const password = 'carls1234'

References

Project inspired by valle-style-guide

💅🏻If you're beautiful, follow this JS Code Style