[18] Prettier와 ESLint

테스팅할 때 matcher를 알맞게 쓰는지 확신이 들지 않을 때가 있으며, 코드의 형식이나 자바스크립트 문법 등을 올바르게 사용하지 못할 때가 있습니다. 그러한 부분을 도와주는 모듈을 알아보겠습니다.

Prettier

• 코드 구현과는 관련 없는, 일관된 텍스트 작성을 도와주는 도구
• Prettier를 사용하면, 프로젝트 내에서 일관된 텍스트 형식을 가질 수 있습니다.
• 탭의 줄 간격이나, 줄바꿈 정도 등 텍스트 작성에 대한 많은 부분을 사용자가 원하는 대로 설정 가능
• 주로 코드 형식을 맞추는데 사용
• 작은 따옴표(')을 사용할지 큰 따옴표(")를 사용할지, Indent 값을 2로 줄지 4로 줄지 등등, 에러 찾는 것이 아닌 코드 포맷터 역할

 

Prettier 설치 방법 2가지

1. 플러그인 없이 Extention 설치

혼자서 편하게 설치해서 사용하기 좋음

 

2. 플러그인 설치

npm 으로 설치할 수도 있으며, 여러 개발자와 같은 포맷 유지에 더 좋음

 

---

ESLint

• ESLint는 코드 퀄리티를 보장하도록 도와주는 도구입니다.
• 프로젝트에서 코드를 작성하는 방식을 일관성이 있는 방식으로 구현할 수 있도록 도와줍니다.
• 개발자들이 특정한 규칙을 가지고 코드를 깔끔하게 짤 수 있게 도와주는 라이브러리
• 자바스크립트를 쓰는 가이드라인 제시
• 문법에 오류가 나면 알려주는 역할
• 포맷터(formatter) 역할도 하지만, 주요 기능은 문법 오류 잡는 것

 

ESLint 익스텐션 설치

이미 Create React App으로 리액트를 설치할 때 기본 eslint가 설정되어 있습니다.
하지만 이 상태로는 VS Code에서 바로 에러 확인할 수 없고, 앱을 시작했을 때 터미널 상에서 볼 수 있습니다.

eslint 설정 파일 생성, package.json에 eslintConfig 부분 지우고, .eslintrc.json 파일 생성
이렇게 하면 PROBELMS 탭에서 ESLint에서 주는 기본적인 경고들을 확인할 수 있다.

 

ESLint Testing Plugins 설치

Plugins란?

eslint에서 기본으로 제공하지 않는 다양한 규칙을 플러그인을 통해 사용할 수 있다.
예를 들어, react에 관련된 린트설정을 위해서는 eslint-plugin-react를 사용하면 되며, react hooks에 관련된 규칙을 적용시켜주려면 eslint-plugin-react-hooks를 사용하면 된다.