VS code 확장 기능 - Prettier 설치 후 작동 오류 및 해결 방법

 

⭐️ Error Solution : VS code Prettier 설치 후 작동 안 되는 오류 ⭐️

---

01. Prettier 설치

VS code 를 사용하신다면 정렬을 잘 맞춰야 보기 편하고, 수정해야 할 부분을 좀더 빨리 찾을 수 있다는 것을 알고 계시겠지요.
저는 지난 시간 동안 수동 정렬을 해왔습니다. 약간 강박증처럼 정렬을 뙇 맞춰놓으면 마음이 편해지더라구요.
자동 정렬이 훨씬 편할까? 궁금하긴 했지만 사용해본 적은 없었는데요.
드디어 오늘, 정렬을 자동으로 맞춰준다는 이 녀석을 깔아봤습니다.
이름 그대로 ' 예뻐지게 prettier ' VS code 확장 프로그램!!

VS code 왼쪽 상단 사이드바에 조각이 떨어진, 네모 블록 모양이 있습니다. 무엇을 의미하는 아이콘일까요?
바로 확장(Extensions)프로그램을 나타내는 아이콘입니다.
아이콘을 누르면 사이드에 검색창이 생기고, 원하는 확장 프로그램을 검색 후 설치할 수 있습니다.
어서 prettier 을 검색합시다. 그리고 install 을 눌러 설치해줍니다.

설치가 완료되면 VS code 아래 상태표시줄에 prettier 가 나타납니다.
설치까지는 매우 간단하죠? 이제 자동 정렬을 체험해봅시다.
독타입 선언 밑에 tab 으로 빈칸을 길게 만들어 줬습니다.
prettier 는 저장(ctrl + s)을 할 때 자동 정렬을 해준다고 합니다.
빈칸을 바라보며 저장을 누르면 뙇! 하고!? ... 그러나 아무런 변화도 없었다.
몇 번을 저장해봐도 작동이 되질 않습니다. 뭐가 잘못된 걸까요? 구글에 검색해봅니다.
아하, prettier 는 설정을 따로 해줘야 한다네요. 검색한 내용을 바탕으로 prettier 설정을 해봅시다.

02. Prettier 설정

VS code 왼쪽 하단에 톱니바퀴 모양을 누르고, Settings - 설정 화면을 띄웁니다.

설정 화면의 검색창에 'editor format on save' 라고 입력하면, 검색 결과의 맨 윗쪽에 Editor: Format On Save 설정 항목이 나옵니다.
그 옆에 항목 설명이?? 한국어도 잘 모르는데 영어라니 ㅠㅜ 대충 해석해보면 저장할 때 파일을 포맷한다는 거.. 체크박스에 체크를 하고 얼른 넘어갑시다.

prettier 가 작동하는지 다시 확인해봅시다.
빈칸을 만들어주고, 저장(ctrl + s)을 해보면?!
오.. 빈칸이 없어지고 저절로 정렬이 맞춰집니다!

저는 'editor format on save' 에 체크하는 것만으로 작동 오류를 해결했는데, 이것만으로는 작동이 안 되는 경우도 있더라구요.
나중에 이런 경우를 만나 당황할 수도 있으니 해결법을 알아봅시다.
위의 방법만으로도 안 된다면, 설정 화면 검색창에 'json' 을 입력합니다.
JSON: Schemas 항목에 'Edit in settings.json' 을 눌러 파일을 열어줍니다.

파일에는 알 수 없는 외계어들이 나열되어 있습니다. 이는 개인적으로 설정한 항목들에 대한 내용인데요.
여기에 아래의 내용을 추가해 봅시다. 저는 내용 중간(이미지의 노랑 박스)에 넣어줬습니다.
내용 추가 후 저장하는 걸 잊지 마세요 :)

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

설정까지 완료했다면, prettier 확장 기능의 자동 정렬을 체험해봅시다.
이래도 안 된다면 구글에서 열심히 찾아서 해결해봅시다 :)