prettier & eslint 함께 사용하기

 

◽ 정의

prettier: 코드 정렬 도구

eslint: 코드 검사 도구

 

 

◽ 설치하기

npm i -D eslint
npm i -D prettier
npm i -D eslint-plugin-prettier
npm i -D eslint-config-prettier

 

 

◽ 설정파일

.prettierrc.json, .eslint.json 처럼 .json을 사용할 수도 있다.

 

📄 .prettierrc

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true
}

 

📄 .eslint

{
  "extends": ["plugin:prettier/recommended", "react-app"]
}