지난 글(코드 리뷰 기계화)에서 eslint와 js-codemod로 코딩스타일 검사를 한다고 했다. 여기서는 이전 글의 부록쯤으로 실제로 어떤 규칙들을 사용하고 있는지를 소개한다.
eslint
eslint는 기본적으로 ‘javascript standard style’를 사용한다. 거기에 아래의 규칙들을 추가했다.
console.log() 쓰지말자는 규칙. 로그 레벨 지정도 안 되고, 시간도 모르는 방식이라 로그 라이브러리를 쓰는 게 좋다.
jsdoc을 꼭 쓰라는 규칙. 프로젝트에서 jsdoc으로 문서화를 하고 있으니 (1, 2년 뒤에도) 지속적으로 써질 수 있도록 추가. 함수, 클래스, 메소드 별로 검사를 할 수 있는데 모든 함수나 메소드에 주석을 강제하는 건 의미 없는 주석 입력으로 변질될 수 있으니 클래스만 jsdoc 입력을 필수로 하는 게 좋을 거 같음.
callback 호출 할 때 return 붙이는지 확인.
function foo(err, callback) {
if (err) {
callback(err); // 'return'이 빠졌고, err가 있을 때 callback()이 두 번 불림!
}
callback();
}
이전 프로젝트에서 이걸로 callback 두 번 불리는 문제가 얼마나 많았는지! 현재 프로젝트의 async/await 스타일에서는 발생할 여지가 적지만 기존 코드 복사와 이전 스타일로 코딩하면서 발생할 수 있기 때문에 안전하게 쓰기로 결정.
var keyword 대신 let이나 const를 쓰자는 규칙.
가능하면 다시 assign 되지 않는 변수는 let keyword 대신 const 쓰자는 규칙.
‘arguments’ keyword 대신 rest parameters 쓰자는 규칙. hack스럽게 쓰는 arguments 대신 조금 더 명시적으로 사용.
function foo() {
console.log(arguments); // arguments는 어디서 나온 변수야?
}
function foo(...args) {
console.log(args); // foo()호출할 때 받은 parameter 다 출력
}
함수에 무조건 이름을 지정하는 규칙. 귀찮은데 netflix 라이브 디버깅 ppt보면 디버깅할 때 유용하다고 함.
http://www.slideshare.net/yunongx/debugging-node-in-prod 60페이지 참조
max-depth, max-nested-callbacks
if, callback으로 들여쓰기 하는 걸 제한하자는 규칙.
async/await로 이런 문제는 줄겠지만 5로 제한을 걸었음.
파일에 라인수를 일정 범위 넘지 않도록 제한하자는 규칙. 이전 프로젝트에서는 2000라인 넘어가는 것들도 있는데 편집기로 여는 것도 약간의 딜레이가 발생한다. 주석 제외 1000 라인으로 제한을 걸었음.
js-codemod
invalid-requires, rm-requires
안 쓰거나 잘못된 require문 삭제.
unchain-variables
var foo, bar, spam;을 아래처럼 변경.
var foo;
var bar;
var spam;
no-vars
var대신 const/let으로 변경.
unquote-properties
object 키에서 따옴표 안 하는 규칙.
object-shorthand
eslint rule에도 있지만 자동으로 바뀌지는 걸 보고 개발자가 참고해서 바꾸는 게 좋을듯.
function createMonster(name, power) {
return { type: 'Monster', name: name, power: power };
}
// 위 코드를 아래처럼 줄일 수 있다
function createMonster(name, power) {
return { type: 'Monster', name, power };
}
https://ariya.io/2013/02/es6-and-object-literal-property-value-shorthand 참고
arrow-function
createMonster('wer', 'were', function(err, result) {
console.log(result);
});
// 위 코드를 아래처럼 바뀜
createMonster('wer', 'were', (err, result) => {
console.log(result);
});
(업데이트) object-shorthand는 규칙에서 삭제했다. 샘플이 아닌 실제 코드에서는 축약이 되는 프로퍼티와 안 되는 프로퍼티가 같이 쓰이다보니 오히려 코드 가독성이 떨어졌다. 새로 도입된 문법이라고 다 좋은 건 아니다.