[ESLint/Prettier] 코드 린터와 포맷터 설치하기

연관 내용
[husky 설치 방법]

코드 린터

• 문법에 대한 규칙을 정해준다. (import 순서, == 금지 등)
• 에러가 나는 부분은 아니지만 코드 스타일을 통일시키기 위한 것이다.
• 포맷터 기능도 일부 가지고 있다.

코드 포맷터

• 예쁘게 보여주기 위한 것이다. (띄어쓰기는 2칸, ~~길이 넘으면 줄바꿈)

ESLint에 포맷터의 기능을 일부 가지고 있지만, 포맷터는 prettier를 사용할 것이다.

ESLint 설치하기

[ESLint 사이트]

1. 설치할 디렉토리의 터미널에서 설치 명령어를 입력한다.

yarn add eslint --dev

2. eslint를 시작하는 명령어를 입력한다.

npx eslint --init

3. How would you like to use ESLint? 의 질문에 답변한다.

설치 완료! 👇🏻

4. VSC 확장팩에서 ESLint를 설치한다.

5. 무시할 규칙 설정

eslintrc.js 파일의 rules에 "react/react-in-jsx-scope": "off"추가

  rules: {
    "react/react-in-jsx-scope": "off",
  },

5번 설정을 추가하지 않으면 React를 import하지 않아서 아래 사진과 같은 에러가 뜬다.
Next.js에서는 react가 내장되어 있어 따로 import 해줄 필요가 없으므로 설정 파일에서 off로 바꾼다.

6. 무시할 파일 설정

graphQL-codegen에서 받아오는 types 파일처럼 체크가 필요 없는 파일은 .eslintignore 파일을 만들어서 넣어주면 된다.

파일 위치: 프로젝트 폴더/.eslintignore

무시할 파일의 경로만 넣어주면 된다.

ESLint 체크하는 명령어npx eslint .

Prettier 설치하기

[Prettier 사이트]

1. 설치 명령어 입력

yarn add --dev --exact prettier

2. 설정 파일 생성

echo {}> .prettierrc.json

참고 : prettierrc.josn 이라는 설정 파일을 만들어 달라는 리눅스 명령어이다.

echo : 화면에 출력해줘
{} > 파일명: 객체의 내용을 파일명 파일에 저장해줘. 파일이 없으면 새로 만들어준다.

3. VSC 확장팩에서 Prettier 설치

4. ESLint와 함께 쓰기 위한 추가 설치

yarn add eslint-config-prettier --dev

[설명 링크]

5. eslintrc 파일의 extends에 prettier 추가

'prettier'
이렇게 추가하면 예쁘게 보여주는 건 prettier의 규칙을 따르게 된다.

6. 자동 정렬 설정 추가

모두에게 적용되게 하기 위해서 설정하고 있는 프로젝트 상위에서 새 폴더 .vscode를 생성하고,
settings.json 파일을 만든다.
VSC의 설정을 이 파일에서 하는 것이다.
각자의 설정이 다르더라도, settings.json에 있는 설정을 따르게 된다. (여러명이 협업하기에 good)

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

6번을 설정하면 저장할 때마다 formatter가 작동된다.