[프로젝트 셋팅] CRA에 Prettier + ESLint 설정하기

ESLint 설정하기

ESLint란

ESLint는 JavaScript 코드의 문제를 찾고 수정하는 데 도움이 되는 오픈 소스 프로젝트이다.

• ESLint는 코드를 정적으로 분석하여 문제를 빠르게 찾는다. ESLint는 대부분의 텍스트 편집기에 내장되어 있으며 지속적 통합 파이프라인의 일부로 ESLint를 실행할 수 있다.
• ESLint가 발견한 많은 문제는 자동으로 수정될 수 있다. ESLint 수정은 구문을 인식하므로 기존 찾기 및 바꾸기 알고리즘에서 발생하는 오류가 발생하지 않는다.
• 코드를 사전 처리하고, 사용자 정의 파서를 사용하고, ESLint의 기본 제공 규칙과 함께 작동하는 고유한 규칙을 작성한다. 프로젝트에 필요한 방식으로 정확히 작동하도록 ESLint를 사용자 정의해야 한다.

 

ESLint 설정

npx eslint --init

ESLint의 기본 셋팅

// ESLint의 설정 범위 
✔ How would you like to use ESLint? · problems

// 프로젝트 모듈 타입
✔ What type of modules does your project use? · commonjs

// 프로젝트에서 사용할 프레임워크 종류
✔ Which framework does your project use? · react

// 타입스크립트 사용 여부
✔ Does your project use TypeScript? · Yes

// 코드가 실행되는 환경
✔ Where does your code run? · browser

// 설정 파일의 포맷
✔ What format do you want your config file to be in? · JSON

셋팅을 완료하면 .eslintrc.json 파일이 만들어진다.

 

 

Prettier 설정하기

Prettier란

정해진 규칙에 따라 모든 코드가 일관된 스타일을 적용시켜 정리해주는 도구이다.

 

Prettier 설정

npm i -D prettier

ESLint 파일에 prettier 추가하기

{
  ...
  "rules": {
    "prettier/prettier": "error"
  }
}

.prettierrc 파일 추가하기

{
  // 모든 문법 끝에 콤마(,) 사용
  "trailingComma": "all",
  // 들여쓰기 공백 수
  "tabWidth": 2,
  // 코드 끝에 세미콜론 사용
  "semi": true,
  // 작은 따옴표 사용
  "singleQuote": true
}

prettier 더 많은 설정은 여기를 참고하면 된다. prettier 설정 더보기

 

 

참고자료

https://prettier.io/

https://eslint.org/