Prettier 설치 및 오류해결 방법

Prettier 설치 및 오류해결 방법

visual studio code(vscode)를 사용하면서 자동으로 코드를 정렬해주는 기능으로 Prettier가 있습니다.
사용하게 되면, ctrl + s만으로 자동을 코드의 줄이 맞춰집니다.
적용하는 방법과 실행되는 않는 경우, 오류를 해결하는 방법을 알아봅시다.

---

설치 과정

설치과정을 알아봅시다.

검색

Extensions에서 확장프로그램으로 Prettier를 검색합니다.

설치

Install을 눌러서 설치를 합니다.

오류 해결 방법

설치를 했는데, 정렬이 자동으로 되지 않을 경우. 에러를 해결하는 방법을 알아봅시다.

editor format on save

설정에 들어가서 "editor format on save"를 검색 후 체크 박스를 선택해줍니다.

json

json 파일을 검색해서 파일의 내용을 수정합니다. 코드를 넣어주어서 문제를 해결합니다.

코드

하단의 코드를 넣어봅시다.

"editor.formatOnType": true,

그럼에도 안되는 경우, 하단의 코드를 추가로 넣어줍니다.

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