create-react-app으로 생성된 프로젝트에 eslint, prettier 설정하기

README.md

ESLint

널리 사용되는 JavaScript linter로, 코드의 품질 - 잠재적 버그, 코딩 스타일 상 문제 - 을 검사해주는 도구.

공식 사이트 링크

Prettier

널리 사용되는 code formatter. 즉, 코드를 보기 좋고 일관적인 형태로 변환해주는 도구.

공식 사이트 링크

프로젝트에 설치하기

참고글 링크

1. eslint, prettier, eslint-plugin-prettier 설치

npm install --save-dev prettier eslint-plugin-prettier

(참고: eslint는 create-react-app에 포함되어 있음)

2. VS Code 확장 설치 (ESLint, Prettier)

3. 프로젝트 루트에 .eslintrc, .prettierrc 파일 생성 후 설정

.eslintrc 예제

{
  "extends": "react-app",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

.prettierrc 예제

{
  "singleQuote": true,
  "trailingComma": "es5"
}

4. VS Code에서 파일을 저장할 때마다 자동 포맷팅이 되도록 설정

VS Code 설정에서

• Format On Save 검색한 후 체크 표시
• Auto Fix On Save 검색한 후 체크 표시