# 空格

19.1 tab用4个空格. eslint: indent (opens new window)

// good
function foo() {
∙∙∙∙const name;
}

19.2 在大括号前空一格。 eslint: space-before-blocks (opens new window)

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

19.3 在控制语句(if, while 等)的圆括号前空一格。在函数调用和定义时，参数列表和函数名之间不空格。 eslint: keyword-spacing (opens new window)

// bad
if(isJedi) {
  fight ();
}

// good
if (isJedi) {
  fight();
}

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

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

19.4 用空格来隔开运算符。 eslint: space-infix-ops (opens new window)
```
// bad
const x=y+5;

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

19.6 当出现长的方法链（>2个）时用缩进。用点开头强调该行是一个方法调用，而不是一个新的语句。eslint: newline-per-chained-call (opens new window) no-whitespace-before-property (opens new window)

// 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();

// bad
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
    .attr('width', (radius + margin) * 2).append('svg:g')
    .attr('transform', `translate(${radius + margin},${radius + margin})`)
    .call(tron.led);

// good
const leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .classed('led', true)
    .attr('width', (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', `translate(${radius + margin},${radius + margin})`)
    .call(tron.led);

// good
const leds = stage.selectAll('.led').data(data);

19.7 在一个代码块后下一条语句前空一行。

// bad
if (foo) {
  return bar;
}
return baz;

// good
if (foo) {
  return bar;
}

return baz;

// bad
const obj = {
  foo() {
  },
  bar() {
  },
};
return obj;

// good
const obj = {
  foo() {
  },

  bar() {
  },
};

return obj;

// bad
const arr = [
  function foo() {
  },
  function bar() {
  },
];
return arr;

// good
const arr = [
  function foo() {
  },

  function bar() {
  },
];

return arr;

19.8 不要用空白行填充块。 eslint: padded-blocks (opens new window)

// bad
function bar() {

  console.log(foo);

}

// also bad
if (baz) {

  console.log(qux);
} else {
  console.log(foo);

}

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

// good
if (baz) {
  console.log(qux);
} else {
  console.log(foo);
}

19.9 圆括号里不要加空格。 eslint: space-in-parens (opens new window)

// bad
function bar( foo ) {
  return foo;
}

// good
function bar(foo) {
  return foo;
}

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

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

19.10 方括号里不要加空格。看示例。 eslint: array-bracket-spacing (opens new window)

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

// good， 逗号分隔符还是要空格的
const foo = [1, 2, 3];
console.log(foo[0]);

19.12 避免一行代码超过120个字符（包含空格）。

注意：对于上面——strings--line-length，长字符串不受此规则限制，不应分解。 eslint: max-len (opens new window)

Why? 这样确保可读性和可维护性

// bad
const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;

// bad
$.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));

// good
const foo = jsonData
  && jsonData.foo
  && jsonData.foo.bar
  && jsonData.foo.bar.baz
  && jsonData.foo.bar.baz.quux
  && jsonData.foo.bar.baz.quux.xyzzy;

// good
$.ajax({
  method: 'POST',
  url: 'https://airbnb.com/',
  data: { name: 'John' },
})
  .done(() => console.log('Congratulations!'))
  .fail(() => console.log('You have failed this city.'));

19.14 , 前不要空格， , 后需要空格。 eslint: comma-spacing (opens new window)

// bad
var foo = 1,bar = 2;
var arr = [1 , 2];

// good
let foo = 1, bar = 2;
let arr = [1, 2];

19.16 调用函数时，函数名和小括号之间不要空格。 eslint: func-call-spacing (opens new window)
```
// bad
func ();

func
();

// good
func();
```
19.18 行末不要空格。 eslint: no-trailing-spaces (opens new window)
19.19 避免出现多个空行。在文件末尾只允许空一行。 eslint: no-multiple-empty-lines (opens new window)
```
// bad
let x = 1;



let y = 2;

// good
let x = 1;

let y = 2;
```

19.20 单行的 import 语句要放在多行的 import 语句之前。

// bad
import {
  a,
  b,
} from 'foo'
import bar from 'bar'

// good
import bar from 'bar'
import {
  a,
  b,
} from 'foo'

回到顶部

← 注释逗号 →