Prettier 설치 및 작동 방법

Prettier설치 과정 및 오류 해결법

오늘은 정렬을 자동으로 해주는 프로그램 Prettier 설치 과정과 오류해결법에 대해 알아보겠습니다.

---

01. Prettier 설정

Prettier는 VSCode에서 코드를 이쁘게 자동으로 정렬해줍니다.
VSCode Extenstion탭에서 검색하여 설치해준 후,
좌측 아래 설정에 들어가서 setting 클릭 후 'editor format on save'를 검색, 체크박스에 체크 해줍니다.
컨트롤+s를 눌러주면 자동정렬이 됩니다.

02. 오류 해결

01번의 과정을 거치면 Prettier기능이 작동합니다. 이게 되지 않는경우 해결법에 대해 순서대로 알아보겠습니다.

02-1. 오류 해결법

다시 검색창에 'json'을 검색하면 Edit in setting.json 파일이 나오는데, 눌러준다.
editor.formatOnSave이 true인지 확인해보자 (아니라면 true로 바꿔준다.)

02-2. 오류 해결법

02-1의 과정을 거쳤는데도 해결되지 않는 경우 다음의 코드를 추가해서 넣어줍니다.

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