가든그램 프로젝트가 시작되었다, 팀원들과 setting을 하고, 기본 뼈대만 만들어 git 원격 레포에 저장했고, 팀원들이 클론받아 사용하는 과정중에 충돌이 계속해서 일어나는 현상이 있어 차질이 생겼다.

증상

내가 만들어 놓은 세팅을 팀원이 받아 Pull을 하는 과정에서, 설정해 놓은 prettier가 수정되어 충돌이 계속해서 일어났다.
prettierrc를 설정했음에도 내 VSCODE는 prettierrc를 인식하지 못하는 현상이 발생 하였다.
우측 하단에 Prettier 에 체크가 되어 정상 작동 하는 와중에 왜 이런 증상이 생겼을까?...

시도해본 과정

기본 설정 체크

• Format on Save 체크
  
• Default Formatte 체크
  
  설정이 정상적으로 되어있어 해결되지 않았다

---

재설치와 재부팅 :

하다하다 재설치, 그리고 재부팅을 시도해 본다...하지만 역시나 고쳐지지 않음 🥲

솔루션

Prettier 설정하기

prettier 모듈을 다운받고 prettier 설정 파일을 만든다.
프로젝트 최상위 디렉토리에 .prettierrc.json 파일을 만들고 아래와 같이 내용을 채워 넣는다.

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

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

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

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

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

• printWidth 옵션은 한 줄에 80자까지 보여주고 80자가 넘어가면 줄 바꿈을 하는 옵션입니다.
  prettier 설정 더 알아보기

Prettier 실행하기

npx prettier --write ./src/App.js

위 명령어를 입력하면 prettier가 App.js 파일을 .prettierrc.json 파일에 적어놓은 규칙에 맞게 포매팅해준다.

VSCode와 Prettier 연동하기 (👾여기서 나는 문제발생👾)

VSCode에서 Prettier 설정을 해주려면 settings.json 파일을 열어야 한다.
command(or ctrl) + P 를 누르면 VSCode의 다양한 기능을 활용할 수 있는 커맨드 팔레트가 열린다.
입력창에 >settings.json 을 입력하면 기본 설정: 설정 열기(JSON) 옵션이 뜨고
클릭하면 settings.json 파일을 열 수 있다.

setttings.json 파일은 VSCode의 각종 설정값들을 JSON으로 관리할 수 있게 해주는 파일이다.
settings.json 파일을 열었으면 제일 아래에 다음 옵션들을 추가해주시면 된다.

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

• editor.formatOnSave 옵션은 VSCode에서 파일을 저장할 때마다 포매팅을 해줄 수 있도록 하는 옵션입니다.

• editor.codeActionsOnSave 옵션은 코드가 저장될 때 실행할 액션에 관한 옵션입니다.

• 안에 있는 source.fixAll.eslint 옵션은 ESLint 규칙에 어긋나는 코드가 있을 때 이 코드들을 수정해주는 옵션입니다. 두 옵션이 합쳐지면 코드가 저장될 때 ESLint 규칙에 어긋나는 코드를 수정해줄 수 있도록 하는 옵션이 됩니다. 다만 ESLint 규칙에 어긋나는 모든 코드를 수정해주는 것은 아닙니다. ESLint 규칙 중 Layout & Formatting 규칙에 어긋나는 코드만 수정해줍니다.

• [] 옵션은 해당 파일에만 적용되는 설정을 해줄 수 있는 옵션입니다. 위 예제에서는 javascript만 사용하기 때문에 [javascript], [javascriptreact] 옵션만 설정해도 되지만 나중에 typescript를 도입하더라도 prettier가 잘 동작하도록 하기 위해 [typescript, typescriptreact] 옵션도 같이 설정했습니다. [javascriptreact], [typescriptreact] 는 각각 jsx, tsx 파일을 의미합니다.

• editor.defaultFormatter 옵션은 해당 언어에서 사용할 formatter를 지정하는 옵션입니다. esbenp.prettier-vscode는 위에서 설치한 prettier를 의미합니다. editor.formatOnSave 옵션이 true일 때 defaultFormatter의 규칙대로 포매팅을 해주기 때문에 이 옵션을 설정해줘야 prettier 규칙대로 포매팅이 됩니다.

해결

수정 전

수정 후

editor.defaultFormatter 옵션은 해당 언어에서 사용할 formatter를 지정하는 옵션이다. esbenp.prettier-vscode는 위에서 설치한 prettier를 의미하는데 나는 타입스크립트로 설정이 잘못되어 프리티어가 말썽을 일으켰던 것을 확인했다.
셋팅 이슈를 해결하는데 꽤나 애먹어 기록해 놓는다!👾👾👾👾👾

참고한 벨로그!