Serials Javascript Style Guide – Whitespace

  Javascript    —  2019, May 28    

Whitespace

Spaces

Sử dụng tab mềm (kí tự khoảng trắng) với 2 khoảng trắng. eslint: indent

// bad
function foo() {
∙∙∙∙let name;
}

// bad
function bar() {
∙let name;
}

// good
function baz() {
∙∙let name;
}

Before blocks

Thêm 1 khoảng trắng trước khi bắt đầu dấu ngoặc. eslint: space-before-blocks

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

Around keywords

Thêm 1 khoảng trắng trước dấu ngoặc đơn mở trong các lệnh điều khiển (if, while etc.). Không thêm khoảng trắng vào giữa danh sách các tham số và tên hàm khi gọi hàm và trong khai báo hàm. eslint: keyword-spacing

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

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

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

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

Infix ops

Sử dụng toán tử có khoảng trắng. eslint: space-infix-ops

// bad
const x=y+5;

// good
const x = y + 5;

Newline at end

Kết thúc file với 1 ký tự newline. eslint: eol-last

// bad
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;

// bad
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;↵
↵

// good
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;↵

Chains

Sử dụng thụt lề khi chuỗi các phương thức dài (nhiều hơn 2 chuỗi phương thức). Sử dụng dấu chấm . để bắt đầu nhấn mạnh dòng có gọi các phương thức, chứ không phải là lệnh mới. eslint: newline-per-chained-call no-whitespace-before-property

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

After blocks

Để 1 dòng trống sau khối vè trước 1 lệnh kế tiếp.

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

Padded blocks

Không nhồi thêm dòng trắng vào khối. eslint: padded-blocks

// bad
function bar() {

  console.log(foo);

}

// bad
if (baz) {

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

}

// bad
class Foo {

  constructor(bar) {
    this.bar = bar;
  }
}

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

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

No multiple blanks

Không nhồi nhiều dòng trắng vào giữa các code. eslint: no-multiple-empty-lines

// bad
class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;


    this.email = email;


    this.setAge(birthday);
  }


  setAge(birthday) {
    const today = new Date();


    const age = this.getAge(today, birthday);


    this.age = age;
  }


  getAge(today, birthday) {
    // ..
  }
}

// good
class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;
    this.email = email;
    this.setAge(birthday);
  }

  setAge(birthday) {
    const today = new Date();
    const age = getAge(today, birthday);
    this.age = age;
  }

  getAge(today, birthday) {
    // ..
  }
}

In parens

Không thêm khoảng trắng bên trong dấu ngoặc đơn. eslint: space-in-parens

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

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

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

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

In brackets

Không thêm khoảng trắng bên trong dấu ngoặc vuông. eslint: array-bracket-spacing

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

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

In braces

Thêm khoảng trắng vào trong dấu ngoặc nhọn. eslint: object-curly-spacing

// bad
const foo = {clark: 'kent'};

// good
const foo = { clark: 'kent' };

Max len

Dòng code không quá 100 ký tự (kể cả ký tự trắng). Chú ý: đối với chuỗi dài, chuỗi dài thì sẽ không áp dụng với rule này, và không được xuống dòng. eslint: max-len

Tại sao ư? Nó dễ đọc và dễ maintain.

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

Block spacing

Nếu như cùng 1 line thì khuyến khích thêm khoảng trắng khi đóng và mở dấu ngoặc nhọn. eslint: block-spacing

// bad
function foo() {return true;}
if (foo) { bar = 0;}

// good
function foo() { return true; }
if (foo) { bar = 0; }

Comma spacing

Không thêm khoảng trắng trước dấu phẩy, bắt buộc thêm vào sau dấu phẩy. eslint: comma-spacing

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

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

Computed property spacing

Bắt buộc có khoảng trắng vào các thuộc tính tính toán trong dấu ngoặc. eslint: computed-property-spacing

// bad
obj[foo ]
obj[ 'foo']
var x = {[ b ]: a}
obj[foo[ bar ]]

// good
obj[foo]
obj['foo']
var x = { [b]: a }
obj[foo[bar]]

Func call spacing

Không thêm khoảng trắng vào giữa hàm và gọi hàm. eslint: func-call-spacing

// bad
func ();

func
();

// good
func();

Key spacing

Bắt buộc có khoảng trắng giữa key và value trong các thuộc tính của 1 đối tượng literal. eslint: key-spacing

// bad
var obj = { "foo" : 42 };
var obj2 = { "foo":42 };

// good
var obj = { "foo": 42 };

No trailing spaces

Bỏ khoảng trắng ở cuối dòng. eslint: no-trailing-spaces

No multiple empty lines

Tránh nhiều dòng trắng và chỉ cho phép 1 dòng mới ở cuối file. eslint: no-multiple-empty-lines

// bad
var x = 1;



var y = 2;

// good
var x = 1;

var y = 2;
Twitter Facebook Google+
# js # js style # js whitespace