Node 프로그래밍 시 유의사항 ver.15 주석 (Comments) & 공백 (Whitespace)

// 출처 https://github.com/ParkSB/javascript-style-guide#%EB%AA%A9%EC%B0%A8

// 주석 (Comments) & 공백 (Whitespace)

// 1 여러 줄에 걸친 주석을 쓸 때는 /** ... */을 사용하세요.

// 2 한줄 주석을 쓸 때는 //을 사용하세요. 주석 전에는 빈 행을 넣어주세요.

// 3 모든 주석은 공백으로 시작해야 합니다. eslint: spaced-comment

// 4 문제를 지적하고 재고를 촉구하는 경우나 문제의 해결책을 제안하는 경우 등에는

주석 앞에 FIXME 나 TODO 를 붙임으로써 다른 개발자의 빠른 이해를 도울수 있습니다.

이런 것들은 어떤 행동을 따른다는 의미로 통상의 주석와는 다릅니다. 행동이라는 것은

FIXME -- 해결이 필요 또는 TODO -- 구현이 필요 를 뜻합니다.

// 5 문제에 대한 주석으로 // FIXME:를 사용하세요.

class Calculator extends Abacus {

constructor() {

super();

// FIXME: 전역 변수를 사용해서는 안 됨

total = 0;

}

}

// 6 문제의 해결책에 대한 주석으로 // TODO:를 사용하세요.

class Calculator extends Abacus {

constructor() {

super();

// TODO: total은 옵션 파라메터로 설정해야함

this.total = 0;

}

}

// 7 탭은 공백문자 2개로 설정하세요. eslint: indent

// bad

function foo() {

∙∙∙∙let name;

}

// bad

function bar() {

∙let name;

}

// good

function baz() {

∙∙let name;

}

// 8 주요 중괄호 앞에는 공백을 1개 넣으세요. eslint: space-before-blocks

// 9 제어문 (if, while 등)의 소괄호 앞에는 공백을 1개 넣으세요.

함수선언이나 함수호출시 인자 리스트 앞에는 공백을 넣지 마세요. eslint: keyword-spacing

// 10 연산자 사이에 공백을 넣으세요. eslint: space-infix-ops

// 11 파일 끝에는 개행문자를 1개 넣으세요. 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;↵

// 12 길게 메소드를 체이닝하는 경우 (2개 메소드 이상) 들여쓰기를 하세요.

또한 해당 줄이 새로운 구문이 아니라 메소드 호출임을 강조하는 마침표를 맨 앞에 두세요.

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

// 13 구문의 앞과 블록의 뒤에는 빈 행을 두세요.

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

// 14 블록에 빈 행을 끼워 넣지 마세요. eslint: padded-blocks

// 15 소괄호 안쪽에 공백을 두지 마세요. eslint: space-in-parens

// 16 대괄호 안쪽에 공백을 두지 마세요. eslint: array-bracket-spacing

// 17 중괄호 안쪽에 공백을 두세요. eslint: object-curly-spacing

// 18 한줄의 코드가 100자를 넘기는 것을 피하세요. (공백 포함)

주의: 앞의 규칙에 따르면, 긴 문자열은 이 규칙에서 제외되며, 분리되어서는 안 됩니다.

eslint: max-len

// 19 여는 블록 토큰과 같은 행의 다음 토큰 내의 공백을 일관성있게 하세요.

이 규칙은 닫는 블록 토큰과 같은 행의 이전 토큰에도 적용됩니다. eslint: block-spacing

// bad

function foo() {return true;}

if (foo) { bar = 0;}

// good

function foo() { return true; }

if (foo) { bar = 0; }

// 20 쉼표 이전에는 공백을 넣지 말고, 쉼표 이후에는 공백을 넣으세요. eslint: comma-spacing

// 21 계산된 속성 내에는 공백을 넣으세요. 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]]

// 22 함수와 함수 호출 사이에는 공백을 넣으세요. eslint: func-call-spacing

// bad

func ();

func

();

// good

func();

// 23 객체 리터럴 속성의 키와 값 사이에는 공백을 넣으세요. eslint: key-spacing

// bad

var obj = { "foo" : 42 };

var obj2 = { "foo":42 };

// good

var obj = { "foo": 42 };

// 24 해의 마지막에 공백을 남겨두지 마세요. eslint: no-trailing-spaces

// 25 여러 빈 행을 쓰지 마세요. 단, 파일의 마지막 행에는 빈 행을 두세요.

eslint: no-multiple-empty-lines