[VSCode] 티스토리 블로그 HTML,CSS,JS 코드 Prettier로 정리하기

서론

[**VSCode**]로 HTML 작성을 하다보면 들여쓰기(indentation)와 공백의 중요성을 체감하게 됩니다. 꼭 HTML 작성이 아니여도 프로그래밍을 할 때 코드를 읽기 좋고 깔끔하게 정리하려면 들여쓰기랑 공백을 잘 맞춰서 정리해야 합니다. 

위 사진에서도 왼쪽처럼 공백이 잘 정리되지 않은 코드보다 오른쪽처럼 정리해둔 코드가 훨씬 보기 편합니다.

 

코드 작성은 어떻게 보면 글쓰기와 똑같기 때문에 저렇게 공백을 맞춰서 코드를 정리하는 것을 글의 서식(Format) 에 비유할 수 있습니다. 코드의 서식(형틀)을 맞춰서 보기 좋게 만드는게 공백 정리고 코드 정리입니다.

 

어쨌던 쉽게 말해서 코드를 깔끔하게 정리하려면 기본적으로 공백부터 잘 맞춰라.. 이런 뜻이긴 한데 이걸 일일히 사람이 하기엔 너무 귀찮고 힘이 듭니다. 그래서 위와 같이 코드를 깔끔하게 정리해주는 것, 영어로는 Code Formatter라고 하는데 이것이 바로 Prettier 입니다.

 

[**Prettier**]을 사용하면 쉽게 코드를 정리할 수 있습니다. 오늘은 이걸 사용해서 복잡한 티스토리의 HTML, CSS, JS 코드를 깔끔하게 정리해보도록 하겠습니다.

 

Prettier 사용하기

1. Prettier을 사용해서 코드를 정리하기 위해 티스토리 스킨 편집 탭으로 이동해서 HTML과 CSS 파일을 가져옵니다.

 

다만 티스토리 스킨 편집 탭에서는 HTML, CSS의 백업 기능을 지원하지 않고 있기 때문에 이렇게 main.css, main.html로 별도의 파일로 미리 [**백업**]한 다음에, 이 파일을 복사해서 포맷팅 하도록 하겠습니다. 작업 한 후에 티스토리 블로그가 망가질 수 있으니 이렇게 반드시 파일로 백업해두시고 시작하세요. 블로그 날려먹지 않게 주의하시길 바랍니다.

 

저는 따로 백업해둔 곳에서 복사해와서, Blog 라는 폴더 안에 코드를 정리할 main_copy.css 와 main_copy.html 을 가져왔습니다. 다만 티스토리에서는 [**치환자**] 라는 특수한 태그를 사용하고 있기 때문에 이 구조를 깨지 않게 조심해야 합니다. 그렇기에 Prettier 가 포맷팅을 할 때 특별한 설정을 해주셔야 하는데요.

 

같은 Blog 폴더에 .prettierrc 라는 Prettier 설정 파일을 만드시고, 이 폴더 안에서 포맷팅을 진행하셔야 합니다.

Prettier은 특별한 옵션을 주고 포맷팅을 할 수 있습니다. 코드를 정리할 수 있는 방법을 여러 가지 스타일로 변경할 수 있다는 뜻입니다. 보통은 기본값을 사용하나 이렇게 폴더에 특별히 ".prettierrc" 라는 파일을 만들어두면 여기에 설정한 값대로 포맷팅을 진행하게 됩니다.

 

티스토리의 치환자는 HTML & CSS 에서 일종의 전처리기 역할을 합니다.
예를 들어서 티스토리 HTML에 블로그 이름을 가져와서 보여주는 코드를 작성하고자 하면 우리는 블로그 이름을 티스토리 서버에서 요청해서 가져올 필요 없이 그냥 HTML에 \[##_title_##\] 라고 작성해주면 티스토리가 우리 블로그 HTML을 만들어 줄 때 저 \[##_title_##\] 부분을 블로그 이름으로 치환하여 변경해서 HTML 을 보내줍니다.
그냥 우리는 용도에 맞게 치환자만 잘 작성해주면 티스토리 쪽에서 그 부분을 잘 치환시켜서 완성된 HTML로 보내줍니다. 일단은 본글은 Prettier로 티스토리 블로그 코드를 정리하는 것이 목적이라서, 티스토리 치환자에 대해 이해할 필요가 없고 Prettier은 이미 VSCode에서 제대로 설정되었다고 가정하겠습니다. VSCode Prettier에 대한 자세한 설정은 인터넷의 여러 글을 참고해주세요.

 

{
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 200000,
  "bracketSameLine": true,
  "jsxBracketSameLine": true,
  "htmlWhitespaceSensitivity": "ignore"
}

.prettierrc 파일의 내용은 다음와 같습니다. 보시다 싶이 확장자는 없지만 json 파일 형식입니다.

탭 간격은 2칸, Tab 키 대신에 공백으로 정렬할 수 있도록 합니다.

그리고 중요한 것은 밑에 printWidth를 포함한 4줄인데 티스토리 치환자 태그를 정렬할 때 문제가 없도록 합니다.

 

<s_if_var_entryauthor>Author</s_if_var_entryauthor>

티스토리 치환자는 여러가지가 있지만 그 중에 태그 형태로 된 치환자의 경우 다음과 같은 형태를 가집니다.

Prettier 기본 옵션으로 저 태그를 정리하면 아래와 같이 되는 경우가 있습니다.

 

<s_if_var_entryauthor>
  Author
</s_if_var_entryauthor
>

 

태그는 잘 정리되었으나, 저렇게 끝에 괄호(>) 가 삐져 나가서 정리되는 경우요.

사실 저렇게 정렬을 해도 티스토리 쪽에서 저 부분을 잘 찾아서 치환시켜 줘야 합니다만 저렇게 태그 모양에 엔터가 들어가면 티스토리 쪽에서 제대로 해석하지 못해서 블로그 치환자가 깨져버립니다. 이를 방지하는 코드가 위의 Prettier 옵션입니다. 괄호가 밖으로 삐져나가지 않고 코드를 정리하도록 합니다.

 

또 길게 한줄로 적혀 있는 HTML 태그는 굳이 엔터를 쳐서 정렬하지 않고 깔끔하게 한줄로 냅두도록 printwidth가 200000로 설정되었습니다. 한줄이 20만글자가 넘지 않는 이상 한줄짜리 HTML 태그는 엔터로 정리하지 않고 그냥 냅둡니다.

같은 폴더에 .prettierrc 을 만들어두고 세팅값을 잘 설정하셨으면, main_copy.html 과 main_copy.css 에 Prettier을 적용하면 코드가 아주 깔끔하게 정리되는 걸 알 수 있습니다.

 

이제 이 정리된 코드를 복사해서 티스토리 스킨 편집탭에 반영하면 됩니다.

기존에 들여쓰기나 공백이 제멋대로였는데 이제 깔끔하게 정리되었습니다!

일반적으로 문제가 없게 적용되었다면 로딩 속도나 블로그에 대한 변화는 없어야 합니다.

 

만약 Prettier로 정리한 HTML, CSS 파일을 티스토리 쪽에 적용했는데 로딩속도가 너무 길어졌다거나 하는 건 뭔가 코드를 정리하면서 문제가 생긴겁니다. 대부분 치환자 쪽에서 문제가 생긴것일건데 이러면 이전에 백업해둔 HTML, CSS 파일을 다시 복원한 뒤에 포맷팅이 잘못되는 부분이 있나 확인해보세요.

제가 말한대로 치환자 태그의 끝 괄호(>) 가 엔터가 쳐져서 튀어나갔다거나 하는 문제일 겁니다.

 

만약에 VSCode에 Prettier이 제대로 설정되어 있지 않거나 잘 작동하지 않는 경우 Prettier을 온라인으로 사용해서 코드를 정리할 수 도 있습니다. [https://prettier.io/playground/]

 

왼편에 정리할 코드를 넣어주면 오른편에 자동으로 Prettier이 코드를 정리해줍니다. 다만 왼쪽 편에서 parser을 html로 변경하시고 위에서 제가 파일로 적용했던 Prettier 옵션을 잘 찾아서 똑같이 맞춰주시고 진행하셔야 합니다.

 --bracket-same-line, --html-whitespace-sensitivity : ignore, --print-width : 200000 정도만 적용하시면 될겁니다. 

 

티스토리 스킨 편집탭으로 가서 HTML, CSS를 복사해서 저기에 바로 붙여넣기 하면 정렬된 결과를 얻으실 수 있습니다. 물론 스킨에 적용하기 전에 백업! 백업은 꼭 필수입니다. 다 날려먹지 마시고 꼭 백업을 습관화 합시다.

 

2023-03-20 추가

Prettier로 티스토리 HTML 코드를 정리했더니 어김 없이 문제가 발생했습니다.

카테고리 글 목록으로 가보면 새로운 글이 나오지 않는 버그입니다.

 

<!-- prettier-ignore -->
<main class="swim-content">
	<!-- content here -->
</main>

혹시 몰라서 백업해둔 HTML 파일로 글 본문 내용이 표시되는 main 태그 부분을 원래대로 돌렸더니 다시 돌아옵니다.

아마 main 태그 안에서 티스토리 치환자를 포맷팅할 때 문제가 생긴듯 합니다.

main 태그 부분만 원래대로 돌리고, 다시 Prettier이 이 태그 부분만 포맷팅 할 수 없도록 [**<!-- prettier-ignore -->**] 옵션을 추가했습니다. Prettier 에서 HTML 포맷팅 시 특정 태그 부분만 포맷팅을 하지 않게 설정할 수 있는 주석 옵션입니다.

 

Prettier은 이렇게 코드 정리 시 특정 부분만을 정리 하지 않을 수 있습니다.

일반적으로 주석을 달아두면 되는데, 프로그래밍 언어 별로 조금씩 상이하니 HTML이외에 언어 포맷팅 무시는 링크를 참고하시면 됩니다.

 

 

 

 

 

출처

https://www.daleseo.com/js-prettier/