[VSCode] Visual Studio Code에서 Prettier 적용 안될 때(저장할 때 자동으로 코드정렬 이쁘게 만들기)

* 원본글을 2023년 1월 업데이트하였습니다.

 

 

최근 Visual Studio Code를 사용해보고 있습니다.

엄청 깔끔하고 좋은 것 같네요.

2019년도 개발자들이 제일 좋아하는 에디터 부문에서 압도적인 1위를 하기도 했다는데, 마이크로소프트는 역시 대단한 것 같습니다.

(지, 이제 그 대단함을 Xbox와 모바일에서도 제발 보여다오...)

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

Visual Studio Code를 설치하고 코드를 이쁘게 정리해주는 익스텐션 'Prettier'를 설치했습니다.

분명, 인스톨이 완료되었고, 사용하기로 되어 있는데도, 저장할 때 적용하기 기능이 잘 적용이 안되었습니다.

 

 

검색을 해보니 나오는 해결법들이, 예전 버전에 해당하는 것인지 알려주는 스크린 샷 속의 화면과 지금 설정이 다르더군요.

저처럼 찾으시는 분이 계실까봐 간단히 메모합니다.

 

 

1. VSC 설정(Settings)에 들어간다.

  - 단축키 : Cmd + ' , ' 

 

 

2-1. 검색창에 'editor.format'을 친다

2-2. "Editor: Format On Save"을 체크

 

3-1. 검색창에 'default formatter'를 친다.

3-2. Default Formatter 에서 'Prettier'를 선택해준다.

 

 

 

4. 이제부터는 저장(Cmd+S)하면, Prettier가 적용된다. (코드를 이쁘게 정렬)

 

저장(Cmd+S) 전

저장(Cmd+S) 후

 

 

 

(참고) 프리티어 Prettier가 제대로 적용되고 있는지 확인하는 방법

 

제대로 적용이 되었다면 Visual Studio Code 오른쪽 하단에 Prettier에 체크 박스가 있습니다.

 

여기에 만약 체크 표시가 2개가 겹쳐 있다면, 에디터 포매터(editor formatter)가 두 개가 서로 포매팅을 하려고 충돌을 내고 있다는 뜻입니다. 이 때 이를 클릭하면, 아래와 같이 선택할 수 있는 화면이 뜹니다. 이 때, Prettier를 선택해주면 됩니다.

 

 

위에서 알려드린 대로 설정하면, 이 같은 화면을 보실 일은 없을 거라고 생각합니다.

 

 

도움이 되셨다면 댓글 달아주세요!