Whitespace

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

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

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

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

  • 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. }
    5. // good
    6. if (isJedi) {
    7. fight();
    8. }
    9. // bad
    10. function fight () {
    11. console.log ('Swooosh!');
    12. }
    13. // good
    14. function fight() {
    15. console.log('Swooosh!');
    16. }

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

    1. // bad
    2. const x=y+5;
    3. // good
    4. 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;↵
    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();
    3. // bad
    4. $('#items').
    5. find('.selected').
    6. highlight().
    7. end().
    8. find('.open').
    9. updateCount();
    10. // good
    11. $('#items')
    12. .find('.selected')
    13. .highlight()
    14. .end()
    15. .find('.open')
    16. .updateCount();
    17. // bad
    18. const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
    19. .attr('width', (radius + margin) * 2).append('svg:g')
    20. .attr('transform', `translate(${radius + margin},${radius + margin})`)
    21. .call(tron.led);
    22. // good
    23. const leds = stage.selectAll('.led')
    24. .data(data)
    25. .enter().append('svg:svg')
    26. .classed('led', true)
    27. .attr('width', (radius + margin) * 2)
    28. .append('svg:g')
    29. .attr('transform', `translate(${radius + margin},${radius + margin})`)
    30. .call(tron.led);
    31. // good
    32. 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;
    6. // good
    7. if (foo) {
    8. return bar;
    9. }
    10. return baz;
    11. // bad
    12. const obj = {
    13. foo() {
    14. },
    15. bar() {
    16. },
    17. };
    18. return obj;
    19. // good
    20. const obj = {
    21. foo() {
    22. },
    23. bar() {
    24. },
    25. };
    26. return obj;
    27. // bad
    28. const arr = [
    29. function foo() {
    30. },
    31. function bar() {
    32. },
    33. ];
    34. return arr;
    35. // good
    36. const arr = [
    37. function foo() {
    38. },
    39. function bar() {
    40. },
    41. ];
    42. return arr;

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

    1. // bad
    2. function bar() {
    3. console.log(foo);
    4. }
    5. // bad
    6. if (baz) {
    7. console.log(qux);
    8. } else {
    9. console.log(foo);
    10. }
    11. // bad
    12. class Foo {
    13. constructor(bar) {
    14. this.bar = bar;
    15. }
    16. }
    17. // good
    18. function bar() {
    19. console.log(foo);
    20. }
    21. // good
    22. if (baz) {
    23. console.log(qux);
    24. } else {
    25. console.log(foo);
    26. }

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

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

  • 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 ]);
    4. // good
    5. const foo = [1, 2, 3];
    6. console.log(foo[0]);

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

    1. // bad
    2. const foo = {clark: 'kent'};
    3. // good
    4. 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;
    3. // bad
    4. $.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));
    5. // good
    6. const foo = jsonData
    7. && jsonData.foo
    8. && jsonData.foo.bar
    9. && jsonData.foo.bar.baz
    10. && jsonData.foo.bar.baz.quux
    11. && jsonData.foo.bar.baz.quux.xyzzy;
    12. // good
    13. $.ajax({
    14. method: 'POST',
    15. url: 'https://airbnb.com/',
    16. data: { name: 'John' },
    17. })
    18. .done(() => console.log('Congratulations!'))
    19. .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;}
    4. // good
    5. function foo() { return true; }
    6. 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];
    4. // good
    5. var foo = 1, bar = 2;
    6. 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 ]]
    6. // good
    7. obj[foo]
    8. obj['foo']
    9. var x = { [b]: a }
    10. obj[foo[bar]]

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

    1. // bad
    2. func ();
    3. func
    4. ();
    5. // good
    6. 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 };
    4. // good
    5. 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;
  2. // good
  3. var x = 1;
  4. var y = 2;
  5. ```
  6. <!-- markdownlint-enable MD012 -->