Prettier는 코드를 정해진 스타일대로 포매팅해주는 도구입니다.

ESLint는 javascript 코드의 문법 검사 및 코딩 스타일 검사를 해주는 도구입니다.

이 두 가지 도구를 같이 사용하면 여러 명이서 개발을 하더라도 하나의 코딩 스타일을 유지해나갈 수 있습니다.

Prettier 설정하기

먼저 아래 명령어를 통해 Prettier 모듈을 다운받습니다.

npm install --save-dev --save-exact prettier

Prettier 모듈을 다운 받았으면 prettier 설정 파일을 만들어야 합니다.

프로젝트 최상위 디렉토리에 .prettierrc.json 파일을 만들고 아래와 같이 내용을 채워 넣으면 됩니다.

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "jsxBracketSameLine": true,
  "jsxSingleQuote": true,
  "printWidth": 100,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": true
}

• tabWidth 옵션

코드를 들여쓰기 할 때의 몇 space 만큼 들여쓰기를 할지 설정하는 옵션입니다.

• semi 옵션

코드 마지막 줄에 세미콜론을 사용할지에 관한 옵션입니다.

• singleQuote 옵션

string을 사용할 때 ''를 사용할 지에 관한 옵션입니다.

• trailingComma 옵션

객체나 배열의 마지막 원소 끝에도 ,를 사용할지에 대한 옵션입니다.

• printWidth 옵션