Whitespace Back

  • Although it's recommended to set soft-warp as 2 spaces, I am still familiar with 4 spaces.
  • Eslint rules tags: indent
  • My recommendation is to listen to your habits when setting soft-tab.

1. One space

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

/**
 * good
 */
function test() {
    console.log('test');
}
  • Place 1 space before the opening parenthesis in control statements (if, while etc.). Place no space before the argument list in function calls and declarations.
  • Eslint rules tags: space-after-keywords, space-before-keywords
/**
 * bad
 */
if(isAleen) {
    console.log('Yo.');
}

/**
 * good
 */
if (isAleen) {
    console.log('Yo.');
}

/**
 * bad
 */
console.log ('Not good.');

/**
 * good
 */
console.log('Good.');
  • Set off binary operators with one space, but not unary ones.
  • Eslint rules tags: space-infix-ops
/**
 * bad
 */
const x=y+5;

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

/**
 * bad
 */
const x = y ++;

/**
 * good
 */
const x = y++;

2. End files

  • To end files with a single newline character.
/**
 * bad
 */
(function (global) {
    /**
     * ...
     */
})(this);
/**
 * bad
 */
(function (global) {
    /**
     * ...
     */
})(this);↵
↵
/**
 * good
 */
(function (global) {
    /**
     * ...
     */
})(this);↵

3. Chain Calling

  • Use indentation(縮進) when making long method chains. And to use a leading dot, which emphasizes that the line is a method call, not a new statement.
/**
 * bad
 */
$('#items').find('.selected').highlight().end().find('.open').updateCount();

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

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

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

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

/**
 * good
 */
if (foo) {
    /**
     * ...
     */
}

console.log('test');

5. Do not pad blocks with blank lines

/**
 * bad
 */
if (foo) {

    console.log('test');
}

/**
 * bad
 */
if (foo) {
    console.log('test');

}

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

6. Do not add space inside brackets(方括號) and parentheses(圓括號), but add space inside braces(花括號).

/**
 * bad
 */
function bar( foo ) {
    /**
     * ...
     */
}

/**
 * good
 */
function bar(foo) {
    /**
     * ..
     */
}

/**
 * bad
 */
const items = [ 1, 2, 3 ];

/**
 * good
 */
const items = [1, 2, 3];

/**
 * bad
 */
const obj = {name: 'Aleen'};

/**
 * good
 */
const obj = { name: 'Aleen' };