[ERROR] VSCODE : 맥북 Prettier 설정 오류 해결 방법 (+윈도우)

안녕하세요!

이번 시간에는 vscode 확장팩 중 코드 정렬을 자동으로 설정해주는 Prettier 설정하는 방법에 대해 알아보겠습니다. 🧐

 

---

 

1. 먼저 vscode에서 아래의 확장팩을 설치해주세요!

 

2. 설치가 끝난 후 오른쪽 하단 설정(settings)에 들어가서 'editor format on save'를 검색합니다.

다음 화면에 나오는 것처럼 체크박스를 클릭해주면 됩니다.

 

그 다음 정렬이 되는 지 확인하기 위해 html 아무 문서로 들어가 cmd + s (윈도우 에서는 ctrl + s)를 눌러줍니다. 

정렬이 자동으로 된다면 완료입니다👍

---

💡 만약 체크를 해도 실행이 되지 않는 경우!

어라라?

체크하고 다시 껐다 켜도 실행이 되지 않는 경우에는 다음과 같은 코드를 추가적으로 입력하시면 됩니다.

 

1. 먼저 cmd + ⇧ + p 또는 F1을 눌러서 'json'을 검색한 후 'settings.json'에 들어갑니다.

2. 들어간 후 설정 객체 안에 다음의 코드를 입력해줍니다.

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

3. 저장 후 다시 vscode를 껐다 켜보면 정렬이 되는 것을 확인할 수 있습니다 👍👍👍👍