[ESLint disable] 검열을 거두어주십쇼

회사 프로젝트에 //eslint-disable 로 시작하는 코멘트가 자주보인다. 특히 useEffect dependency에 거의 매번 쓰이는데 이 코멘트를 지우고 프로젝트를 돌려봐도 별 문제가 없다. 그런데도 매번 동료의 코드리뷰에 올라와있는게 의아해 이게 꼭 필요하냐고 물어보면 아니라면서 지운다. 내가 입사하기 전에 쓰였던 규칙 같은거 였나본데 코드를 그대로 긁어쓰는 경우에 이걸 미처 못지운 것 같다. 반면 사수는 지금도 새로쓰는 코드에 종종 이 코멘트를 더한다. 올 한 해 동안 시도때도 없이 마주친 eslint-disable이 무엇을 의미하는지 진작 알아봤어야 했는데 너무 귀찮았던 나머지(+크리티컬하지 않아서) 대충 감으로 때려맞추고 지나갔다(이러면 안됌 진짜 안됌). 그래놓고 왜 이제와서 포스팅하고 있느냐? 회사가 크리스마스와 신년 사이에 일하라고 해서 열받은 직장인이 책상엔 앉되 딴짓을 하기로 마음먹었기 때문이다. 나름 생산적인 딴짓을 하기 위해 일년동안 사수가 공유하고 내가 필요해서 검색해 놓았지만 차마 귀찮아서 못읽어본 탭들을 하나씩 공부해보려 한다.

 

그 중 첫번째 탭에 있던 주제가 ESLint disable 이다. 생각보다 쉽고 한 페이지만 읽으면 끝나는 내용 이어서 이걸 왜 일 년 동안 미뤘나 어이가 없을 정도로 별거 없다. ESLint는 패턴에 어긋나거나 오류가 나게끔 짜여있는 코드를 잡아내는 JavaScript 경찰같은 애다. 실로 고마운 친구가 아닐 수 없다. 그치만 일을 하다보면 때때로 얘가 오바떨어서 진행을 못시키는 경우가 있다. 예를들면 정의된 변수가 코드에 한번도 사용되지 않았다거나 타입스크립트 버전이 최신버전이 아니어서 허용하지 않는 타입 같은 것들이다. 그럴 때 ESLint 햄에게 검열을 중지하라는 코멘트를 달 수 있는데 그게 eslint-disable-어쩌구 이다('어쩌구'에 룰 이름이 들어갈 수 있음).

 

ESLint disable을 쓸 수 있는 방법은 크게 두가지가 있다. 처번째로 일차원적으로 쓰는 방법이 있는데 얘는 적용 시키고자 하는 코드 바로 윗 라인에 그 다음 라인에만 적용시키거나 또는 코드블럭 위에써서 코드블럭 전체에, 아니면 파일 맨 꼭데기에 써서 파일 전체에 ESLint 룰을 막을 수 있다. 우리회사 단골 코멘트(//eslint-disable-next-line no-unused-vars)를 예시로 보면 ESLint가 사용되지 않은 변수를 잡아내는걸 알 수 있는데 이 때 //eslint-disable-next-line no-unused-vars 라는 코멘트를 쓰면 다음라인에 있는 사용되지 않은 변수 잡지말고 가만 냅두라는 명령어라고 볼 수 있다. 

 

const res = eval('42'); // eslint-disable-line no-eval

얘는 약간 다른 경우인데 옆에다 써도 알아듣는다. 여기선 next-line이라는 키워드가 빠진걸 볼 수 있다. 

 

function usesEval() {
  /* eslint-disable no-eval */
  const res = eval('42');
  const res2 = eval('test');

  return res2 + res;
}

eslint야, 블록 전체에 eval을 허용하거라. 

 

더 큰 범위로 ESLint를 조종하려면 .eslintignore 이라는 파일에 무시할 파일이름을 더해주는 방법이 있다. .gitignore과 같은 원리라 보면 된다. eslint 를 적용시키지 않고 프리패스 할 수 있는 파일들의 vip 명부 같은걸로 보면 된다. 더불어 /*를 쓰면 폴더안에 있는 파일들을 깡그리 무시할 수도 있다.

 

*.test.js

.eslintignore파일 안에이렇게 쓰면 글로벌하게 쓸 수 있어 test.js가 들어간 파일들은 다 무시할 수 있고

 

data/*

조금 극단적인 예시지만 요렇게 쓰면 data 폴더 아래 있는 애들은 깡그리 eslint 룰을 무시하게 할 수 있다. 

 

eslint가 뭔지 모르고 읽으면 //eslint-disable-next-line no-unused-vars 같은 라인은 상당히 불쾌하게 읽힐 수 있다(내가 그랬음). 읽을 수 있는게 disable-next-line 뿐이라 대충 때려맞추면 다음줄 실행시키지 마라 뭐 이런뜻인가? 하고 넘어갈 수도 있다(는 나. 여러분 제가 이렇게 개떡같이 코딩을 합니다). 앞에 예시에서 볼 수 있듯이 사용되지 않은 variable 을 ESLint햄은 용납하지 않기 때문에 코멘트아웃을 안해주면 내 코드에 빨간지렁이가 기어다니는걸 볼 수 있다. 와이러는지 찾다가 퇴근 못할 수도 있다. 그러니 나처럼 이거뭐야 꼭 써야해? 같은 무식+도발적인 질문을 동료에게 하지말고 ESLint disable 코멘트가 자바스크립트 경찰관님께 이번 한 번 만 넘어가자며 짓는 능글맞은 양반의 미소같은 것이란 걸 잊지말자.