VSCode - HTML Formatter 설정하는 방법, html 서식 지정하기

안녕하세요 상훈입니다.

VSCode를 사용하고, 저는 저장시 Html, JS, CSS Formatter 가 자동으로 돌아가도록 설정해놓았습니다.

그런데, HTML 양식에서 제가 원치않게 React, Vue 에서와 같이 html에서 하나의 태그가 있을 때 여러 속성(attribute)이 존재합니다.

그럴 때 자동으로 줄바꿈이 되는 경험이 있으실 겁니다.

React, Vue 와 같은 상황에서는 위와같이 속성값이 자동 줄바꿈이 되는 것이 보기에 좋고 편합니다.

하지만 그냥 html만 사용할 때에 속성에 의해 코드가 내려와버리면 시각적으로 보기가 불편합니다. 

마치 자바스크립트에서 무한 콜백으로 빠져버리는 것처럼요.

 

속성을 한 줄에 나열 할 수 있게 해주는 설정으로 안내해드리겠습니다.

설정하는 법입니다.

1. 설정(Setting) - 확장(Extension) - HTML 항목
2. Format : Wrap Attributes 에서 preserve 설정.
3. Wrap Line Length 를 무제한(0) 으로 설정

 

위와 같이 설정하시면, 최소한의 태그 정리만 되고, 속성이 자동으로 줄바꿈처리 되지 않습니다.

이상입니다.