[VSCode] Prettier HTML 태그 깔끔하게 정렬하기

Prettier

Prettier는 코드 포맷터 중 하나로 코드의 모양과 스타일을 자동으로 조정하여 일관성 있게 코드 스타일을 유지해주는 도구다.

JavaScript, TypeScript, CSS, HTML 등 웹 개발 언어에서 코드를 더 쉽게 읽고 이해할 수 있다.

 

 

 

Prettier를 적용한 예시를 살펴보자.

HTML 코드에서 화살괄호가 줄바꿈되어 코드가 지저분해보인다. 

 

 

Prettier 적용 방법

1. .prettierrc 파일을 생성한다.

 

 

2. 아래 내용을 작성하고 저장한다.

{
"printWidth": 3000
}

 

 

3. 확인

한 줄로 깔끔하게 정렬되었다 : )