.prettierrc 파일을 루트에 작성했음에도 제대로 작동하지 않는 경우가 있다.

이때 이 곳들을 확인해보면 된다. (설정 내부의 항목들은 설정의 검색창에서 검색하면 쉽게 찾을 수 있다.)

1번)

• 설정 - default formatter를 확인한다. Prettier - Code formatter 가 선택되어 있는지 확인한다.
• 설정 - format on save를 체크한다. 저장시 prettier가 적용되는것을 원한다면 반드시 체크한다.

2번) .prettierrc 파일에 오타가 있는지 확인한다. 인간은 누구나 실수하기에.

3번) 직접 실행해서 prettier가 동작하는지 확인한다.

npx prettier --write filename.js

prettier 자체가 문제일 수 있으니 체크해볼 필요는 있다.

4번) eslint와 충돌나는지 확인한다.

5번) prettier 플러그인이 disable되어있는지, 아니면 특정 workspace에서만 disable되어있는지 확인한다.

6번) 설정화면을 JSON으로 변경하고 설정을 확인한다. 1-5번까지 모두 문제가 없다면 아마 editor.defaultFormatter가 의도한것과 다르게 설정되어 있을 수도 있다. 예를들면 typescript만 vscode default formatter로 따로 세팅되어 있다던지. vscode는 문서 포맷별로 formatter를 다르게 설정할 수 있어 모르는 사이에 저렇게 세팅되어있을 수 있다.

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

이런식으로 defaultFormatter를 esbenp.prettier-vscode 로 살포시 바꿔주자.

위 케이스 중에서는 거의 대부분 해결을 볼 수 있을 것이다.