[Prettier] htmlWhitespaceSensitivity 속성

1. htmlWitespaceSensitivity의 세가지 속성값

prettier.htmlWhitespaceSensitivity는 세가지 속성이 있다.

• css: CSS display 속성에 따라 포맷팅
• strict: 모든 공백을 중요한 것이라 간주 (모든 요소를 인라인 요소처럼 포매팅)
• ingnore: 모든 공백을 중요하지 않다고 간주 (모든 요소를 블록 요소처럼 포매팅)

2. prettier가 HTML 문서에서 공백을 처리하는 방법

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