Whitespace

Soft tabs

• Use soft tabs set to 2 spaces. tslint: indent

Why? Many tools uses 2 spaces nowadays (npm, jspm, gulp etc). Many of them will automatically update the config files. We want to keep them in 2 spaces to avoid unnecessary changes.

// bad
function foo() {
∙∙∙∙const name;
}

// bad
function bar() {
∙const name;
}

// good
function baz() {
∙∙const name;
}

Functions

• Place 1 space before the leading brace. eslint: space-before-blocks jscs: requireSpaceBeforeBlockStatements

// bad
function test(){
  console.log('test');
}

// good
function test() {
  console.log('test');
}

// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

• Place no space between the argument list and the function name in function calls and declarations. eslint: space-after-keywords, space-before-keywords jscs: requireSpaceAfterKeywords

// bad
function fight () {
  console.log ('Swooosh!');
}

// good
function fight() {
  console.log('Swooosh!');
}

Control statements

• Place 1 space before the opening parenthesis in control statements (if, while etc.).

// bad
if(isJedi) {
  fight ();
}

// good
if (isJedi) {
  fight();
}

Operators

• Set off operators with spaces. eslint: space-infix-ops jscs: requireSpaceBeforeBinaryOperators, requireSpaceAfterBinaryOperators

// bad
const x=y+5;

// good
const x = y + 5;

End of file

• End files with a single newline character.

// bad
(function (global) {
  // ...stuff...
})(this);

// bad
(function (global) {
  // ...stuff...
})(this);↵
↵

// good
(function (global) {
  // ...stuff...
})(this);↵

Indentation

• Do not indent when making long method chains.
• Use a leading dot, which emphasizes that the line is a method call, not a new statement.
• Place beginning of chain on a new line.

Why? IDE auto-formatting cannot analyze your intent nor ignore your indentation. Keep it simple for the tool.

// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// bad
$('#items').
  find('.selected').
    highlight().
    end().
  find('.open').
    updateCount();

// bad
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

// bad
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
    .attr('width', (radius + margin) * 2).append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

// good
const leds = stage.selectAll('.led')
  .data(data)
  .enter().append('svg:svg')
  .classed('led', true)
  .attr('width', (radius + margin) * 2)
  .append('svg:g')
  .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
  .call(tron.led);

// good
const leds = stage.selectAll('.led').data(data);

Blocks

• Leave a blank line after blocks and before the next statement. jscs: requirePaddingNewLinesAfterBlocks

// bad
if (foo) {
  return bar;
}
return baz;

// good
if (foo) {
  return bar;
}

return baz;

// bad
const obj = {
  foo() {
  },
  bar() {
  },
};
return obj;

// good
const obj = {
  foo() {
  },

  bar() {
  },
};

return obj;

// bad
const arr = [
  function foo() {
  },
  function bar() {
  },
];
return arr;

// good
const arr = [
  function foo() {
  },

  function bar() {
  },
];

return arr;

• Do not pad your blocks with blank lines. eslint: padded-blocks jscs: disallowPaddingNewlinesInBlocks

// bad
function bar() {

  console.log(foo);

}

// also bad
if (baz) {

  console.log(qux);
} else {
  console.log(foo);

}

// good
function bar() {
  console.log(foo);
}

// good
if (baz) {
  console.log(qux);
} else {
  console.log(foo);
}

parentheses

• Do not add spaces inside parentheses. eslint: space-in-parens jscs: disallowSpacesInsideParentheses

// bad
function bar( foo ) {
  return foo;
}

// good
function bar(foo) {
  return foo;
}

// bad
if ( foo ) {
  console.log(foo);
}

// good
if (foo) {
  console.log(foo);
}

Brackets

• Do not add spaces inside brackets. eslint: array-bracket-spacing jscs: disallowSpacesInsideArrayBrackets

// bad
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);

// good
const foo = [1, 2, 3];
console.log(foo[0]);

Braces

• Add spaces inside curly braces. eslint: object-curly-spacing jscs: disallowSpacesInsideObjectBrackets

// bad
const foo = {clark: 'kent'};

// good
const foo = { clark: 'kent' };