[VSCode] Prettier - 코드를 깔끔하게 정리하기

Prettier란 무엇인가?

• Code Formatter으로 vscode에서 extensions로 설치가 가능하다.

주요 내용

• setting에서 설정해준 값에 따라 파일을 저장할때 마다 자동으로 수정해준다.
  예시) 끝에 세미클론을 안붙이고 저장하면 붙여준다 , 탭의 간격은 2로 조정해준다 등

세팅 방법

 

1.  .prettierrc 에 세팅

 

 

 - tabWidth : 탭 길이

 - useTabs : 탭 사용하면 들여쓰기

 - endofLine : 마지막 줄에 줄바꿈

 - printWidth : 지정 글자수 이상 자동 줄바꿈

 - semi : 세미클론 사용 여부

 - singleQuote : 기본 쌍따옴표인데 홑따옴표를 사용할지 여부

 

2. ctrl + shift + p > open settings(JSON) > 아래와 같이 입력

 

 

이렇게 하고 html에 적용이 안될경우

 1. tag를 제대로 규격에 맞추어 사용하지 않았다. ( 예시> body를 안닫아주었다)

 2. 아래 참고 사이트 확인 (F1을 눌러 Format Documet With을 선택하고 Prettier 선택)

참고 사이트

VScode Code Formater 인 Prettier 완벽 적용하기

[VSCode] html에 prettier 적용 안 될 때