VS Code - Prettier 자동 정렬 안먹힘(react, typescript)

요즘 프론트엔드 리액트를 학습 중인데, 빠르게 따라치다보면 줄 정렬도 엉망이고 보기 안좋은 코드가 되기 일쑤다.

이런 것을 일관되게 조율해주는게 툴을 쓰는 이유라 볼 수 있는데, snippet부터해서 prettier, styled-component extension등 이것 저것 다 설치를 했는데도, 저장 시 자동 정렬 처리를 해주지 않아서 일관된 코드 작성이 어려웠다.

 

설정이 풀려있어서 적용법을 공유해본다.

 

먼저, 당연히 Prettier는 설치가 되어 있어야한다.

VS CODE

파일 - 기본 설정 - 설정

formatter라고 검색을 하고

 

 

기본 Formatter가 없음으로 되어 있었는데, Prettier로 설정을 변경해준뒤, 잘 돌아가는 걸 볼 수 있었다.