Visual Studio Code(VSC) Prettier 적용 및 적용 안될때 해결방안

VSC를 이용해서 코딩을 하다 보면 실수를 한다거나(HTML 작성 도중 태그를 닫지 않는다던가...) 보기 지저분한 상태(줄을 제때 안바꿨다던가...)가 될 수도 있다.

 

이를 해결하는데 도움을 주는 Prettier라는 확장 프로그램이 있다.

 

 

 

Prettier 다운로드 방법

 

Prettier - 이름부터 코드를 '더 이쁘게' 바꿔줄것만 같다

VSC 확장 탭에서 'Prettier'라고 검색하면 바로 나온다. 이것을 다운받으면 된다.

 

 

 

Prettier 적용법

 

Prettier를 다운받았다면 왼쪽 밑 톱니바퀴를 통해 '설정'탭에 들어간다.

(윈도우의 경우 Ctrl + ,)

 

설정탭에서 'format'이라고 검색해서 'Format On Save'를 찾아 체크해주면 된다.

Editor: Format On Save

 

 

Prettier 사용 효과

 

Prettier를 적용한 후 테스트 해보자.

보기에도 지저분하고 오류도 있는 HTML이다.

 

평소처럼 Ctrl + s를 눌러 저장을 하면

Prettier가 알아서 내가 작성한 코드를 이쁘게 정리해준다.

 

 

 

위에 따라했는데 적용이 안되는 경우

 

위에 순서를 따라해도 적용이 안되는 경우가 있다.

 

이럴때는 적용하고자 하는 파일을 열고 F1을 눌러 'format document'라고 검색해서 Prettier를 선택해준다.

 

또는 설정에서 'Editor: Default Formatter'를 'null(없음)'에서 'Prettier'로 바꿔준다.