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

• Place 1 space before the leading brace.
• Eslint rules tags: space-before-blocks

/**
 * 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

• Eslint rules tags: padded-blocks

/**
 * 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(花括號).

• Eslint rules tags: space-in-parens, array-bracket-spacing

/**
 * 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' };