Whitespace

  • 19.1 Use soft tabs (space character) set to 2 spaces. eslint: indent

    1. // bad
    2. function foo() {
    3. ∙∙∙∙let name;
    4. }
    6. // bad
    7. function bar() {
    8. ∙let name;
    9. }
    11. // good
    12. function baz() {
    13. ∙∙let name;
    14. }

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

    1. // bad
    2. function test(){
    3.   console.log('test');
    4. }
    6. // good
    7. function test() {
    8.   console.log('test');
    9. }
    11. // bad
    12. dog.set('attr',{
    13.   age: '1 year',
    14.   breed: 'Bernese Mountain Dog',
    15. });
    17. // good
    18. dog.set('attr', {
    19.   age: '1 year',
    20.   breed: 'Bernese Mountain Dog',
    21. });

  • 19.3 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

    1. // bad
    2. if(isJedi) {
    3.   fight ();
    4. }
    6. // good
    7. if (isJedi) {
    8.   fight();
    9. }
    11. // bad
    12. function fight () {
    13.   console.log ('Swooosh!');
    14. }
    16. // good
    17. function fight() {
    18.   console.log('Swooosh!');
    19. }

  • 19.4 Set off operators with spaces. eslint: space-infix-ops

    1. // bad
    2. const x=y+5;
    4. // good
    5. const x = y + 5;

  • 19.5 End files with a single newline character. eslint: eol-last

    1. // bad
    2. import { es6 } from './AirbnbStyleGuide';
    3.   // ...
    4. export default es6;
    1. // bad
    2. import { es6 } from './AirbnbStyleGuide';
    3.   // ...
    4. export default es6;↵
    5. ↵
    1. // good
    2. import { es6 } from './AirbnbStyleGuide';
    3.   // ...
    4. export default es6;↵

  • 19.6 Use indentation when making long method chains (more than 2 method chains). Use a leading dot, which
    emphasizes that the line is a method call, not a new statement. eslint: newline-per-chained-call no-whitespace-before-property

    1. // bad
    2. $('#items').find('.selected').highlight().end().find('.open').updateCount();
    4. // bad
    5. $('#items').
    6.   find('.selected').
    7.     highlight().
    8.     end().
    9.   find('.open').
    10.     updateCount();
    12. // good
    13. $('#items')
    14.   .find('.selected')
    15.     .highlight()
    16.     .end()
    17.   .find('.open')
    18.     .updateCount();
    20. // bad
    21. const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
    22.     .attr('width', (radius + margin) * 2).append('svg:g')
    23.     .attr('transform', `translate(${radius + margin},${radius + margin})`)
    24.     .call(tron.led);
    26. // good
    27. const leds = stage.selectAll('.led')
    28.     .data(data)
    29.   .enter().append('svg:svg')
    30.     .classed('led', true)
    31.     .attr('width', (radius + margin) * 2)
    32.   .append('svg:g')
    33.     .attr('transform', `translate(${radius + margin},${radius + margin})`)
    34.     .call(tron.led);
    36. // good
    37. const leds = stage.selectAll('.led').data(data);

  • 19.7 Leave a blank line after blocks and before the next statement.

    1. // bad
    2. if (foo) {
    3.   return bar;
    4. }
    5. return baz;
    7. // good
    8. if (foo) {
    9.   return bar;
    10. }
    12. return baz;
    14. // bad
    15. const obj = {
    16.   foo() {
    17.   },
    18.   bar() {
    19.   },
    20. };
    21. return obj;
    23. // good
    24. const obj = {
    25.   foo() {
    26.   },
    28.   bar() {
    29.   },
    30. };
    32. return obj;
    34. // bad
    35. const arr = [
    36.   function foo() {
    37.   },
    38.   function bar() {
    39.   },
    40. ];
    41. return arr;
    43. // good
    44. const arr = [
    45.   function foo() {
    46.   },
    48.   function bar() {
    49.   },
    50. ];
    52. return arr;

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

    1. // bad
    2. function bar() {
    4.   console.log(foo);
    6. }
    8. // bad
    9. if (baz) {
    11.   console.log(qux);
    12. } else {
    13.   console.log(foo);
    15. }
    17. // bad
    18. class Foo {
    20.   constructor(bar) {
    21.     this.bar = bar;
    22.   }
    23. }
    25. // good
    26. function bar() {
    27.   console.log(foo);
    28. }
    30. // good
    31. if (baz) {
    32.   console.log(qux);
    33. } else {
    34.   console.log(foo);
    35. }

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

    1. // bad
    2. function bar( foo ) {
    3.   return foo;
    4. }
    6. // good
    7. function bar(foo) {
    8.   return foo;
    9. }
    11. // bad
    12. if ( foo ) {
    13.   console.log(foo);
    14. }
    16. // good
    17. if (foo) {
    18.   console.log(foo);
    19. }

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

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

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

    1. // bad
    2. const foo = {clark: 'kent'};
    4. // good
    5. const foo = { clark: 'kent' };

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

    Why? This ensures readability and maintainability.

    1. // bad
    2. const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;
    4. // bad
    5. $.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));
    7. // good
    8. const foo = jsonData
    9.   && jsonData.foo
    10.   && jsonData.foo.bar
    11.   && jsonData.foo.bar.baz
    12.   && jsonData.foo.bar.baz.quux
    13.   && jsonData.foo.bar.baz.quux.xyzzy;
    15. // good
    16. $.ajax({
    17.   method: 'POST',
    18.   url: 'https://airbnb.com/',
    19.   data: { name: 'John' },
    20. })
    21.   .done(() => console.log('Congratulations!'))
    22.   .fail(() => console.log('You have failed this city.'));

  • 19.13 Require consistent spacing inside an open block token and the next token on the same line. This rule also enforces consistent spacing inside a close block token and previous token on the same line. eslint: block-spacing

    1. // bad
    2. function foo() {return true;}
    3. if (foo) { bar = 0;}
    5. // good
    6. function foo() { return true; }
    7. if (foo) { bar = 0; }

  • 19.14 Avoid spaces before commas and require a space after commas. eslint: comma-spacing

    1. // bad
    2. var foo = 1,bar = 2;
    3. var arr = [1 , 2];
    5. // good
    6. var foo = 1, bar = 2;
    7. var arr = [1, 2];

  • 19.15 Enforce spacing inside of computed properties. eslint: computed-property-spacing

    1. // bad
    2. obj[foo ]
    3. obj[ 'foo']
    4. var x = {[ b ]: a}
    5. obj[foo[ bar ]]
    7. // good
    8. obj[foo]
    9. obj['foo']
    10. var x = { [b]: a }
    11. obj[foo[bar]]

  • 19.16 Enforce spacing between functions and their invocations. eslint: func-call-spacing

    1. // bad
    2. func ();
    4. func
    5. ();
    7. // good
    8. func();

  • 19.17 Enforce spacing between keys and values in object literal properties. eslint: key-spacing

    1. // bad
    2. var obj = { "foo" : 42 };
    3. var obj2 = { "foo":42 };
    5. // good
    6. var obj = { "foo": 42 };

  • 19.18 Avoid trailing spaces at the end of lines. eslint: no-trailing-spaces

  • 19.19 Avoid multiple empty lines and only allow one newline at the end of files. eslint: no-multiple-empty-lines

    ```javascript
    // bad
    var x = 1;

  1. var y = 2;
  3. // good
  4. var x = 1;
  6. var y = 2;
  7. ```
  8. <!-- markdownlint-enable MD012 -->