html 자동정렬방법 (vscode extension: prettier 추천)

Java, C와 다르게 특히나 html 웹개발을 할때 항상 나는 줄맞춤에 어려움을 겪곤 했다. 예쁘게 코드를 적으려고 해도 언제부터인가는 tag의 줄맞춤이 엉망이 되곤 했기 때문이다. 

html을 사용해본 사람들은 많이 알겠지만 div tag를 open 했으면 close tag가 있어야 하는데 이런 것을 확인할 때 줄맞춤이 잘 되어 있지 않으면 이를 확인하는 데만 오랜 시간이 걸린다. 

 

이를 쉽게 해결하고 자동 줄맞춤을 하기 위해 나는 vscode의 prettier를 애용했다. vscode를 사용하면 다양한 extension이 있는데 이를 잘 알고 활용하는 것이 개발의 효율성을 높일 수 있는 방법인 것 같다. 우선 extension은 왼쪽 사이드 메뉴바에 있다.

빨간색으로 보이는 부분을 누르면 여러 extension을 검색해서 install할 수 있다. 

검색 부분에 아래와 같이 prettier라고 검색하고,

Prettier- Code formatter라고 나오는 것을 클릭하여 install 해주면 된다.

나는 이미 install이 되어 있기 때문에 install 대신 uninstall 버튼이 뜨는데, 처음 설치하는 사람들은 아마 install 버튼이 뜰 것이다. 이를 클릭만 해주면 쉽게 설치가 된다. 

 

그런데 prettier만 깔았다고 해서 html 모든 코드가 자동 정렬이 되는 것은 아니다. 나도 처음에 설치하고 왜 바로 정렬이 안되지? 라는 생각을 했던 것 같다. 

 

html 코드에 control + S를 눌러주면 자동 정렬이 된다. 또는 저장 버튼을 눌러주어도 된다. 주기적으로 control과 S를 함께 눌러주면 코드가 자동으로 정렬이 되면서 마음도 편해진다. 

 

웹개발 하는 사람들은 특히 참고하면 좋을 것 같다! 이것에 익숙해지면 C나 Java도 정렬하고 싶어져서 control S를 계속 누르게 되는데 아쉽게도 prettier가 적용되지 않는 코드들이다. 하지만 HTML에서는 매우 유용하니 적극 추천하는 extension이다!