innerHTML 요소 prettier로 포맷팅하기

[nakyeonko3]

Problem

• innerHTML 안에 들어 있는 html 태그들을 prettier로 이쁘게 코드가 정렬이 안되서 보기가 힘들음.

Solution

• 아래처럼 innerHTML 코드 사이에 /* HTML */ 코드를 넣어주면 prettier 포맷팅 대상이 되서 코드가 이쁘게 정렬됨.
• vscode extension es6-string-html 이 vscode 익스텐션을 깔면 코드 가독성이 좋아짐.

  attendancesListItemTamplate({ name, type, content, profileImg }) {
    return /* HTML */ `
      <li class="attendance-item">
        <img src="${profileImg || this.defaultProfileImg}" alt="profile image" srcset="" />
        <div class="l-attendance-item">
          <div class="attendance-item__status">
            <h2 class="${this.attendanceType[type] || ''}">${type}</h2>
            <p>${content || '신청합니다.'}</p>
          </div>
          <div class="attendance-item__name">
            <p>${name || ''}</p>
          </div>
        </div>
      </li>
    `;
  }