prettier.htmlWhitespaceSensitivity
는 세가지 속성이 있다.
css
: CSS display
속성에 따라 포맷팅strict
: 모든 공백을 중요한 것이라 간주 (모든 요소를 인라인 요소처럼 포매팅)ingnore
: 모든 공백을 중요하지 않다고 간주 (모든 요소를 블록 요소처럼 포매팅)HTML의 인라인 요소는 컨텐츠의 공백(whitespace)이 유효한 의미를 가진다. 또한, 단순한 스페이스 한 칸 뿐만 아니라 줄바꿈도 HTML 문서에 영향을 미칠 수 있다.
<!-- 컨텐츠의 공백이 유효하다. -->
1<b> 2 <b>3
1<b>2<b>3
<!--output-->
1 2 3 // 공백이 그대로 나타난 것을 확인할 수 있다
123
prettier가 포매팅을 하면서 한 줄로 된 요소를 여러 줄로 나누는 경우가 있는데, 이렇게 예기치 않게 생긴 줄바꿈으로 인해 우리가 의도한 바와 다르게 공백이 생길 수 있다.
<!-- 이런 요소를 -->
<a href="<https://codestates.com/>">코드스테이츠</a>
<!-- 이렇게 바꿀 수 없다 -->
<a href="<https://codestates.com/>">
코드스테이츠
</a>
줄바꿈으로 인한 공백을 만들지 않기 위해, prettier는 각각의 HTML 요소들의 CSS display
속성값을 확인한다.
그리고 어떤 요소가 인라인인 경우, 해당 요소에 대한 줄바꿈은 다음과 같은 방식을 사용한다.
<!-- 이렇게 생긴 요소들이 -->
<div class="block">안녕하세요</div>
<span class="inline">반가워요</span>
<!-- 이렇게 포맷됩니다. -->
<div class="block">
안녕하세요
</div>
<span class="inline"
>반가워요</span
>
블록 요소인 div
는 컨텐츠 내에서 줄바꿈이 되었지만, 인라인 요소인 inline
은 컨텐츠 내에 줄바꿈이 생기지 않도록 포맷된 것을 확인할 수 있다.
또한, 포매팅할 방식을 직접 지정할 수도 있다. 요소 바로 위에 주석 (e.g. <!-- display: block -->
)을 달면 된다.
<!-- 이렇게 생긴 요소가 -->
<span class="inline">반가워요</span>
<!-- 이렇게 포맷됩니다. -->
<!-- display: block -->
<span class="inline">
반가워요
</span>
위의 예제에서는 인라인 요소인 span
을 블록 요소처럼 포맷하도록 <!-- display: block -->
주석을 추가하였다.
https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting