[환경설정] ESLint 설정 시 Prettier, Typescript, Airbnb 등등 어떤걸 사용해야 할까 (ESLint 2탄)

Wendy·2022년 5월 22일

지난 포스팅에서 eslint, prettier 설정에 대해 싹싹 공부했기때문에 실전에 적용해야겠다! 생각했더니 추가로 고민되는 부분들이 많았다. 🤔 개인/소규모 프로젝트는 기본 추천설정이나 prettier 정도로 충분하지만, 대규모 프로젝트에서는 한 번의 결정으로 오랫동안 사용하게 되는 수가 있어서 다시 생각해보기로 했다.

prettier를 쓸까, eslint로 formatting 커버해볼까?
airbnb 셋팅이 좋다던데 쓸까? 다른걸 쓸까? 아니면 거기까지 필요가 없을까?
airbnb-typsecript는 뭐야??
ts eslint 적용시 /recommended 에 더해 /recommended-requiring-type-checking 까지 필요한가?
import 순서도 eslint로 자동정렬이 가능할까?

1. Formatting: Prettier vs ESLint

Formatting은 Prettier에게 일임할까

경험상 eslint로 prettier를 커버하다보면 이상동작을 하는 케이스가 있었고,
eslint rules에 예외를 하나씩 추가해주어야했다.

하지만 printWidth를 해제할 수 없다

최대 길이를 넘어가면 줄을 분할시키는것까진 좋은데,
최대 길이를 넘어가지 않을때는 코드 줄바꿈을 자유롭게 하고싶다.
하지만 prettier에서는 잘라놓은 줄을 강제로 한줄로 합쳐버리기도 한다.

// 나는 굳이 이렇게 쓰고싶을 때가 있다
<button
  type="button"
 >
  버튼
</button>

// 하지만 강제로 이렇게 된다
<button type="button">
  버튼
</button>

이 설정을 해제하고 싶었지만 방법을 찾지 못했다😡
이게 괜찮다면 prettier를 선택하면 좋을것같지만
나는 이부분에서 자유가 없는게 싫었다.

Prettier 대신 ESLint를 선택!!

1) 충돌때문에 rule을 계속 추가해야하지 않을까
아마도 이전에 충분히 공부하고 설정했던게 아니라 충돌이 있었을 가능성이 있고
이번엔 prettier를 일부만 사용할게 아니라 아에 설치도 하지 않는 방식으로 가보면 괜찮지 않을까?

2) prettier의 기능 다 커버 가능할까
prettier의 설정이 상상했던것보다 엄청나게 다양하지는 않았고,
그중에서도 내가 사용하는건 더 적었다.
(대표 설정은 10개 정도?)
대체해서 적용하기 위해 아래의 내용들을 알아보았다.

eslint rule에 있는지
/recommended 내 포함인지
airbnb 내 포함인지

// 대표 몇개만
  trailingComma: 'es5', //comma-dangle, 추천미포함, airbnb 포함
  tabWidth: 2,	// indent, 추천미포함, airbnb 포함
  semi: true,	// semi, 추천미포함, airbnb 포함
  singleQuote: true,	// quotes, 추천미포함, airbnb 포함

결론적으로 모두 커버 가능하고,
eslint의 기본 ruleset에는 포함되지 않지만(하나씩 추가해서 쓰면 됨)
airbnb를 사용한다면 모두 규칙이 포함되어있을것이다.

2. eslint-config-airbnb

이게 좋다는데 뭐야? 다른 후보들은 없어?

다른 후보들도 있다.
보통은 Airbnb/Google/Standard를 대표로 치는 것 같은데 이유는 있겠지?

세개를 비교한 글들을 찾아보면
각 세트마다 들어있는 규칙이 다르기 때문에 자기가 원하는 규칙이 많은쪽을 쓰면 되고,
react관련 룰셋이 들어있는게 airbnb 쪽이라서
react 프로젝트라면 airbnb를 추천하는것 같다.

airbnb 룰셋은 쓰는게 좋을까?

이번에 공부하면서 발견한건
airbnb 룰셋의 정식명칭은 Airbnb JavaScript Style Guide 라는 것인데
(공식명칭까지는 아닐 수 있지만 깃헙페이지 상단에는 쓰여있음)
이게 기본적으로는 스타일 가이드라는 것이다!
그리고 eslint:recommended의 규칙들도 일부(전체?) 포함하고있다

위에서 prettier의 설정을 분석한 내용에서 볼 수 있듯이
airbnb 룰셋을 사용한다면 formatting 용도의 규칙이 모두 들어있기 때문에
formatting을 위한 prettier/eslint(rule) 설정을 별도로 할 필요가 없을것이고 🥳
예외로 바꾸고 싶은부분이 있는 경우만 별도 설정을 넣는게 좋을 것 같다.

airbnb 룰셋이 다 지키기 까다롭다는 말이 있던데
나는 그렇게까지 까다롭다고 느끼지는 않았고,
많은 사람들이 작업하는 프로젝트에서 통일되는 모양의 코드를 만들어줘서 좋았다.

스타일을 확실히 통일시키고 싶다면 사용하는게 좋겠고
prettier를 쓰고싶거나, 예외를 많이 넣어야 할 것 같다면(스타일 규칙을 내맘대로 설정하고 싶다면) 필요 없을 것 같다.

eslint-config-airbnb-XXX

eslint-config-airbnb-base : 바닐라js
eslint-config-airbnb : 바닐라js + react (훅은 'airbnb/hooks'추가 필요)
eslint-config-airbnb-typescript : 바닐라js + react + ts 이기는 한데
airbnb의 룰을 끄고 @typescript룰로 바꿔주는 역할을 하는것 같고, ReadMe 에는 ts관련 extends를 다 넣으라고 쓰여있어서 아직 확실한 필요를 느끼지는 못했다.

3. eslint-plugin-typescript

/recommended외에 다른 옵션들이 있다

/eslint-recommended : ts컴파일러에서 이미 에러로 체크되는 eslint:recommended룰을 disabled 처리해줌 (아래 3개중 아무거라도 쓴다면 자동 포함되므로 따로 넣을필요 없음)
/recommended : 기본적으로 추천
/recommended-requiring-type-checking : Type Information이 요구되면서 추가 설정도 필요하고 분석에 약간의 시간이 더 들수 있지만 그래도 추천
/strict : 강력 체크하고싶을 경우 추천

recommended-requiring-type-checking은 (아마도) 분석을 위해 타입 정보가 필요하고, 그래서 linting 전에 빌드를 한번 하는것 같다. 큰 규모의 플젝은 30초까지도 추가 시간이 걸릴 수 있지만 IDE를 사용한다면 캐싱되므로 개발작업시에는 참을만할테니 이걸 가능한 넣어보세요! 하는 것 같은데... 게다가 react-hook-form 사용시 promise 관련해서 에러가 계속 났던것 같은데... 일단은 넣어보고 생각하기로 했다!

4. eslint-plugin-import

import 를 sorting 하는것도 수작업으로 하면 일이 될 수 있는데
공통 규칙으로 만들어 자동으로 맞춰주면 좋을 것 같아 설정하게되었다.
IDE의 확장프로그램으로도 가능하지만 멤버들이 자신의 IDE에 별도 설정이 필요하므로
한번의 설정으로 모두 쓸수있는 eslint로 적용해보았다.
(extends해서 쓰지는 않고, order관련 내용만 rules에 추가해서 사용)

결론

개인, 가벼운 프로젝트에는 아래설정 + .prettierrc 로 포멧팅 규칙

extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',	
  ],

대규모, 신중한 프로젝트에는 아래와 같이 설정

extends: [
  'airbnb',
  'airbnb/hooks',
  'plugin:@typescript-eslint/recommended',
  'plugin:@typescript-eslint/recommended-requiring-type-checking',
  'plugin:@next/next/recommended', // nextjs 사용시에만
]