Prettier 개요

프리티어란?

프리티어는 이름에서 알수 있듯이 우리의 코드를 이쁘게 만들어주는 code formatter 이다.
협업을 하게 될때 내가 쓴 들여쓰기와 동료의 들여쓰기의 정도가 다르다면 코드 변경 없이
저장만 누르더라도 code change가 생기며 변경된 코드가 없음에도 커밋을 해야하는 상황이 생기게 된다.
하지만 같은 prettierrc 파일을 팀원이 모두 갖고 있다면 서로의 코드 스타일이 이미 같은 상태이기 때문에 이런 걱정을 할 필요가 전혀없다.
 

Prettier vs ESLint

사실 서로의 주목적이 다르기 때문에 비교를 할 필요가 없다.
이는 프리티어의 공식 홈페이지에서도 나와있는데 한번 살펴보자

출처 : https://prettier.io/docs/en/comparison

영어는 어려우니 chat gpt 에게 다시 물어보자

요약하자면...
코드의 포맷팅이 주 목적이면 Prettier 를 사용하고,
버그를 찾는 주 목적이면 eslint를 사용하자. => 둘을 섞어서 쓰도록 하자!

Prettier 장점

style guide 를 강화할 수 있다.

새로운 참여자의 코드 가독성을 늘려준다.

도입하기 쉽다.

Prettier의 옵션

1. 따옴표

   1. 이중따옴표와 단일 따옴표중 어떤 것을 사용할지.

   2. 이스케이프 된 방식에 대해서는 유지해준다.

2. 빈줄

   1. 빈줄은 그대로 유지

   2. 여러 빈줄은 단일 빈줄로 축약

   3. 파일의 시작과 끝의 빈 줄은 제거

3. 다중 줄 객체

   1. 객체가 원래 소스 코드에서 { 와 첫번째 키 사이에 새 줄이 있는 경우 여러줄로 유지.

const user = {
  name: "John Doe",
  age: 30,
};

위의 다중 줄 객체를 단일 줄 객체로 변경하고싶다면

const user = {  name: "John Doe",
  age: 30
};

이렇게 변경시켜주면

const user = { name: "John Doe", age: 30 };

이렇게 변경된다!

4. 세미콜론

   1. 자동으로 세미콜론을 붙여 버그를 방지해준다.

5. printWidth

   1. 해당 옵션은 prettier에 대한 엄격한 규칙이라기보다는 가이드라인이라고 할 수 있다.

   2. 이것은 대략적으로 라인의 길이가 어느정도까지 되는지 지정해주는 옵션이다.

   3. 하지만 Prettier가 의도적으로 printWidth를 초과하는 몇가지 경우가 있다.

      1. Import문에 대해서는 단일줄로 유지되게 된다.

      2. test description을 하나의줄로 유지하게 된다.