DEPRECATED

This repository is now deprecated and it will be available until 01.06.2021.

OLX's Coding Styles

Quick Start

Add ESLint script to run it in package.json and check the devDependencies:

  yarn add olx-global/olx-eslint-config

This is how you package.json should look like:

{
  "scripts": {
    "lint": "eslint ."
  },
  "devDependencies": {
    "eslint-config-olx": "olx-global/olx-eslint-config#v2.0.0",
  }
}

Add .eslintrc file and extend from this package

{
  "extends": "olx"
}

If you only want es6 and react configs

{
  "extends": [ "olx", "olx/es6", "olx/react", "olx/mocha", "olx/jest" ]
}

Rules

Whitespace

• (#whitespace--spaces) Use soft tabs (space character) set to 2 spaces. eslint: indent jscs: validateIndentation

  // bad
  function foo() {
  ∙∙∙∙let name;
  }
  
  // bad
  function bar() {
  ∙let name;
  }
  
  // good
  function baz() {
  ∙∙let name;
  }

• (#whitespace--before-blocks) 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',
  });

• (#whitespace--around-keywords) Place 1 space before the opening parenthesis in control statements (if, while etc.). Place no space between the argument list and the function name in function calls and declarations. eslint: keyword-spacing

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

• (#whitespace--infix-ops) Set off operators with spaces. eslint: space-infix-ops

  // bad
  const x=y+5;
  
  // good
  const x = y + 5;

• (#whitespace--in-parens) Do not add spaces inside parentheses. eslint: space-in-parens

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

• (#whitespace--in-brackets) Add spaces inside brackets. eslint: array-bracket-spacing

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

• (#whitespace--in-braces) Add spaces inside curly braces. eslint: object-curly-spacing

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

• (#whitespace--max-len) Avoid having lines of code that are longer than 120 characters (including whitespace). Note: per above, long strings are exempt from this rule, and should not be broken up. eslint: max-len jscs: maximumLineLength

Commas

• (#commas--leading-trailing) Leading commas: Nope. eslint: comma-style

  // bad
  const story = [
      once
    , upon
    , aTime
  ];
  
  // good
  const story = [
    once,
    upon,
    aTime,
  ];
  
  // bad
  const hero = {
      firstName: 'Ada'
    , lastName: 'Lovelace'
    , birthYear: 1815
    , superPower: 'computers'
  };
  
  // good
  const hero = {
    firstName: 'Ada',
    lastName: 'Lovelace',
    birthYear: 1815,
    superPower: 'computers',
  };

• (#commas--dangling) Additional trailing comma: Yup. eslint: comma-dangle

  Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don’t have to worry about the trailing comma problem in legacy browsers.

  // bad - git diff without trailing comma
  const hero = {
       firstName: 'Florence',
  -    lastName: 'Nightingale'
  +    lastName: 'Nightingale',
  +    inventorOf: ['coxcomb chart', 'modern nursing']
  };
  
  // good - git diff with trailing comma
  const hero = {
       firstName: 'Florence',
       lastName: 'Nightingale',
  +    inventorOf: ['coxcomb chart', 'modern nursing'],
  };

  // bad
  const hero = {
    firstName: 'Dana',
    lastName: 'Scully'
  };
  
  const heroes = [
    'Batman',
    'Superman'
  ];
  
  // good
  const hero = {
    firstName: 'Dana',
    lastName: 'Scully',
  };
  
  const heroes = [
    'Batman',
    'Superman',
  ];
  
  // bad
  function createHero(
    firstName,
    lastName,
    inventorOf
  ) {
    // does nothing
  }
  
  // good
  function createHero(
    firstName,
    lastName,
    inventorOf,
  ) {
    // does nothing
  }
  
  // good (note that a comma must not appear after a "rest" element)
  function createHero(
    firstName,
    lastName,
    inventorOf,
    ...heroArgs
  ) {
    // does nothing
  }
  
  // bad
  createHero(
    firstName,
    lastName,
    inventorOf
  );
  
  // good
  createHero(
    firstName,
    lastName,
    inventorOf,
  );
  
  // good (note that a comma must not appear after a "rest" element)
  createHero(
    firstName,
    lastName,
    inventorOf,
    ...heroArgs
  );

Semicolons

• Yup. eslint: semi

Why? When JavaScript encounters a line break without a semicolon, it uses a set of rules called Automatic Semicolon Insertion to determine whether or not it should regard that line break as the end of a statement, and (as the name implies) place a semicolon into your code before the line break if it thinks so. ASI contains a few eccentric behaviors, though, and your code will break if JavaScript misinterprets your line break. These rules will become more complicated as new features become a part of JavaScript. Explicitly terminating your statements and configuring your linter to catch missing semicolons will help prevent you from encountering issues.

// bad - raises exception
const luke = {}
const leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')

// bad - raises exception
const reaction = "No! That's impossible!"
(async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}())

// bad - returns `undefined` instead of the value on the next line - always happens when `return` is on a line by itself because of ASI!
function foo() {
  return
    'search your feelings, you know it to be foo'
}

// good
const luke = {};
const leia = {};
[luke, leia].forEach((jedi) => {
  jedi.father = 'vader';
});

// good
const reaction = "No! That's impossible!";
(async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}());

// good
function foo() {
  return 'search your feelings, you know it to be foo';
}