회사에서 프로그래밍을 같이 해나갈 때 중요한 것 중에 하나가 코딩 스타일, 컨벤션을 일괄적으로 적용하는 것이라고 생각합니다. 회사에서는 코딩 컨벤션을 정하고 코딩 가이드와 리뷰를 통해서 적용시키고는 합니다. 또는 매번 코드 리뷰에서 이런 것들을 이야기하기에는 코스트가 비싸기 때문에 자동화를 통해서 처리하곤 합니다. 그래서 린터(Linter)라고 부르는 도구를 사용해서 코드 배포 전에 코딩 컨벤션이나 스타일 등을 점검합니다. 자바스크립트나 파이썬 등은 이미 린터를 매우 많이 사용하는 편인데 HTML 또는 CSS 작성할 때 린터 사용해보신 적 있으신가요? 여러 가지 이유로 사용 많이 안해보셨을 것 같습니다. 간단한 HTML 린터 도구를 사용하면 웹 표준을 최소한 지킬 수 있는 마크업을 작성할 수 있습니다.
The W3C Markup Validation
https://validator.w3.org/ HTML 마크업에 관련한 검사를 진행할 수 있는 사이트이다. 직접 HTML 코드를 입력할 수도 있고 URL, 또는 파일 업로드를 통해서도 검사를 실행할 수 있다. 일단 해당 사이트에서 마크업 검사를 진행하고 결과로 나오는 error 정도는 잡는 걸 추천합니다. 이왕이면 Warning도 잡으면 좋겠지만..
CSS Validator
https://jigsaw.w3.org/css-validator/ 에서는 CSS 를 검사할 수 있습니다. 검사 받을 CSS 버전을 설정할 수 있으며 이 곳도 일차적으로 검사 후 Error 정도는 잡아주면 좋습니다.
HTMLHint
HTMLHint 는 html linter 도구로 html 코드를 정적 분석할 수 있는 툴이다. node를 이용해서 설치하고 사용할 수 있습니다. https://htmlhint.com/ 에서 사용 방법과 설정 방법등을 확인할 수 있다. HTMLHint는 사용하려고 하는 조건들을 설정할 수 있어서 회사 또는 팀 내에서 코딩 컨벤션을 정하고 자동화 검사 도구로 사용하기 좋습니다. 또 HTMLHint는 Visual Code Extentions 으로도 제공되고 있어서 Visual Code를 사용하는 개발자는 연동해서 좀 더 편하게 사용할 수 있습니다.
html-linter
https://pypi.org/project/html-linter/ 에서 사용방법을 확인할 수 있습니다. 해당 도구는 구글에서 사용하는 코딩 컨벤션을 기초로 제작된 도구입니다. 다만 2017년도 이후에는 개발이 진행되지 않는 걸로 보여서 사용하기에는 무리가 있지 않을까 싶네요
html audit 도구들을 짧게 세 개 정도 알아보았는데 W3C Markup Validator는 반드시! HTMLHint는 사용해보면 좋을 것 같다는 생각이 드네요. 우리 팀에서는 HTML 코딩 컨벤션을 정해가면서 HTMLHint로 설정을 해나가기로 결정하였습니다. 🙂