프리티어 오류 해결하기

근 몇 달간 프리티어가 동작하지 않기 시작했다. vscode를 아무리 삭제하고 재설치하고, 리로드를 해도 똑같은 오류가 났다. 

결국 해결해내어 이 글을 쓴다!

시도했던 모든 방법을 작성해보았다. 만일, 웬만한 구글링으로도 해결하지 못했었다면 맨 아래의 방법을 참고하길 바란다! 

필자 역시 웬만한 구글링으로는 프리티어 오류가 해결되지 않아 몇 달동안 에러를 달고 작업을 했었는데, 가장 마지막 방법으로 오류를 해결했다. 

 

내가 겪었던 오류는 아래와 같다.

(1) Default Formatter 변경하기

단축키 control + , 를 눌러서 설정에 접속한다. 

default formatter를 Prettier - Code formatter로 설정을 변경한다. 

 

(2) Format on Save 변경하기

단축키 control + , 를 눌러서 설정에 접속한다. 

format on save를 검색한 뒤, Editor:Format On Save에 체크 표시가 되어있는지 확인한다. 

Editor:Format On Save Mode가 file로 되어있는지 확인한다. 

 

(3) 설정 변경하기 

단축키 control + , 를 눌러서 설정에 접속한다.

format on save를 검색한 뒤, settings.json에서 편집을 클릭한다. 

아래의 코드를 추가한다. 원래 defaultFormatter만 설정되어있었는데, editor.formatOnSave를 추가해주었다. 

혹시나 defaultFormatter가 프리티어가 아니라면 아래와 같이 변경해주면 된다. 

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
  }

 

(4) 경로 명칭 변경하기

단축키 control + , 를 눌러서 설정에 접속한다.

format on save를 검색한 뒤, settings.json에서 편집을 클릭한다. 

아래와 같이 명칭을 변경한다. 필자의 경우는 .prettierrc.js 라고 되어있던 명칭을 .prettierrc로 변경해주었다. 

"prettier.configPath": ".prettierrc",

(5) 경로 변경하기

사실 위의 네 가지 방법은 프리티어 오류로 구글링을 했을 때 마주하는 해결방법의 전부다. 필자의 경우 이 모든 방법으로도 해결되지 않았었고, 결국 (5) 경로 변경 으로 문제를 해결했다. 그도 그럴 듯이, 터미널 창에 계속 뜨던 에러는 다음과 같았다. 파일이 없다는 말이었다.

혹시나 하는 마음에 .prettierrc의 경로를 복사해보았다

웬걸! 

.prettierrc의 경로를 복사하니 /Users/seojisoo/Desktop/track1release/client/.prettierrc  라는 것을 알게 되었다. 즉, 위에서 나던 에러의 경로와 다르게 client에 한 번 더 들어가야 했던 것이다. 

 

필자의 경우, 바탕화면에서 track1release 폴더를 만들고 그 안에서 clone을 받아서 client라는 파일이 생긴 구조이다. 즉, vscode는 바탕화면에서 만든 track1release 폴더 안에서 프리티어를 찾고 있는데, 정작 내가 사용해야할 프리티어는 클론받은 client 안에 있던 것이다. 그래서 vscode를 열 때 track1release폴더를 열지 않고, 한 번 더 들어간 client를 열어주니 프리티어가 아주 잘 작동했다.  

 

(6) Require Config 체크 해제하기

다른 프로젝트에서, .prettierrc 파일을 만들지 않은 경우가 있었는데, 이때 프리티어가 작동하지 않았다....

원인은 이것이었다!

체크박스의 체크를 해제하니 아주 잘되었다!

Require Config는 루트 디렉토리에 .prettierrc, .prettierrc.json, .prettierrc.js 등의 파일이 있거나, package.json에 prettier 키가 존재하는 등 프리티어와 관련된 파일이 있는 경우에만 Prettier가 적용되기 때문이다.

 

 

참고자료

https://stackoverflow.com/questions/52586965/why-does-prettier-not-format-code-in-vs-code