[VSCode] 프리티어(Prettier) 설치 및 적용하는 방법

VSCode Prettier(프리티어)란?

VSCode에서 깔아두면 좋은 프로그램 Prettier(프리티어)😍

설치만 하면 알아서 자동 줄 정렬을 해 줄 거라고 생각했는데 전혀 먹히질 않아 고민인 분 계신가요? 안타깝게도 설치만으로 적용이 되지 않으며 따로 귀찮게 설정해줘야 하는 손이 많이 가는 녀석입니다.

지금부터 이 프리티어를 적용시키는 방법에 대해 설명드리도록 하겠습니다.

Prettier(프리티어)를 적용시켜보자!

먼저, VSCode 좌측 하단의 환경 설정 버튼을 클릭해 준 다음, [Settings (Ctrl+)]를 클릭하세요.

그런 다음, 환경 설정 탭 상단의 검색창에 「editor format on save」를 검색하고 가장 먼저 나오는 [Editor: Format On Save] 체크박스를 체크해주세요.

체크를 마치셨다면, 또 다시 검색창에 「json」을 검색하신 다음 [JSON: Schemas] 항목의 [Edit in settings.json]을 클릭합니다.

위 이미지와 같이 "editor.formatOnSave" 값이 ture로 되어 있다면 성공입니다!

따라했지만 적용이 안 되는 경우…

여기까지만 해서 성공하신 분들도 계시겠지만 그렇지 않은 분들도 분명! 계실 거예요. (제가 그랬거든요…😂)
위 방법으로도 안 될 경우 어떻게 해결해야 할지 자세히 설명드리겠습니다.

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},

"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},

아까 열었던 [Edit in settings.json]창에서 위 코드를 그대로 복사하여 추가합니다.

코드 내용이 저와 같은지 확인해주세요.

이렇게까지 하면 안되는 분은 없을거예요. 만약 이 방법으로도 안되신다면, 프리티어가 제대로 깔리지 않아서 아닐까 싶네요…😥 재설치를 해보시는 것을 추천드립니다.
오늘의 포스팅은 여기까지입니다. 틀린 정보가 있다면 댓글 피드백 언제든지 환영해요! 🥰