Prettier 목적 및 설정법

Prettier 쓰는 이유는 단지 코드의 가독성을 높이기 위함인 줄 알았다. 그런데 협업할 때 큰 도움이 된다.

나의 경우에는 브랜치를 merge하고 있었는데
코드 내용이 같지만 띄어쓰기, 따옴표 등으로 인해 다른 코드로 인식하여 conflict가 발생한다고 떴다.

이 설정을 같도록 팀원끼리 설정하면 위 경우에 conflict가 발생하지 않았을 것이다.

그런데 항상 인터넷에 설정 방법을 찾아보면 다 방식이 달라서 어떤 것을 따라해야할지 모르겠어서 혼란을 겪은 적이 있다. 나를 위해 기록을 남기려고 한다.

Prettier 설정법

1. 설치
   npm install --save-dev prettier

2. .prettierrc파일 생성 후 저장

프로젝트 루트에
.prettierrc 파일 생성 후

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

위 코드들은 공동으로 적용하고자하는 규칙에 해당한다. 위 규칙이 적용되어 팀원 모두가 같은 규칙을 적용하는 것이다.

3. 루트에 폴더 .vscode를 만들고 setting.json파일을 만든다.
   다음 아래 코드를 저장한다.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

라이브러리도 설치해야하는 이유

prettier extension만 설치하면 되는거 아닌가 라고 생각했지만
확장 프로그램은 내 컴퓨터에서만 적용이 된다고 한다.
따라서, 프로젝트에 prettier 라이브러리를 설치애해야한다.

설치 명령어
npm install --save-dev prettier

팀원들이 확장프로그램이 설치되어있어도 적용되는 규칙이 다를 수있기 때문에 같은 .pretterrc파일을 프로젝트에 갖고 있어야한다.
확장프로그램은 없고 이 파일만 갖고 있어도 적용이 안된다고 한다.