템플릿 리터럴(Template Literals) 속 HTML 포맷팅, 하이라이팅 하기

Javascript의 백틱을 활용한 Template Literals는 여러모로 유용한데, 그 중 여러 줄의 마크업 코드를 쉽게 작성하고 관리할 수 있다는 점도 들 수 있습니다. 다만 포매터나 하이라이트가 없는 상태가 기본이기 때문에, 기본 상태로는 코드 가독성이 매우 낮다고 볼 수 있습니다. 손쉽게 자바스크립트 Template Literals 속에 있는 HTML을 포맷팅하고 하이라이팅 할 수 있는 방법을 안내하고자 합니다.

템플릿 리터럴(Template Literals) 속 HTML 포맷팅 하기

일단 Prettier를 사용할 수 있는 환경이 준비되어야 합니다. VSCode를 사용한다는 가정하에 Prettier 익스텐션을 먼저 설치해 주셔야 합니다. 이후 Formatter의 선택도 Prettier로 해 주셔야 합니다. 그 이후부터는 매우 간단합니다. HTML을 포함하는 Template Literals 구절 앞에 주석 기능을 통해 코드를 명시해 주기만 하면 됩니다. 여기서 주의해야 할 점은 HTML의 경우 대문자로 표기해야 한다는 점입니다. 이를 통해 여백이나 줄바꿈 등을 자동으로 설정되게 할 수 있습니다.

function vanillaComponent() {
  return /* HTML */ `
    <div>
      <h1>Hello</h1>
    </div>
  `
}

참고자료

• 포맷팅 관련 스택오버플로우 포스트

템플릿 리터럴(Template Literals) 속 HTML 하이라이팅 하기

이번에는 어떻게 코드를 알록달록 하이라이팅 할 수 있는지에 대한 방법을 알아 보고자 합니다. VSCode 기준으로 다음 'es6-string-html'이라는 익스텐션을 통해서 해당 기능의 구현이 가능합니다. 별다른 추가 작업 설치 이후에 바로 포맷팅 방법과 마찬가지로 Template Literals 앞에 주석을 통해서 코드를 명시해 주면 자동으로 코드 하이라이팅이 되는 것을 확인하실 수 있습니다.

• es-6-string-html 코드 하이라이팅 익스텐션(VSCode)