eslint, js-codemod 규칙들

지난 글(코드 리뷰 기계화)에서 eslint와 js-codemod로 코딩스타일 검사를 한다고 했다. 여기서는 이전 글의 부록쯤으로 실제로 어떤 규칙들을 사용하고 있는지를 소개한다.

eslint

eslint는 기본적으로 ‘javascript standard style’를 사용한다. 거기에 아래의 규칙들을 추가했다.

no-console

console.log() 쓰지말자는 규칙. 로그 레벨 지정도 안 되고, 시간도 모르는 방식이라 로그 라이브러리를 쓰는 게 좋다.

require-jsdoc

jsdoc을 꼭 쓰라는 규칙. 프로젝트에서 jsdoc으로 문서화를 하고 있으니 (1, 2년 뒤에도) 지속적으로 써질 수 있도록 추가. 함수, 클래스, 메소드 별로 검사를 할 수 있는데 모든 함수나 메소드에 주석을 강제하는 건 의미 없는 주석 입력으로 변질될 수 있으니 클래스만 jsdoc 입력을 필수로 하는 게 좋을 거 같음.

callback-return

callback 호출 할 때 return 붙이는지 확인.

function foo(err, callback) {
    if (err) {
        callback(err); // 'return'이 빠졌고, err가 있을 때 callback()이 두 번 불림!
    }
    callback();
}

이전 프로젝트에서 이걸로 callback 두 번 불리는 문제가 얼마나 많았는지! 현재 프로젝트의 async/await 스타일에서는 발생할 여지가 적지만 기존 코드 복사와 이전 스타일로 코딩하면서 발생할 수 있기 때문에 안전하게 쓰기로 결정.

no-var

var keyword 대신 let이나 const를 쓰자는 규칙.

prefer-const

가능하면 다시 assign 되지 않는 변수는 let keyword 대신 const 쓰자는 규칙.

prefer-rest-params

‘arguments’ keyword 대신 rest parameters 쓰자는 규칙. hack스럽게 쓰는 arguments 대신 조금 더 명시적으로 사용.

function foo() {
    console.log(arguments); // arguments는 어디서 나온 변수야?
}
function foo(...args) {
    console.log(args); // foo()호출할 때 받은 parameter 다 출력
}

func-names

함수에 무조건 이름을 지정하는 규칙. 귀찮은데 netflix 라이브 디버깅 ppt보면 디버깅할 때 유용하다고 함.

http://www.slideshare.net/yunongx/debugging-node-in-prod 60페이지 참조

max-depth, max-nested-callbacks

if, callback으로 들여쓰기 하는 걸 제한하자는 규칙.

예) 이전 프로젝트에서 if + callback으로 범벅된 함수의 끝 모습. 위를 안 보고 이것만 봐도 정신이 아득해진다.

async/await로 이런 문제는 줄겠지만 5로 제한을 걸었음.

max-lines

파일에 라인수를 일정 범위 넘지 않도록 제한하자는 규칙. 이전 프로젝트에서는 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는 규칙에서 삭제했다. 샘플이 아닌 실제 코드에서는 축약이 되는 프로퍼티와 안 되는 프로퍼티가 같이 쓰이다보니 오히려 코드 가독성이 떨어졌다. 새로 도입된 문법이라고 다 좋은 건 아니다.