HTML을 Pretter로만 성형하면 망가지는 경우가 있어요.

6741 단어 HTMLPrettiertech

개요


코드 포맷기Prettier(v2.2.1)만으로 코드를 성형하면 웹상의 디자인이 붕괴되는 사례를 소개한다.

원래 HTML


<body>
  <div class="content">
    <div class="div-a">A</div><div class="div-b">B</div>
  </div>
</body>
원시 HTML은 div 안에 여러 개div만 있는 간단한 구조이다.

어플리케이션 이후


<body>
  <div class="content">
    <div class="div-a">A</div>
    <div class="div-b">B</div>
  </div>
</body>
HTML에서 기본 설정인 Pretter를 실행하면 1행에 기술된 여러 div의 부분이 줄로 분할됩니다.

서식 앞뒤 편차 발생


나는 시계판만 적용했다면 행동이 바뀌지 않았을 거라고 생각했지만 동작을 확인한 후 격식 전후에 다음과 같은 문제가 발생할 수 있었다.
형식 앞

포맷 후

까닭

AB를 나란히 표시할 때 이 HTML 파일은 다음과 같은 스타일에 적용된다는 것을 알 수 있을 것이다.
<style>
  .div-a,
  .div-b {
    display: inline;
  }
</style>
이로써 .div-a.div-b는 내연 원소가 되었고 줄을 바꾸는 것은 반각 공간으로 간주되었다.Prettier를 보면 div는 블록 요소이기 때문에 줄을 바꾸고 격식을 조정하는 데도 영향을 주지 않는다.

해결책


요소의 기본display 속성이 아무렇게나 바뀌는 것이 아니라는 것을 배웠기 때문에 삭제display: inline 설정은 가로로 스타일 활용flex을 유지하기 위해 디자인을 유지하면서 코드의 스타일을 자동으로 수정할 수 있습니다.
<style>
  .content {
    display: flex;
  }
</style>

배운 것


형식적일 뿐이지만 프로젝트 전반에 걸쳐 Pretttier를 일괄 집행하면 사고가 날 수 있다.
  • 본업에서 이렇게 간단한 말이 아니라 복잡한 코드에서 무심코 이런 문제가 발생했다
  • 그나저나 스냅숏 테스트가 역할을 잘 발휘해 차이를 검출했기 때문에degray를 발표하지 않았습니다.
    • poj 3616 (단순 dp)
    [NOIP2016] 교실 바꾸기.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage