본문 바로가기

환경 설정

[VSCode] Prettier 저장 시 자동 정렬 안될 때

 vscode를 사용하면서 분명 Prettier 확장팩이 설치되어 있음에도 불구하고,

 

저장 시 자동적으로 코드 정렬이 안될 때가 가끔 있다. 

 

 

 해결 방법으로는 두 가지가 있는데, 우선 설정 페이지를 열자.

 

[ Code > Preferences > Settings ] 으로 열거나 os별 단축키는 다음과 같다.

  • macOS : [⌘(command) + ,]
  • Windows : [Ctrl + ,]

1. Format On Save 체크하기

설정 검색창에 "Format On Save"를 검색한 뒤 체크 해제가 되어 있다면 체크를 해준다.

2. Default Format 설정 확인하기

1번 방법인 Format On Save가 체크되어 있어도 안된다면 "Default Format"을 확인해보자.

 이처럼 null(없음)으로 되어있다면 다음과 같이 Prettier로 설정해주자.

3. .prettier path

우선 npm을 이용하여 글로벌로 prettier를 설치하자.

npm i prettier -g

그리고 위 사진과 같이 prettier path를 설정해보자. OS별로 path는 다음과 같다.

windows: \AppData\Roaming\npm\node_modules\prettier

macOS: /usr/local/lib/node_modules/prettier

참고: https://stackoverflow.com/questions/58866847/in-vs-code-im-getting-this-error-failed-to-load-module-attempted-to-load-pr

4. .prettierrc 확인

root 디렉토리에 .prettierrc 파일이 있는지 확인해보자.