ESLint & Prettier

ESLint와 Prettier

• javasscript나 typescript의 코드 품질을 높이고 일관된 형식을 유지하는데 자주 사용하는 도구
• ESLint를 통해 잠재적인 문제를 빠르게 확인할 수 있고, Prettier를 통해선 코드 서식에 신경쓰지 않고 코드 작성에만 집중 가능
• 프로젝트를 생성할 때마다 ESLint/Prettier의 설정 작업을 해줘야한다.
  • 컨피그 파일을 만들고, 플러그인을 설치하고, 추천 규칙을 적용하는 작업이 반복되며, 다른 저장소의 설정을 그대로 가져와 복붙해 사용하기도 한다.
• ESLint에서 일관된 텍스트 작성을 도와주는 기능을 가지고 있다.
  • 그래서 prettier와 ESLint를 같이 사용하게 되면 두 설정이 모두 적용되어 충돌이 발생한다.
  • 이러한 문제를 해결하기 위해 ESLint 내부에서 Prettier를 이용할 수 있도록 설정을 변경해야한다.
    • 추가적인 플러그인 설치를 진행한다.
      • eslint-config-prettier: elint와 중복되는 규칙을, prettier 쪽에서 알아서 꺼주는 역할
      • eslint-plugin-prettier: prettier에 걸린 부분들을 eslint error로 걸리도록 하는 역할
    • 이후에, .eslintrc 파일을 아래와 같이 수정해야한다.
      • 이는 내가 설정한 .prettierrc을 기반으로 eslint에서 해당 형식에 어긋나면 에러 처리를 해주겠다는 의미

        {
          ...
          "extends": ["plugin:prettier/recommended"] 
          ... 
        }

 

ESLint

• ESLint를 사용하여 프로젝트에서 코드를 작성하는 방식을 일관성 있는 방식으로 구현할 수 있도록 도와준다.
• eg, 함수를 정의할 때 function 키워드를 사용할 지, arrow를 사용할 지, 아니면 타입을 무조건 지정해줘야하는 지, 코드의 탭 길이는 어떻게 할지, 한 줄당 최대 길이는 얼마인지 등에 대한 일관성이 있는 코드를 작성하도록 도와준다.
• 사용법
  • ESLint는 프로젝트 코드 단에서 사용하는게 아니라, VSCode, WebStorm 과 같은 Editor(IDE)에서 적용해서 사용하는 것이다.
  • 프로젝트 내 개발환경에서 ESLint 의존성을 추가한다.
    • yarn add -D eslint
  • 다음으로 Editor에서도 사용할 수 있도록 ESLint Extension을 설치한다.
  • 마지막으로 '프로젝트 루트 경로에' '.eslintrc.js(& .eslintrc.json, .eslintrc 모두 가능)' 파일 내 설정을 작성하여 규칙을 명시한다.
• create-next-app으로 프로젝트를 셋팅하는 경우, ESLint는 자동적으로 설치가 진행되며, 설정 파일의 내용은 아래와 같다.
  • 확장으로 next/core-web-vitals가 추가 된 것을 볼 수 있는데 이는 엄격한 Core Web Vitals rule-set과 ESLint의 NextJS의 기본 설정이 포함되어 있어 ESLint를 처음 설정하는 개발자에게 추천되는 옵션이라고 NextJS 공식문서에서 설명하고 있다.

    {
      "extends": "next/"core-web-vitals
    }

 

Prettier

• Prettier는 설치하는 방법이 두가지이다.
  • 플러그인 없이 Extension 설치
    • 플러그인 없이 Extension을 설치하게 되면 내 환경의 VSCode 에디터 자체에 prettier rule을 셋팅하게 된다.
    • 이 경우, VSCode Extension에서 적용된 prettier 설정을 사용해서 프로젝트에 적용된다.
  • 플러그인 설치
    • yarn add -D prettier 로 설치
    • 프로젝트 내 .prettier 파일을 작성할 수 있다.
  • ※※ 주의사항 ※※
    • Extension을 설치하고, 플러그인도 설정해서 프로젝트 루트에 '.prettierrc.json' 파일이 있는 경우, VSCode Prettier Extension이 프로젝트 내에 있는 .prettierrc.json에 내용을 (익스텐션의 기본값 보다) 우선순위로 하여 코드를 포맷팅한다.

cf) 참고

아티클

• https://velog.io/@imkkuk/Prettier-ESLint-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
• https://medium.com/@kuwon15/nextjs-13-prettier-eslint-recoil-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85-%ED%95%98%EA%B8%B0-abc07bdbeb7f

ESLint / Prettier 컨피그 공유

• 배민 코어 웹 FE 개발팀에서는 eslint, prettier 공유 컨피그를 만들어 사용하였다고 한다.
  • 우리 팀에서도 추후 짬이 나고, 해당 부분에 대한 우선순위가 오르게 된다면 도입하면 좋을 것 같다.
  • https://techblog.woowahan.com/15903/